IT Quizbee

The problem

Juniors preparing for the IT Olympics Quizbee category had generic flashcard apps and printed reviewers, but nothing that rehearsed the competition itself — a 60-minute elimination round followed by timed identification finals where every second of a question counts. Practicing in the wrong format leaves contestants unprepared for the pacing and pressure of the real event.

Role & responsibilities

Sole developer. Curated the question bank from reviewers and past competition material across 11 topics and 114 subtopics; designed the three modes to mirror actual quiz bee rules; rebuilt an earlier Flask implementation as a Next.js 16 app; owns the live deployment on Vercel.

Architecture

Next.js 16 (App Router, Turbopack, Cache Components) with React 19, TypeScript, and Tailwind CSS 4. The question bank ships as JSON read server-side; /api/questions returns sanitized questions so correct answers never reach the client, and /api/score re-grades submissions by question id. No database or accounts — attempts persist in localStorage (50-attempt cap) and the active quiz in sessionStorage, so a refresh resumes mid-quiz and results stay on the contestant's own device.

Key features

• Elimination mode — 100 random multiple-choice questions across all topics in a 60-minute answer-sheet format
• Finals mode — 30 identification questions with per-question timers of 20s/30s/40s across easy, average, and difficult rounds
• Review mode — topic → subtopic → mode drill-down for 10-question focused practice
• Result slip with score breakdown and per-question explanations, so every answer teaches
• Server-side answer protection — the question API never ships correct answers to the browser
• On-device attempt history with per-attempt review links; zero signup friction

Outcomes

Stack

Next.jsReactTypeScriptTailwind CSSLucideVercel