GenExam-IA/frontend

GenExámenes IA — Frontend

Interfaz web en React + Vite para el generador de exámenes con IA. Consume la API del backend (FastAPI) y cubre todo el flujo: autenticación, plantillas, material de contexto, imágenes, generación con IA, gestión de preguntas y exportación a Moodle.

Stack

• React 18 + React Router 6
• Vite 5 (build y dev server)
• Axios con interceptores para el token JWT y el manejo unificado de errores HTTP

Estructura

src/
  api/         Cliente axios y un módulo por recurso (auth, templates, materials, images, ...)
  components/  Componentes reutilizables (UI, layout, AuthImage, QuestionCard, ...)
  context/     AuthContext (sesión) y ToastContext (notificaciones)
  hooks/       useGoogleSignIn (login con Google opcional)
  pages/       Páginas y pestañas del detalle de plantilla
  utils/       Constantes y formateadores

Desarrollo local

Requisitos: Node 20+ y el backend corriendo en http://sinbad2.ujaen.es:8074.

cd frontend
cp .env.example .env      # ajusta VITE_API_URL si es necesario
npm install
npm run dev               # http://sinbad2.ujaen.es:8075

Variables de entorno

Variable	Descripción
VITE_APP_BASE_PATH	Base pública de la SPA (debe terminar en /). En producción UJA: /deckofcars/generadorexamenesllm/.
VITE_API_URL	URL base de la API. Si se deja vacía, usa la misma base pública de la app.
VITE_GOOGLE_CLIENT_ID	(Opcional) Client ID de Google. Si está vacío, se oculta el botón de Google.

Las variables VITE_* se incrustan en el build, por lo que apuntan al backend tal y como lo verá el navegador del usuario.

Build de producción

npm run build     # genera dist/
npm run preview   # sirve el build localmente

Docker

El docker-compose.yml de la raíz construye el frontend con un build multi-stage (Node → Nginx) y lo publica en http://sinbad2.ujaen.es:8075:

docker compose up --build

Las variables VITE_APP_BASE_PATH, VITE_API_URL y VITE_GOOGLE_CLIENT_ID pueden pasarse como variables de entorno al ejecutar docker compose.

Despliegue HTTPS en subruta (Sinbad2)

Para ejecutarlo detrás de Apache en https://sinbad2.ujaen.es/deckofcars con:

ProxyPass        /deckofcars/generadorexamenesllm  http://host.docker.internal:8075/
ProxyPassReverse /deckofcars/generadorexamenesllm  http://host.docker.internal:8075/

usa estos valores de build:

VITE_APP_BASE_PATH=/deckofcars/generadorexamenesllm/
VITE_API_URL=

Con esto, el frontend sirve assets/rutas bajo /deckofcars/generadorexamenesllm y consume la API por HTTPS en la misma base (sin mixed content).

Manejo de errores

Todas las respuestas de error del backend siguen el formato { "error": { "code", "message", "details" } }. El interceptor de Axios las normaliza a una ApiError y la UI las muestra mediante toasts. Un 401 global cierra la sesión automáticamente.