Trivia Quiz

A simple yet engaging trivia quiz application built with React. This project was created as an educational exercise to demonstrate modern React patterns, state management, and GDPR-compliant data handling.

What is this?

This is a browser-based quiz game where you answer trivia questions and track your scores over time. The application runs entirely in your browser with no server-side processing. All your data stays on your device using LocalStorage, and you have full control over what gets saved through a GDPR-compliant cookie consent system.

Getting started

To run this project locally, you'll need Node.js installed on your machine. Clone the repository and install the dependencies:

npm install

Once everything is installed, start the development server:

npm start

The application will open in your browser at http://localhost:3000. You can now play the quiz, adjust settings, and see how everything works.

How it works

When you first open the application, you'll see a cookie consent banner. This isn't just for show - it actually controls whether your quiz settings and results get saved to LocalStorage. If you accept, your preferences and scores persist between sessions. If you decline, you can still use the app, but nothing gets saved.

The quiz itself is straightforward. Enter your name, choose your difficulty level and number of questions, then start playing. Each question is timed, and you'll see your results at the end. All your past scores are saved (if you accepted cookies) and can be viewed in the results table.

Managing Your Privacy

You have full control over your data at any time. Click Cookie Settings in the header to:

View your current consent status
Change your cookie preferences
Clear all stored data with one click
Learn exactly what information is stored locally

All data stays on your device - nothing is ever sent to external servers.

Documentation

This project includes comprehensive documentation in two formats. You can explore the component library interactively using Storybook:

npm run storybook

This opens Storybook at http://localhost:6006 where you can see all the UI components with their different states and properties. The Button and SettingsForm components are fully documented with interactive controls.

For API documentation, generate the JSDoc files:

npm run docs

Then open docs/index.html in your browser to browse the API documentation. This covers all the hooks, stores, and utility functions used throughout the application.

You can also visit the documentation hub which provides links to both Storybook and JSDoc in one place.

Legal and privacy

This project is released under the MIT License, which means you're free to use, modify, and distribute it as you see fit. A full report of all third-party dependencies and their licenses is available in LICENSE_REPORT.txt.

Privacy is taken seriously here. The Privacy Policy explains exactly what data is collected (spoiler: not much) and how it's handled. The cookie consent system ensures compliance with GDPR regulations, giving users explicit control over data persistence.

Tech Stack

The application is built with React 19 and uses Zustand for state management, React Router DOM for navigation, and React Hook Form for form handling. The UI is styled with CSS Modules, and GDPR compliance is handled through React Cookie Consent. Documentation is generated using Storybook for component library and JSDoc for API reference. The project is built with Create React App and deployed to GitHub Pages.

A complete list of all dependencies and their licenses is available in LICENSE_REPORT.txt.

Project Structure

trivia_quiz/
├── public/                  # Static files
│   ├── index.html          # Main HTML with GitHub Pages routing
│   └── 404.html            # Redirect for client-side routing
├── src/
│   ├── components/         # React components
│   │   ├── CookieBanner/   # GDPR cookie consent
│   │   ├── CookieSettings/ # Cookie management page
│   │   ├── Header/         # Navigation header
│   │   ├── Quiz/           # Quiz game components
│   │   ├── Settings/       # Quiz settings form
│   │   └── UI/             # Reusable UI components
│   ├── hooks/              # Custom React hooks
│   │   ├── useQuiz.js      # Quiz game logic
│   │   └── useTimer.js     # Question timer
│   ├── pages/              # Page components
│   │   ├── StartPage.jsx   # Quiz setup
│   │   ├── GamePage.jsx    # Active quiz
│   │   └── ResultsTablePage.jsx # Score history
│   ├── store/              # Zustand state stores
│   │   ├── useSettingsStore.js  # Quiz settings
│   │   └── useResultsStore.js   # Score persistence
│   ├── utils/              # Helper functions
│   │   ├── localStorage.js # LocalStorage wrapper
│   │   └── validation.js   # Form validation schemas
│   └── App.jsx             # Main app component
├── docs/                   # Generated JSDoc documentation
├── storybook-static/       # Built Storybook
├── LICENSE                 # MIT License
├── LICENSE_REPORT.txt      # Dependencies licenses
├── PRIVACY.md              # Privacy policy
└── README.md               # This file

Live demo

You can try the application live at https://lahoda-dmytro.github.io/trivia_quiz/. The documentation is also available online, so you don't need to build it locally if you just want to explore how things work.

Author

Created by Lahoda Dmytro in 2026.

Home