Case Study
Built a performant quiz application with dynamic question generation, state management, and real-time scoring. Focused on user experience and accessibility compliance.
Overview
A dynamic quiz application built to explore complex React state management patterns — specifically the challenge of managing multi-step flows with branching state, real-time scoring, and smooth animated transitions.
The constraint
Quiz applications look simple but have surprisingly complex state: question order, answer state, score accumulation, timing, and transitions all need to be managed without creating a tangled update chain that produces inconsistent UI.
Highlights
Modelled the quiz flow as an explicit state machine — idle, active, answering, transitioning, complete — which made the component logic predictable and eliminated the class of bugs that come from booleans trying to represent mutually exclusive states.
Smooth enter/exit transitions between questions using CSS animations timed to the state machine transitions. The result feels fluid and intentional rather than the jarring flicker of a naive re-render.
Scores update immediately on answer selection with visual feedback — correct answers pulse green, incorrect answers reveal the right answer. Instant feedback is a core UX principle for learning applications.
Stack
React · TypeScript · Vercel
A small project, but one that sharpened my thinking about state design in React. The state machine pattern I used here has since become my default approach for any multi-step UI flow.