DevQuiz

DevQuiz is a React 19 and TypeScript application for testing knowledge across developer-focused topics. Users can choose a category, difficulty and quiz length before answering questions supplied by QuizAPI.io. The project combines a focused quiz experience with secure API handling and extensive automated testing.

The main challenge was making a third-party quiz API safe and dependable in a browser-based application. The QuizAPI key could not be exposed to users, and the interface needed to handle failed requests, empty question sets and inconsistent answer options while keeping scoring and navigation predictable.

The React application separates quiz setup, loading, question and completion states into focused components. Browser requests are sent to a Netlify Function, which reads the QuizAPI key from the server environment, requests questions from QuizAPI.io and normalises the response before returning it to the frontend. The client filters unavailable answers, identifies the correct option, shuffles the choices and stores the active quiz state in React.

The project has 49 passing Vitest and React Testing Library tests across seven files, covering components, quiz state, API response handling and answer shuffling. The current coverage report shows 89.47% statement coverage and 89.88% line coverage, with all UI components at 100%. Four Playwright tests cover the main browser journeys, including loading the application, starting and completing a quiz, displaying answer feedback and showing the final score. Separate GitHub Actions workflows run the Vitest and Playwright suites on pull requests and changes to the main branch.