2026 · Full Stack Developer
QuizMaster
A timed multiple-choice quiz game
- Next.js
- TypeScript
- Tailwind CSS
- Framer Motion
Overview
QuizMaster is a timed multiple-choice quiz where every question has a 15-second countdown. Players get instant color feedback on each answer, watch their progress, and see a final score with a performance message at the end.
I built it to practice modeling app flow as a state machine — the quiz moves through clear idle, active, and finished states, with each user action handled as a clean transition.
Key features
- 15 questions with a per-question countdown timer.
- Instant correct/incorrect feedback with color states.
- Live progress bar and question counter.
- Final score screen with a performance message.
- Best score saved automatically in the browser.
Challenges
- Managing the quiz flow cleanly — solved by using a reducer as a state machine (idle → active → finished) instead of scattering many useState flags.
- Handling the countdown and auto-advancing on timeout without race conditions, using a controlled timer effect.
Architecture
Built with Next.js (App Router) and TypeScript. The quiz logic is a reducer-based state machine in a useQuiz hook; a timer effect ticks each second and dispatches a timeout at zero. Best score persists via a reusable useLocalStorage hook, and the UI is composed of focused components animated with Framer Motion.
Future improvements
- Randomizing question order on each play.
- Categories, difficulty levels, and a review of wrong answers.
Interested in working together?
Let's talk about your next project.