Clash Arena

Clash Arena – Real-Time Quiz Tournament Platform (Web App / PWA)

SHORT VERSION (for cards / one-line previews)

A live competition platform where a host runs quiz tournaments and every player sees the same question at the same moment, answers against a server-controlled clock, and watches the leaderboard update instantly after each round.

FULL DESCRIPTION

Clash Arena is a full-stack, real-time tournament platform built for universities, hackathons, company events and classrooms. It works like Kahoot but for competitive events: players join with a code, a live countdown runs on the server, and points are awarded for correct answers, speed and streaks.

For players (mobile-first):

• Join a tournament with a code and wait in a live lobby

• Answer timed questions: multiple choice, true/false, short answer, numeric and photo answers taken with the phone camera

• Instant result after each round: correct/wrong, points earned, speed bonus and rank change

• Live rankings, a final podium with confetti, badges, profile, levels and match history

• Installable as an app on the phone (PWA)

For hosts (admin control room):

• Create tournaments and build questions with a live phone preview

• Customise scoring: base points, speed bonus, streak bonus, penalties and tie-breakers

• Run the event live: open the lobby, start, pause/resume, close each round and move to the next

• Grade photo answers manually with feedback

• Results page, CSV/Excel export, and analytics charts (difficulty per question, response times, score spread and rank progress)

Technical highlights:

• Real-time updates over WebSockets (Socket.IO) on the same server as Next.js

• Fair timing: the server controls the clock and measures response time, so a slow device or a changed system clock can't cheat

• The correct answer never reaches the browser while a round is open

• Protection against double answers and race conditions at the database level

• Secure login (hashed passwords + JWT in httpOnly cookies), role-based access, input validation, rate limiting and safe image uploads

• 81 unit tests plus a full end-to-end test that simulates a host and 5 players

Tech stack:

Next.js 14 (App Router) · React · TypeScript · Tailwind CSS · Framer Motion · Socket.IO · Node.js · PostgreSQL · Prisma ORM · Redis (optional) · Recharts · Zod · Vitest · Playwright · Docker

SKILLS / TAGS

Next.js, React, TypeScript, Node.js, Socket.IO, WebSockets, Real-time Apps, PostgreSQL, Prisma, Tailwind CSS, Full-Stack Development, PWA, UI/UX, Dashboard, Gamification