Induwara
Back to Projects

LIVE QUIZ ROOMS & LEADERBOARDS

Online Quiz Application

May 2023

Real-time quiz application with dynamic question updates and a live leaderboard.

Online Quiz Application project screenshot

Technologies

HTMLCSSJavaScriptReactNode.js

Case study

Online Quiz Application case study

Overview

I built this as a live-session quiz, not a static form. When the host moves on, every connected player should see the next question without refreshing. Scores and the points table move with the answers so the room stays on one clock. React owns the host and player UI. Node.js holds shared quiz state.

Problem

Classroom and event quizzes fall apart as soon as more than a handful of people join: shouting answers, refreshing a page, arguing over who hit submit first. The product is the synchronisation — broadcast the question, trust the leaderboard — not a large question bank.

What I built

I split host and player views. The host pushes the current item; clients receive it over a persistent connection (WebSockets in the original design) so the room advances together. A live points table updates as answers land. Sessions are room-based so a class or club can share one URL. The UI is built to work on a phone in a hall, not only a desktop.

On the server, Node.js (with Express in the write-up era) keeps quiz state and scores. MongoDB was part of that backend story for session data; the portfolio tech list on this site stays aligned with the React / Node.js stack recorded in Keystatic.

Impact

This is the live-session pattern I reused later in other real-time UIs (for example DriveGuard dashboards): rooms, broadcast, scores. It taught a host/player role split in a small product. I do not claim concurrent-user benchmarks I never measured.

Key features

  • Quiz rooms with a shared session URL
  • Instant question push to all participants
  • Live points table / leaderboard
  • Separate host controls and player view
  • Mobile-friendly layout for in-room play

Technologies

React on the frontend, Node.js on the backend, with HTML, CSS, and JavaScript. Real-time updates keep clients in sync.

My role

Solo full-stack build: room model, live scoring, and the host/player UX.