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 redesigned practice workspace adds progress tracking, accessible answer feedback, a full answer review and retries using only the questions missed in the latest round.

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 proxy validates category, difficulty and question count against shared options, checks upstream responses and aborts requests after 10 seconds. The client applies a separate 15-second deadline, cancels obsolete requests and accepts only unambiguous single-answer questions. React state retains the active round and answer history, allowing missed-question retries without another API request.

Vitest and React Testing Library cover quiz components, state transitions, question validation and answer shuffling, alongside server-function tests for request validation, response normalisation, malformed data, failures and timeouts. Playwright runs against a local Vite server with mocked function responses, covering setup, completion, answer review, missed-question retries, replay, keyboard navigation, phone and desktop layouts, and timeout recovery. GitHub Actions runs the automated suites, with Playwright pinned to Ubuntu 24.04. Coverage is generated from the current checkout rather than presented as a fixed percentage.