Funval Internacional ha tomado la decisión de modernizar la gestión de sus programas de servicio mediante una plataforma digital. Para ello, el equipo de backend ya ha desarrollado y desplegado una REST API completa que expone todos los endpoints necesarios para el registro, seguimiento y revisión de horas de servicio de los estudiantes.
Como parte de la siguiente fase del proyecto, su equipo ha sido contratado para construir el cliente web que los usuarios finales utilizarán en su día a día. El sistema debe soportar dos perfiles de usuario: ADMIN, responsable de gestionar usuarios, cursos, categorías y revisar reportes; y STUDENT, quien registra sus actividades de servicio subiendo evidencia en PDF y hace seguimiento de su progreso.
Su entregable es una Single Page Application (SPA) en React que consuma la API provista, implemente autenticación segura por cookie, control de acceso por rol y ofrezca una experiencia de usuario profesional y responsiva.
Credenciales de Prueba
Usuarios por defecto para interactuar con la API.
- admin@funval.com
- Contraseña
- 1234567890
- student@funval.com
- Contraseña
- 12345678
Stack Tecnológico Obligatorio
⚠ Todas estas tecnologías son de implementación obligatoria.
React + Vite
Framework base. Inicializar con npm create vite@latest plantilla react.
React Router
Todas las vistas como rutas. Incluye rutas protegidas por rol y por autenticación.
useContext
Al menos un Context para el estado global de autenticación (usuario, rol, token).
Custom Hooks
Mínimo 3 custom hooks que encapsulen lógica reutilizable. Ej: useAuth, useReports, useFetch.
Tailwind CSS
Sistema de estilos exclusivo. No se permite CSS puro, Bootstrap ni MUI.
Axios
Cliente HTTP para todas las peticiones al API. No se permite fetch directamente.
Axios Instance
Instancia centralizada (api.js) con baseURL y headers por defecto.
Axios Interceptors
Request interceptor (adjuntar token) y response interceptor (manejo global de 401/403).
Vistas Requeridas
- Login
Formulario, manejo de errores de credenciales.
- Dashboard
Estadísticas diferenciadas según el rol.
- Mi Perfil
Ver/editar datos personales. Cambiar contraseña.
- Mis Reportes
Lista paginada con estado visible.
- Nuevo Reporte
Formulario con subida de PDF (horas, categoría, descripción).
- Detalle de Reporte
Estado, notas del revisor y evidencia PDF.
- Progreso del Curso
Avance de horas aprobadas vs. requeridas.
- Gestión de Usuarios
Tabla paginada, crear y eliminar usuarios.
- Importar CSV
Carga de archivo CSV con resultado de importación.
- Categorías
CRUD completo de categorías de servicio.
- Cursos
CRUD completo de cursos.
- Revisión de Reportes
Filtros por estado y estudiante. Aprobar/rechazar.
- Detalle Reporte (Admin)
PDF embebido y emisión de revisión con notas.
Requisitos Técnicos Obligatorios
- 1.Autenticación por cookie (obligatorio): Todas las peticiones deben enviarse con
withCredentials: trueen Axios para que el navegador adjunte automáticamente la cookie HTTPOnly. No se acepta manejar el token manualmente ni enviarlo en el header Authorization. - 2.Guards de ruta: Las rutas protegidas redirigen al login si el usuario no está autenticado.
- 3.Control de acceso por rol: Las vistas de Admin no son accesibles por STUDENT y viceversa.
- 4.Manejo de errores HTTP: Los errores 401, 403, 404, 409 y 422 deben mostrarse al usuario de forma clara.
- 5.Paginación: Las listas de usuarios y reportes deben implementar paginación funcional.
- 6.Formularios con validación: Validar los campos antes de enviar la petición al servidor.
- 7.Feedback visual: Indicadores de carga (loading states) durante las peticiones HTTP.
- 8.Visualización de PDF: La evidencia debe poder visualizarse en el navegador usando el endpoint de stream.
Rúbrica de Evaluación
Puntaje total: 100 puntos
1. Funcionalidad
50 pts| Criterio | Pts | Descripción |
|---|---|---|
| Login y Logout | 5 | Autenticación funcional, redirección según rol, manejo de error de credenciales. |
| Dashboard (ambos roles) | 5 | Muestra estadísticas correctas diferenciadas por rol. |
| Perfil y cambio de contraseña | 4 | Edición de perfil funcional, validación de contraseña actual. |
| CRUD Categorías (Admin) | 5 | Crear, listar, editar y eliminar categorías. |
| CRUD Cursos (Admin) | 5 | Crear, listar, editar y eliminar cursos. |
| Gestión de Usuarios (Admin) | 6 | Listar con paginación, crear usuario, eliminar, importar CSV. |
| Crear y editar Reporte (Student) | 7 | Formulario con subida de PDF, validaciones correctas. |
| Revisión de Reportes (Admin) | 7 | Filtrar reportes, aprobar/rechazar con notas, aprobar parcial con horas. |
| Visualización de evidencia PDF | 3 | PDF embebido o descargable desde el detalle del reporte. |
| Progreso del curso (Student) | 3 | Visualización del avance de horas aprobadas vs. requeridas. |
2. Calidad del Código
20 pts| Criterio | Pts | Descripción |
|---|---|---|
| Organización del proyecto | 5 | Estructura de carpetas clara, separación de concerns (componentes, servicios, rutas). |
| Reutilización de componentes | 5 | Componentes genéricos reutilizables (botones, inputs, tablas, modales). |
| Manejo de estado | 5 | Estado centralizado o bien estructurado, sin duplicación innecesaria. |
| Limpieza y legibilidad | 5 | Código legible, sin código muerto, nombrado consistente. |
3. UX / Interfaz
15 pts| Criterio | Pts | Descripción |
|---|---|---|
| Diseño coherente y profesional | 4 | Paleta de colores consistente, tipografía legible, espaciado adecuado. |
| Diseño responsivo | 4 | La aplicación se adapta correctamente a móvil, tablet y escritorio. |
| Feedback al usuario | 4 | Loading states, mensajes de éxito/error visibles, confirmaciones antes de eliminar. |
| Navegación intuitiva | 3 | Menú claro, indicadores de ubicación, flujos de usuario sin fricciones. |
4. Requisitos Técnicos del Stack
15 pts| Criterio | Pts | Descripción |
|---|---|---|
| Guards de ruta y acceso por rol | 2 | Rutas protegidas correctamente, no se puede acceder a vistas de otro rol. |
| Manejo correcto de errores HTTP | 1 | Los errores 401, 403, 404, 409 y 422 se muestran al usuario de forma comprensible. |
| Paginación funcional | 1 | La paginación de usuarios y reportes funciona correctamente. |
| React Router | 2 | Todas las vistas definidas como rutas, guard components implementados. |
| useContext para autenticación | 2 | Context con estado global del usuario autenticado, rol y métodos de login/logout. |
| Custom Hooks (mínimo 3) | 3 | Hooks reutilizables que encapsulen lógica de negocio o acceso al API. |
| Axios Instance | 2 | Instancia centralizada con baseURL y headers por defecto configurados. |
| Axios Interceptors | 2 | Request interceptor con withCredentials: true para enviar la cookie; response interceptor maneja 401/403 globalmente. |
100
puntos totales
Penalizaciones
| Situación | Penalización |
|---|---|
| Credenciales o tokens hardcodeados en el código | -10 pts |
| La aplicación rompe (crash) al recibir un error del API | -5 pts |
| Uso de frameworks fullstack (Next.js, Nuxt.js, etc.) | -15 pts |
| No usar Tailwind CSS como sistema de estilos | -10 pts |
No implementar useContext para el estado de autenticación | -10 pts |
| Implementar menos de 3 custom hooks | -5 pts / hook |
No usar Axios (usar fetch directamente) | -10 pts |
| No implementar Axios Instance centralizada | -5 pts |
| No implementar Axios Interceptors | -5 pts |
No usar withCredentials: true — manejar el token manualmente o enviarlo en el header | -10 pts |
| No consumir el endpoint de dashboard | -5 pts |
Criterios de Entrega
Repositorio Git
GitHub, GitLab o similar. El historial de commits debe reflejar el trabajo del equipo.
README del frontend
Instrucciones claras para instalar y ejecutar el proyecto localmente.
Presentación en vivo
Cada grupo hará una demostración funcionando contra el API real.
URL base del API
http://localhost:8000/api/v1 o la que indique el instructor.
Tablero de Trello
Tickets de desarrollo organizados por backlog. Úsalo para planificar y registrar el avance del equipo.
trello.com/b/X8D6zGBt/frontend-hs-app →