## Overview **BigBrain** is a full-stack online quiz platform designed to replicate and extend the core experience of **Kahoot!**, allowing users to **create, host, and join interactive quiz sessions** in real time. The platform introduces an innovative **lobby system** where participants can play **mini-games** (such as *2048* and *Memory Card*) while waiting for the quiz to begin — making the waiting experience both engaging and fun. The platform showcases complete full-stack integration, with seamless coordination between the front-end, back-end, and cloud deployment. ### Migration Update (Neon PostgreSQL) To improve long-term reliability for portfolio demos, the data layer was migrated from JSON/Redis-style persistence to **Neon PostgreSQL**, using **SQL + JSONB** for game/session storage. This removes dependency on ephemeral free-tier cache retention and makes the deployment more stable for HR reviewers. --- ## Core Features

Module	Description
Project Goal	Build a responsive, web-based quiz game where users can create quizzes, join via session codes, answer timed questions, and view results.
Frontend Framework	Built with React + TailwindCSS (Vite), using component state to control question flow, timers, and scoring logic.
Backend Deployment	Hosted on Render, running an Express.js REST API handling authentication, sessions, scoring, and game state.
Database	Neon PostgreSQL as the persistent data layer (SQL + JSONB for flexible quiz/session payloads).
Game Logic	User flow: Enter nickname → Join session → Wait in lobby → Answer questions → See results.
Lobby Mini-Games	Before the quiz starts, players can play 2048 and Memory Card within the lobby.
State Management	React Hooks + Context API maintain quiz UI state, player progress, and navigation across Admin/Player pages.
UI Design	Minimalist and modern design with smooth animations and a bright blue accent theme.
Hosting	Frontend deployed on Vercel, backend on Render; secrets (e.g., `DATABASE_URL`) are stored in environment variables.
Additional Features	Countdown timer, instant scoring, session results page, and question-level feedback.

--- ## Deployment & Access The BigBrain platform is **fully deployed and playable online**: - 🌐 **Website:** [bigbrain-quiz.vercel.app](https://bigbrain-quiz.vercel.app/) - 👤 **Demo Admin Login (resettable):** - Email: `admin@email.com` - Password: `try123` - Note: This is a demo-only account and may be reset to keep the experience stable. - 🧑‍💻 **User Registration:** Anyone can register with any valid email format — no real email verification required. - 🧩 **Playable Experience:** - Admin can create quiz sessions, start games, and track results. - Players join via session code and can play **2048** or **Memory Card** while waiting in the lobby. --- ## Technical Stack - **Frontend:** React, TailwindCSS, Vite - **Backend:** Express.js (Render hosted) - **Database:** Neon PostgreSQL (Postgres + JSONB) - **Deployment:** Vercel (frontend) + Render (backend) - **State Management:** React Context + Hooks - **Other Tools:** Docker, ESLint, Prettier, dotenv, @neondatabase/serverless --- ## System Architecture **High-Level Workflow** **Admin → Player lifecycle** - **Admin Panel** → Create Game → Start Session - **Players Join Lobby** (via session code) → *(Mini-Games: 2048 / Memory)* - **Start Signal** → Timed Questions → Auto-Scoring → **Results & Leaderboard** **Runtime Components** - **Clients:** Admin Dashboard & Player UI (React + Tailwind) - **Frontend Hosting:** Vercel (static pages + routes for Admin/Player/Results) - **Backend API:** Render (Express.js REST API; endpoints for auth, sessions, gameplay, results) - **Data Layer:** Neon PostgreSQL - Tables: admins, games, sessions, players - Flexible payloads stored via JSONB (e.g., game questions, player answers, session snapshots) **Data Flow** - Client ⇄ Frontend (HTTP navigation) - Frontend ⇄ Backend API (REST calls: create game, start session, join, submit answers, fetch results) - Backend ⇄ PostgreSQL (SQL read/write for auth, sessions, players, and scoring) > Instead of relying on in-memory timers, answer availability is derived from timestamps (e.g., now - isoTimeLastQuestionStarted >= duration) to keep the backend stateless and deployment-friendly. --- ## Gallery Here’s a visual walkthrough of **BigBrain** in action: ![Admin Dashboard](/images/projects/bigbrain/1_dashboard.jpg) ![Join Page](/images/projects/bigbrain/2_join.jpg) ![Lobby with Mini-Games](/images/projects/bigbrain/3_lobby.jpg) ![2048 Game Example](/images/projects/bigbrain/4_2048.jpg) ![Question Page](/images/projects/bigbrain/5_question.jpg) ![Player Result Page](/images/projects/bigbrain/6_result.jpg) ![Session Summary](/images/projects/bigbrain/7_summary.jpg) --- ## Challenges & Learnings - Migrating from file/cache persistence to SQL-backed persistence improved reliability for long-term demos and removed dependency on ephemeral cache retention. - Designing a stateless backend required rethinking time-based transitions (e.g., replacing setTimeout with timestamp-based availability checks). - Using JSONB enabled flexible quiz/session payloads while still keeping data consistent via relational tables (admins, games, sessions, players). - Deployment learnings: managing environment variables (DATABASE_URL, allowed frontend origin) and ensuring consistent behavior across local and cloud environments. --- ## Future Improvements - Integrate **WebSocket-based updates** for smoother real-time transitions. - Add **admin analytics dashboard** for question-level performance insights. - Expand mini-game options and allow player score carryover to quiz bonuses. --- **Status:** Completed **Tags:** React, Vite, TailwindCSS, Express, PostgreSQL, Neon, Vercel, Render, Game Development **Role:** Full-stack Development (Frontend, Backend, Deployment)