kaboot/tasks.md

Kaboot Development Task List

Core Setup

• Initialize project structure (React, TypeScript, Vite-like setup)
• Configure Tailwind CSS via CDN
• Define global types (Quiz, Question, Player, GameState)
• Create constant definitions for Kahoot-style colors and shapes

Backend Services (Gemini AI)

• Setup Google GenAI client
• Implement generateQuiz function with strictly typed JSON schema
• Error handling for API limits or failures

Game Logic (Hooks)

• Create useGame hook to manage state machine (Landing -> Lobby -> Game -> Podium)
• Implement "Bot" logic (simulated players joining and answering)
• Implement Timer logic for questions
• Implement Scoring system (speed + accuracy)

UI Components

• Landing Page: Topic input and "Generate" button
• Lobby: Display Game PIN and simulated player list
• Game Interface:
  • Question display with countdown
  • Answer buttons (Red/Triangle, Blue/Diamond, etc.)
  • "Host View" vs "Player View" hybrid layout
• Scoreboard: Bar charts showing round results
• Podium: Final winners display with confetti feel

Polish & UX

• Add animations using Framer Motion (transitions, entrances)
• Ensure responsive design (Mobile-first)
• Add sound effects/music toggle (Visual only for this demo)
• Final code cleanup and type safety checks