Quiz App

A programming quiz application built with React and Vite.

Users select a programming topic, complete a timed quiz, receive immediate feedback, and view their final score.

Documentation

Project documentation can be found in the docs folder:

• PRD (Product Requirements Document)
• Architecture
• Roadmap

Please review these documents before starting work on any issue.

Tech Stack

• React
• JavaScript
• Vite
• CSS
• QuizAPI

Requirements

• Node.js
• npm

This project uses npm as the package manager.

Getting Started

Clone the Repository

git clone <repository-url>
cd <repository-name>

Install Dependencies

npm install

Environment Variables

Create a .env file in the project root using .env.example as a reference.

VITE_QUIZ_API_KEY=your_api_key_here

Access environment variables in the application using:

import.meta.env.VITE_QUIZ_API_KEY

Note:

• Only variables prefixed with VITE_ are exposed to frontend code.
• Never commit your .env file.

Start the Development Server

npm run dev

Project Structure

docs/
src/
public/
.env.example
package.json
vite.config.js

For the full application structure, refer to the Architecture document.

Contributing

Before starting work:

1. Review the PRD, Architecture, and Roadmap documents.
2. Pick or assign yourself an issue.
3. Create a feature branch.
4. Open a Pull Request linked to the corresponding issue.

Please keep implementations aligned with the agreed scope and architecture.

Current Scope

The current MVP includes:

• Topic selection
• QuizAPI integration
• Global timer
• Immediate answer validation
• Question explanations
• Results screen

For the complete scope, refer to the PRD.

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Oxc
• @vitejs/plugin-react-swc uses SWC

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.