A quiz app that tests your React knowledge through multiple-choice questions with syntax-highlighted code snippets, immediate feedback with explanations, and progress tracking.
100 questions across 5 topics — hooks, state management, context, design patterns, and advanced concepts (React 19 + performance internals) — at easy, medium, and hard difficulty levels.
- React 19 + TypeScript
- Vite 7
- Tailwind CSS v4
- React Router v7
- Shiki (syntax highlighting)
- Vitest + happy-dom
npm install
npm run dev| Command | Description |
|---|---|
npm run dev |
Start dev server |
npm run build |
Type-check and build for production |
npm run preview |
Preview production build |
npm run test |
Run tests |
npm run lint |
Lint with ESLint |
- Multiple-choice questions with 4 answers each
- Syntax-highlighted code snippets (Shiki)
- Immediate correct/incorrect feedback with explanations and source links
- Score summary with percentage and topic performance breakdown
- Configurable difficulty (easy/medium/hard/mixed), topic filter, and question count (10/20/30)
- Randomized question and answer order (Fisher-Yates shuffle)
- Quiz history persisted to localStorage
- Review wrong answers after quiz completion
- Dark mode, mobile-responsive
src/
├── components/
│ ├── history/ # History and topic overview components
│ ├── layout/ # Header, Layout
│ └── quiz/ # QuestionCard, AnswerOption, CodeBlock, FeedbackPanel, ScoreSummary, QuizConfig
├── data/questions/ # JSON question banks (one file per topic)
├── hooks/ # useQuizSession
├── pages/ # Home, Quiz, Results, History, Review
├── services/ # Quiz history (localStorage)
├── types/ # TypeScript types for quiz and questions
└── utils/ # Shuffle, scoring