⚔️

Battle of Questions

Featured

Multiplayer real-time quiz battle game with game rooms, team modes, and live scoring system

Overview

Battle of Questions is a multiplayer interactive quiz game that runs in real-time using Socket.io. The game allows players to create game rooms and compete individually or as teams in diverse knowledge contests. The system features a live scoring leaderboard that updates instantly with each answer, creating an atmosphere of excitement and competition. The game includes multiple question categories like science, history, sports, and general knowledge, with timed rounds adding extra pressure. The app is containerized with Docker for easy deployment and operation in any environment.

Features

  • Real-time game rooms via Socket.io allowing multiple players to compete simultaneously without delay
  • Team vs team mode where players can form teams and compete collectively with a shared scoring system
  • Live scoring leaderboard that updates instantly with each answer and displays player and team rankings
  • Diverse question categories including science, history, sports, general knowledge, and geography
  • Timed rounds with a countdown timer adding excitement and pressure for players
  • Instant updates via WebSocket ensuring game state synchronization between all players without delay

How It Works

The app relies on Socket.io for bidirectional communication between the server and clients. When a room is created, the server sets up a separate Socket namespace and manages game state centrally. Questions are sent to all players at the same instant, and answers are evaluated immediately on the server to ensure fairness. Prisma is used to store game records and results, and Docker simplifies deployment.

Challenges

The biggest challenge was ensuring game state synchronization among all players in real-time without noticeable delay. Designing the timed round system with simultaneous answer validation also required high precision. Managing intermittent connections and reconnecting dropped players was an additional challenge that demanded innovative solutions.

Technologies Used

Next.jsReactTypeScriptSocket.ioTailwind CSSPrismaNextAuthDockerLiveKitshadcn/uiRadix UIFramer MotionZustandRechartsReact Hook FormZoddnd-kitSonnerEmbla CarouselLucideRailwayVercelGitNode.jsBunnext-intlnext-themesReact QuerySharpcmdkdate-fnsTanStack TableMDX EditorReact MarkdownESLint