QuizClash

Miss Kahoot? QuizClash turns PDFs and YouTube videos into multiplayer quiz battles with AI, instant feedback, and context.

Comment

QuizClash - AI-Powered Multiplayer Quiz Platform

Inspiration

This project started at a hackathon, but I loved the idea so much that I rebuilt everything from scratch afterward. I've always enjoyed playing Kahoot — it made learning fun, social, and competitive. But writing your own questions was always a chore, especially when there's so much existing content out there. I thought: what if I could just upload my textbook or lecture video and let AI handle the rest?

That's what led to QuizClash — an AI-powered multiplayer quiz game that turns PDFs and YouTube videos into live quizzes with automatic question generation, real-time competition, and contextual feedback.

What it does

QuizClash transforms educational content into engaging multiplayer quiz experiences:

  • Smart Content Processing: Upload PDFs (with OCR fallback for scanned documents) or YouTube videos for automatic text/speech extraction
  • AI Question Generation: Creates multiple-choice questions with contextually relevant distractors using advanced NLP models
  • Real-time Multiplayer: Host live quiz sessions with up to 50 players, featuring customizable question counts (5-20) and time limits (10-60 seconds)
  • Dynamic Scoring: Points awarded based on both accuracy and response speed (900-1000 points for correct answers)
  • Contextual Learning: Each question includes explanatory context from the source material to reinforce understanding
  • Live Leaderboards: Real-time score tracking and competitive gameplay elements

How I built it

Frontend Architecture:

  • React 18 with modern hooks for component state management
  • WebSocket client for real-time bidirectional communication
  • Particles.js for interactive visual effects
  • Responsive CSS3 design with custom styling

Backend Infrastructure:

  • Node.js/Express server with comprehensive REST API endpoints
  • Native WebSocket (ws) server for real-time multiplayer state synchronization
  • AWS S3 integration for scalable file storage and processing
  • In-memory game state management with Redis for WebSocket connection tracking
  • Multer for efficient file upload handling

Machine Learning Pipeline (Python):

  • Text Extraction: PyPDF for standard PDFs with Tesseract OCR fallback for scanned/image-based documents
  • Video Processing: yt-dlp for YouTube audio extraction + OpenAI Whisper for speech-to-text transcription
  • Question Generation: Hugging Face T5-base transformer model for context-aware question creation
  • Answer Extraction: T5-based question-answering model for accurate answer identification
  • Distractor Generation: Sense2vec with Maximal Marginal Relevance (MMR) algorithm for semantically diverse, challenging wrong answers
  • Text Processing: spaCy for NLP preprocessing and scikit-learn for similarity metrics

Cloud & DevOps:

  • AWS S3 for file persistence, processing pipelines, and automatic cleanup
  • Environment-based configuration for development and production deployments
  • Comprehensive error handling and logging throughout the stack

Challenges I ran into

  • Content Extraction Complexity: Building a robust pipeline to handle diverse PDF formats (selectable text vs. scanned images) and YouTube video processing with reliable audio extraction
  • Intelligent Distractor Generation: Developing an algorithm that creates plausible but incorrect answers using semantic similarity while avoiding answers too similar to the correct one
  • Real-time State Synchronization: Managing complex multiplayer game state across WebSocket connections, including player joins/leaves, answer submissions, timer synchronization, and score calculations
  • Asynchronous ML Processing: Balancing computational intensity of transformer models with responsive user experience through efficient background processing and status updates
  • Scalable Architecture: Designing the system to handle concurrent quiz sessions while maintaining performance and data consistency

Accomplishments that I'm proud of

  • Full-Stack Solo Development: Rebuilt the entire application from scratch, integrating frontend React components, Node.js backend APIs, WebSocket real-time communication, and Python ML pipeline
  • Advanced NLP Integration: Successfully implemented a complete question generation pipeline using state-of-the-art transformer models (T5, Whisper) with custom distractor generation
  • Robust Content Processing: Built a fault-tolerant extraction system that handles both digital and scanned PDFs, plus YouTube video transcription with 95%+ accuracy
  • Seamless Multiplayer Experience: Delivered smooth real-time gameplay supporting up to 50 concurrent players with sub-second response times
  • Production-Ready Architecture: Implemented comprehensive error handling, file cleanup, game state management, and cloud storage integration
  • Smart Scoring Algorithm: Created a dynamic point system that rewards both accuracy and speed, making gameplay competitive and engaging

What I learned

  • Advanced NLP Pipeline Integration: How to chain multiple transformer models (T5 for QG/QA, Whisper for ASR) in a production environment with proper error handling and fallbacks
  • Real-time System Architecture: The complexities of WebSocket state management, including connection lifecycle, message broadcasting, and synchronization across multiple clients
  • Cloud-Native Development: Implementing AWS S3 for scalable file processing, including presigned URLs, automatic cleanup, and efficient data transfer patterns
  • Performance Optimization: Balancing ML model inference time with user experience through asynchronous processing, progress tracking, and intelligent caching strategies
  • Full-Stack Integration: Connecting React frontend, Express backend, WebSocket communication, and Python ML services into a cohesive, production-ready application

What's next for QuizClash

  • Enhanced Content Support: Adding support for PowerPoint presentations, Word documents, and direct lecture video uploads (Zoom recordings, MP4 files)
  • Advanced Question Quality: Implementing retrieval-augmented generation (RAG) for more contextually accurate explanations and semantic search for better distractor selection
  • User Experience Improvements:
    • User accounts with quiz history and performance analytics
    • Mobile-first responsive redesign for better accessibility
    • Teacher dashboard with classroom management features
  • Educational Features:
    • Difficulty level adaptation based on player performance
    • Subject-specific question templates and validation
    • Integration with learning management systems (LMS)
  • Scalability Enhancements:
    • Kubernetes deployment for auto-scaling
    • Database integration for persistent storage
    • CDN integration for global content delivery

Deployment Note

While I initially deployed QuizClash to the cloud, the computational requirements of running multiple large ML models (T5, Whisper, Sense2vec) made hosting costs prohibitive for a personal project. The application is currently configured for local deployment, but the complete setup instructions and codebase are available on GitHub for anyone interested in running their own instance or contributing to the project.

Built With

Share this project:

Updates