Guía de Defensa y Explicación del Frontend - Sistema de Biblioteca
Este documento está diseñado para ayudarte a explicar, defender y demostrar el dominio sobre el frontend del sistema de biblioteca.
1. Visión General de la Arquitectura
Tecnologías Principales
Framework: React 19 (Última versión, enfoque moderno con Hooks).
Build Tool : Vite (Mucho más rápido que Webpack/Create-React-App).
Estilos: Tailwind CSS 4 (Estilizado utilitario, diseño responsivo y rápido).
Enrutamiento : React Router DOM 7.
Cliente HTTP: Axios (con interceptores avanzados).
¿Por qué esta arquitectura? (Puntos de Defensa)
Vite: Elegido por su velocidad de desarrollo (HMR instantáneo) y build optimizado para producción.
Tailwind: Permite construir interfaces modernas y consistentes sin salir del JSX/HTML. Facilita el mantenimiento al no tener archivos CSS gigantescos
separados.
SPA (Single Page Application) : La aplicación carga una vez y luego la navegación es instantánea, mejorando la experiencia de usuario (UX) comparado con
recargas de página tradicionales.
2. Componentes Críticos y Lógica Avanzada
A. Manejo de Sesión y Seguridad ( api/[Link])
Esta es la "joya" técnica del frontend. No es un simple fetch.
Defensa Clave: "Implementamos un sistema de Interceptors en Axios para manejar la seguridad de forma transparente."
1. Interceptor de Request: Automáticamente inyecta el token JWT en el header Authorization: Bearer ... de cada petición.
2. Interceptor de Response (Auto-Refresh):
Si el backend responde 401 Unauthorized (token vencido), el frontend no cierra la sesión inmediatamente.
Pausa las peticiones fallidas en una cola ( failedQueue ).
Intenta usar el refreshToken para pedir un nuevo acceso.
Si tiene éxito, reintenta automáticamente todas las peticiones pausadas. El usuario ni se entera.
Solo si el refresh falla, redirige al login.
B. Gestión de Préstamos (pages/gestion_prestamos.jsx )
Es la pantalla más compleja. Maneja mucha lógica de presentación.
Puntos a destacar :
Enriquecimiento de Datos: El backend a veces devuelve IDs (ej: codigoEjemplar: 15 ). El frontend hace un [Link] para traer préstamos Y
ejemplares, y cruza los datos en el cliente para mostrar el código real ("LIB-001") en lugar del ID.
Cálculo de Multas en Cliente : Aunque el backend es la autoridad, el frontend calcula la multa estimada en tiempo real (calculateFine) para mostrarle al
bibliotecario cuánto debe cobrar antes de confirmar la devolución.
UX Reactiva: Uso de modales ( returningLoan , renovatingLoan ) controlados por estado ( useState ) para evitar navegar a otras páginas para acciones
rápidas.
C. Servicios ( services/ )
Separación de la lógica de llamadas a API de la UI.
[Link] , [Link], etc.
Esto permite que si cambia la URL del backend, solo tocas un archivo, no todos los componentes.
3. Preguntas Frecuentes de Defensa
P: ¿Por qué usaron React y no HTML/JS simple con Django Templates? R: Queríamos una experiencia de usuario fluida y moderna (tipo App). React nos permite
crear una interfaz muy interactiva (modales, filtros en tiempo real) que sería muy difícil de mantener con templates tradicionales que recargan la página.
P: ¿Cómo manejan los entornos (Local vs Producción)? R: Usamos variables de entorno de Vite ( [Link] ). En [Link], detectamos automáticamente
si estamos en local ( localhost:8000 ) o en Azure, así que el mismo código funciona en ambos lados sin cambios manuales.
P: ¿Qué pasa si el usuario recarga la página? ¿Pierde la sesión? R: No. Guardamos los tokens (access y refresh) en localStorage . Al recargar, la aplicación lee
estos tokens y restaura la sesión automáticamente.
P: Veo que usan useState y no Redux/Context. ¿Por qué? R: Para el alcance de esta aplicación, el estado global complejo no era necesario. La mayoría de los datos
(préstamos, libros) pertenecen a páginas específicas. Usar Redux hubiera añadido complejidad innecesaria (Over-engineering). Mantenemos el código simple y
eficiente.
P: ¿Cómo aseguran que un alumno no entre al panel de administración? R: Aunque el frontend oculta botones, la seguridad real está en el Backend. Sin embargo, en el
frontend manejamos los errores 403 Forbidden y redirigimos si es necesario. El frontend es la "capa de presentación", la seguridad final siempre es del servidor.
4. Fragmentos de Código para Mostrar
Si te piden mostrar código, ve a:
1. src/api/[Link]: Muestra la lógica del [Link] . Es código de nivel profesional.
2. src/pages/gestion_prestamos.jsx:
Muestra el useEffect con [Link] (Líneas 30-66) para demostrar manejo de asincronía paralela eficiente.
Muestra la función confirmReturn (Líneas 112-159) para ver cómo se maneja la llamada a la API, la actualización de la tabla local y el manejo de
errores en un solo flujo.