React Quiz is an interactive quiz web app built with React.
It challenges users with multiple-choice questions and provides instant feedback — all with the help of React’s Context API and useReducer hook for clean state management.
- 🧠 Interactive Quiz Flow — Answer multiple-choice questions and track your performance in real time.
- 📊 Score & Progress Display — View your current score and progress as you advance through the quiz.
- 🏆 Highscore Tracking — Your highest score is saved and shown at the end of each quiz.
- ⏱️ Countdown Timer — Can you solve it fast?
- ⌨️ Keyboard Shortcuts — Use the Spacebar to continue and 1 / 2 / 3 / 4 keys to quickly select answers.
- 🎨 Responsive UI — Clean, modern design built with CSS Modules for modular and maintainable styling.
- ⚙️ Context + useReducer — Efficient state management for predictable quiz logic and easy scalability.
While building React Quiz, I learned how to:
- Manage global state using React Context Provider and useReducer.
- Structure components for scalability and separation of logic vs. UI.
- Use custom hooks to handle events like keyboard shortcuts.
- Apply CSS Modules for style encapsulation and reusability.
- Implement clear UI feedback (correct/wrong/selected states).
- React
- JavaScript (ES6+)
- CSS Modules
- Context API + useReducer
-
Clone the repository
git clone https://github.com/your-username/react-quiz.git cd react-quiz -
Install dependencies
npm install
-
Start the development server
npm start
-
Start the JSON server (for serving quiz questions)
npm run serverThen open http://localhost:3000 in your browser.
react-quiz/
├── src/
│ ├── components/ # UI components (Button, Question, Options, etc.)
│ ├── context/ # Context provider and reducer logic
│ ├── hooks/ # Custom React hooks
│ ├── index.js # Entry point
│ └── index.css/ # Global selectors
└── public/
└── index.html
Long Pham
Feel free to connect or fork the project to enhance your own React practice.
This project is open source and available under the MIT License.