Quiz application
Test your knowledge. Challenge your understanding. Track your progress.
- Role
- Frontend developer
- Status
- Completed
- Stack
- Next.js / React / TypeScript / Zustand / Tailwind CSS / DaisyUI / Chart.js
Turning questions into an interactive experience.
An interactive quiz platform where developers test their programming knowledge across technologies and difficulty levels.
- Topics: C++, C#, JavaScript, React, TypeScript, Web and Software Development
- Easy, Medium and Hard difficulty
- Topic and difficulty selection before each quiz
- Results with topic-wise performance analysis
- Chart.js visualisations of results
From question data to a result.
Data
Topic JSON files
One file per subject
State
Zustand stores
Selection, difficulty and gameplay
Interface
Next.js pages
Quiz flow
Chart.js
Results visualisation
From topic to results.
- 1
Pick a topic
Choose the subject to be tested on.
- 2
Pick a difficulty
Easy, Medium or Hard before the quiz begins.
- 3
Answer the questions
Questions and answers are driven by the shared quiz state.
- 4
Review the results
A results page shows performance by topic with charts.
Decisions that shaped it.
01
Questions as data
Quiz content lives in topic-specific JSON files, separate from the components that render it.
02
Dedicated stores
Selected topic, difficulty and gameplay state are kept apart so they carry across pages cleanly.
03
Typed models
TypeScript types describe questions, answers, topics and game options.
Screens.
Want to know more?
Next project
Notely
Notes application