Quiz Web

Aplicación web de cuestionarios construida con React y TypeScript. Permite configurar un quiz, responder preguntas obtenidas desde OpenTDB y visualizar resultados con detalle de aciertos, errores y tiempo total.

Características

• Formulario inicial con validación de nombre y correo.
• Configuración de cantidad de preguntas, dificultad y categoría.
• Consumo de categorías y preguntas desde la API de OpenTDB.
• Flujo por pantallas (/, /quiz, /results) con React Router.
• Estado global con Jotai y consultas remotas con React Query.
• Persistencia de resultados en localStorage.

Stack Tecnológico

• React 18 + TypeScript
• Vite
• Tailwind CSS
• React Router v6
• Jotai
• TanStack React Query
• Axios
• ESLint + Prettier

Requisitos

• Node.js 18 o superior
• npm 9 o superior

Instalación y Ejecución

npm install
npm run dev

La aplicación estará disponible en http://localhost:5173.

Variables de Entorno

Crea un archivo .env a partir de .env.example:

cp .env.example .env

Variable disponible:

VITE_API_URL=https://opentdb.com

Scripts Disponibles

• npm run dev: inicia el servidor de desarrollo.
• npm run build: ejecuta type-check y genera el build de producción.
• npm run preview: sirve localmente el build generado.
• npm run lint: ejecuta ESLint.
• npm run format: formatea el código con Prettier.

Estructura Base

• src/pages: pantallas principales (HomePage, QuizPage, ResultsPage).
• src/features/quiz: lógica de dominio (API, hooks, componentes y tipos).
• src/app/router.tsx: definición de rutas.
• src/app/store/atoms.ts: estado global con Jotai.
• src/lib: utilidades compartidas (axios, env).

Architecture

La aplicación sigue una arquitectura por capas simple:

• UI (pages/components): renderiza vistas y maneja interacción del usuario.
• State (Jotai): mantiene usuario, configuración, progreso y resultado actual.
• Data fetching (React Query): consulta categorías y preguntas, y gestiona estados de carga/error/cache.
• API layer (quiz.service + axios): encapsula llamadas HTTP a OpenTDB.
• Persistence (localStorage): guarda historial de resultados finalizados.

Flujo principal:

1. En /, el usuario completa datos y configuración del quiz.
2. En /quiz, se cargan preguntas desde OpenTDB y se registra el progreso.
3. Al enviar, se calcula puntaje/tiempo y se persiste el resultado.
4. En /results, se muestra el resumen y detalle por pregunta.

Rutas:

• /: formulario inicial.
• /quiz: resolución de preguntas.
• /results: resultado final y reintento/nuevo quiz.

Persistencia de Resultados

Cada resultado se almacena en:

localStorage["quiz-web/results"]

Incluye fecha, usuario, configuración del quiz y detalle de respuestas.