QuestFest: The GK Odyssey - Real-Time Quiz Platform

A modern, real-time quiz application that allows hosts to create and manage interactive quiz sessions while participants join and compete in real-time. Built with React, TypeScript, Socket.IO, and Node.js.

🌟 Features

• Real-time Quiz Experience: Questions, answers, and leaderboards update instantly across all connected users using Socket.IO
• Admin Dashboard: Create custom quizzes, add questions with multiple choice options, and control quiz flow
• User Participation: Easy room joining via 6-digit code, real-time answer submission, and instant feedback
• Dynamic Leaderboards: Live updating leaderboard with points based on accuracy and speed
• Timer-based Gameplay: Each question has a countdown timer to add excitement
• Beautiful UI: Modern interface with animations, built using Tailwind CSS and Shadcn UI components
• Multiple Quiz States: Support for not_started, question, leaderboard, and ended states
• CSV Export: Automatically exports final quiz results to CSV files

🏗️ Architecture

The system is built with a microservices architecture:

Socket Backend

• Manages real-time communication and quiz game logic
• Handles user connections, quiz state management, and scoring
• Built with Node.js, Express, and Socket.IO
• Includes managers for Quiz, User, and IO operations

Serverless Quiz Backend

• Provides persistent data storage for quizzes and problems
• RESTful API built with Hono framework running on serverless infrastructure
• Uses MongoDB with Prisma ORM for data modeling and access
• Includes routes for admin and user operations

Frontend

• React-based UI with TypeScript for type safety
• Modern design using Tailwind CSS and Shadcn UI components
• Real-time updates with Socket.IO client
• Responsive design for both desktop and mobile users

📋 Prerequisites

• Node.js (v16+)
• npm or yarn
• MongoDB (for the serverless backend)

🚀 Installation & Setup

Clone the repository

git clone https://github.com/yourusername/final-RealTimeQuiz-websocket.git
cd final-RealTimeQuiz-websocket

Socket Backend Setup

cd socket-backend
npm install
npm run dev

The Socket.IO server will start on port 3000.

Serverless Backend Setup

cd serverless-quiz-backend
npm install
npm run dev

Make sure to configure your MongoDB connection in the .env file:

DATABASE_URL="your_mongodb_connection_string"

Frontend Setup

cd frontend
npm install
npm run dev

Create a .env file in the frontend directory with:

VITE_BACKEND_URL="http://localhost:3000"

🎮 How to Use

Admin (Quiz Host)

1. Navigate to /admin route
2. Enter a room ID to create a new quiz
3. Create questions manually or generate a demo quiz
4. Use Quiz Controls to start the quiz, navigate between questions, and end the quiz
5. View the leaderboard to see participants' scores

User (Quiz Participant)

1. Navigate to the homepage and click "Join Quiz"
2. Enter the 6-digit room code provided by the admin
3. Enter your nickname to join the quiz
4. Wait for the host to start the quiz
5. Answer questions within the time limit
6. View your position on the leaderboard after each question and at the end

📦 Project Structure

├── frontend/               # React frontend application
│   ├── src/                # Source files
│   │   ├── components/     # UI components
│   │   │   ├── pages/      # Page components
│   │   │   ├── ui/         # UI utility components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── lib/            # Utility functions
│   │   └── ...
├── socket-backend/         # Socket.IO server
│   ├── src/
│   │   ├── managers/       # Business logic modules
│   │   │   ├── IoManager.ts
│   │   │   ├── QuizManager.ts
│   │   │   └── UserManager.ts
│   │   ├── Quiz.ts         # Core quiz logic
│   │   └── index.ts        # Server entry point
└── serverless-quiz-backend/ # Serverless backend for data persistence
    ├── src/
    │   ├── routes/         # API routes
    │   └── index.ts        # API entry point
    └── prisma/             # Database schema and migrations

🛠️ Technologies Used

Frontend

• React.js with TypeScript
• Vite for fast development
• Socket.IO client
• Tailwind CSS
• Shadcn UI Components
• Framer Motion for animations
• React Router for navigation
• React Hook Form for form handling
• Zod for validation

Backend

• Node.js with TypeScript
• Express.js
• Socket.IO for real-time communication
• MongoDB with Prisma ORM
• Hono framework for serverless functions

🌐 Deployment

The application can be deployed on various platforms:

• Frontend: Vercel, Netlify, or GitHub Pages
• Socket Backend: Heroku, DigitalOcean, or AWS EC2
• Serverless Backend: Cloudflare Workers or AWS Lambda