TriviaQuest | Brian Cabello

Round 01 How a round travels the wire

One round, from connect to game over

The server owns the clock and the scoreboard. Clients never decide outcomes; they render what arrives and emit a player's intent. That single rule is what keeps a room full of browsers perfectly in sync.

Player connect

A player opens the page and joins the single shared game. There are no separate rooms, so everyone competes in the same match.
Server gameConfig

The server sends the category list and the current settings for category, difficulty, and number of rounds.
Player joinGame

The player submits a name. The server sanitizes it with xss and rejects duplicates. The first player to join auto-starts the match.
Server joinSuccess + playerList

The server admits the player and broadcasts the updated roster to everyone connected.
Server newQuestion + timerUpdate

The question is broadcast to every client at once, and the server ticks a 30-second countdown one second at a time.
Player submitAnswer

The server scores the answer using a difficulty base of 10, 20, or 30 points plus a speed bonus of half the time remaining, then returns the result.
Server roundEnd

When the timer reaches zero or every player has answered, the round closes and the correct answer is revealed.
Server nextRoundIn or gameOver

A 5-second countdown leads into the next question. After the final round the game ends, shows the winner, and resets the scores.

loops back to the next question until the final round

Every transition is driven by the server, so all clients stay in lockstep.

Round 02 Instant, shared, ranked

The leaderboard everyone watches

Every answer re-broadcasts the roster to all players at once, so the standings shift in real time as the round plays out. The top three earn gold, silver, and bronze, and a check marks who has locked in their answer.

Leaderboard Round 6 of 10

Ava 245
Mateus 210
Brian 185
4 Sofia 130
5 Liam 95

Illustrative view. The board re-ranks on every submitted answer.

Round 03 Solving for real-time

Keeping every screen in sync

trivia-quest // live game

The challenge

Building a real-time multiplayer game that synchronizes question delivery, answer submission, scoring, and leaderboard updates across all connected players simultaneously, without any perceptible lag. The networking layer needed to handle player joins, disconnections, round transitions, and game-over states cleanly.

The solution

We used Socket.io for bidirectional WebSocket communication between the Express server and all connected browser clients. The server manages game state centrally: fetching trivia questions from the OpenTDB API, broadcasting questions to all players, collecting answers within a 30-second countdown timer, scoring by difficulty plus a speed bonus, and pushing live leaderboard updates. We sanitize player names server-side with the xss library and validate every action against the authoritative game state, and built a settings system allowing any player to configure category, difficulty, and round count before the match starts.

Round 04Systems online

Under the hood

M01Online

Server-Authoritative State

All scoring, timing, and round flow live on the server; clients only render and emit intent, preventing client-side tampering.

M02Online

Real-Time WebSockets

Socket.io bidirectional communication for instant question delivery, answer collection, and live score broadcasting.

M03Online

Live Leaderboard

Dynamic player ranking with gold/silver/bronze medal system, sorted scores, and visual answer-status indicators.

M04Online

Game Configuration

Players choose trivia category, difficulty level (Easy/Medium/Hard), and number of rounds before starting.

M05Online

Timed Rounds

Countdown timer per question with automatic round progression when time expires or all players answer.

M06Online

Input Sanitization

Server-side xss sanitization and duplicate-checking on player names, with every game action validated against authoritative server state.

M07Online

Auto-Restart

Game-over screen with final scores, winner announcement, and automatic redirect to lobby for replay.