Skip to content

README.md

Latest commit

 

History

History
59 lines (47 loc) · 1.98 KB

README.md

File metadata and controls

59 lines (47 loc) · 1.98 KB

React Concept Testing

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.

Tech Stack

  • React 19 + TypeScript
  • Vite 7
  • Tailwind CSS v4
  • React Router v7
  • Shiki (syntax highlighting)
  • Vitest + happy-dom

Getting Started

npm install
npm run dev

Scripts

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

Features

  • 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

Project Structure

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
⚡