Github repo live

📌 Overview

Quiz Quarters is a real-time multiplayer quiz web application that allows users to join quiz rooms, answer timed questions, view live leaderboards, and compete in a fast-paced environment. Built using React, Socket.IO, and Express, the app provides a seamless and dynamic quiz experience.

🚀 Tech Stack

🧩 Folder Structure

cpp
CopyEdit
/client
├── Room.jsx         // Main quiz room logic & UI
├── App.jsx          // Router logic
└── index.css        // Tailwind CSS configuration

/server
└── index.js         // Express server & Socket.IO logic

👨‍💻 Functional Breakdown

Frontend (/client)

• Room.jsx:
  • Handles socket connection to backend.
  • Emits and listens to events: join-room, send-question, submit-answer, update-leaderboard, quiz-ended.
  • Host functionality to create/send questions, end quiz, and view real-time leaderboard.
  • User functionality to select options and track correctness.
  • Integrated countdown timer and UI states for quiz flow.
• App.jsx:
  • Sets up React Router to manage routes (currently Room view).
• index.css:
  • Tailwind CSS styling for responsive, accessible design.

Backend (/server/index.js)

• Express:
  • Basic REST route (GET /) to test server status.
  • CORS configured for Vercel deployment.
• Socket.IO:
  • join-room: Adds user to room and broadcasts updated user list.
  • send-question: Broadcasts a new question to the room.
  • submit-answer: Checks correctness, updates score, and emits updated leaderboard.
  • end-quiz: Notifies all users to end the quiz session.
  • Tracks users and scores via in-memory objects (users, scores).