GitHub Copilot al mando: JWT, colecciones y routing en vComics DB (código y post generados por IA)

Vuelta a darle caña a vComics DB, esta vez con GitHub Copilot (modelo Claude Sonnet 4.6) en modo agente desde VS Code. El salto ha sido grande: autenticación JWT completa, módulo de colecciones en front y back, routing con rutas protegidas y búsqueda con catálogo filtrable. Todo de una tacada, tanto en el backend Spring Boot como en el frontend React.

Y sí, este post también lo ha escrito Copilot, con mi supervisión. Como en el post anterior, os suelto el resumen técnico que ha generado él mismo.

El proyecto

vComics DB es una aplicación web para gestionar colecciones de cómics. Está compuesta por un frontend en React 18 + Vite y un backend en Spring Boot 3 + Java. Esta entrega ha sido especialmente intensa: hemos añadido una capa de seguridad completa y un módulo nuevo de colecciones que conecta ambas capas.

Código disponible en GitHub:
🖥️ Frontend: github.com/entorno5/front-comics
⚙️ Backend: github.com/entorno5/comics-backend

Nota: Tanto el código como este post han sido generados por GitHub Copilot (Claude Sonnet 4.6) bajo la supervisión del desarrollador. El flujo de trabajo ha sido: indicación → generación → revisión → ajuste → commit. Sin magia negra, con criterio humano encima.

⚙️ Backend Spring Boot — Lo que se ha añadido

🔐 Autenticación JWT completa

El cambio más gordo del backend. Hemos implementado un sistema de autenticación stateless basado en JSON Web Tokens:

• JwtUtil — Generación y validación de tokens JWT con firma HMAC-SHA256.
• JwtAuthFilter — Filtro de Spring Security que intercepta cada petición, extrae el token del header Authorization: Bearer ... y lo valida antes de dejar pasar la request.
• ComicsUserDetailsService — Implementación de UserDetailsService que carga el usuario desde el repositorio en memoria (extensible a BD).
• AuthController — Endpoint POST /api/v1/auth/login que recibe LoginRequestDTO (usuario + contraseña) y devuelve AuthResponseDTO con el token JWT.

🛡️ DevSecurityConfig renovado

La configuración de seguridad ha pasado de “dejar pasar todo” a una cadena de filtros real:

• Sesiones desactivadas (SessionCreationPolicy.STATELESS).
• DaoAuthenticationProvider con PasswordEncoder.
• JwtAuthFilter inyectado antes de UsernamePasswordAuthenticationFilter.
• Rutas públicas (/api/v1/auth/**, GET /api/v1/comics) sin autenticación. Resto protegido.

📚 Módulo de Colecciones

Nuevo módulo completo para que los usuarios gestionen sus colecciones personales de cómics:

• Collection — Modelo de dominio con campos: id, userId, name, comicIds.
• CollectionRepository — Interfaz del repositorio.
• InMemoryCollectionRepository — Implementación en memoria para el perfil mock.
• CollectionService — Lógica de negocio: obtener colecciones por usuario, añadir/eliminar cómics.
• CollectionController — Endpoints REST bajo /api/v1/collections.
• CollectionResponseDTO — DTO de respuesta para no exponer el modelo interno.

🔧 Ajustes al módulo de cómics

Para alinear con los nuevos módulos también se han actualizado:

• Comic model, CreateComicDTO, ComicResponseDTO y EntityMapper.
• ComicService y ComicController con mejoras de consistencia.
• MockDataInitializer con datos de ejemplo más completos para las colecciones.
• application.properties con la clave secreta JWT y otros parámetros nuevos.

🎨 Frontend React — Lo que se ha añadido

🔀 Routing con React Router v7

Se ha instalado react-router-dom v7 y configurado el enrutado completo en App.jsx:

• / → Home
• /catalog → Catálogo (pública)
• /login → Login
• /collections → Colecciones (ruta protegida)

🔑 Autenticación en el front

Para conectar con el nuevo endpoint JWT del backend:

• authService.js — Llama a POST /api/v1/auth/login, almacena el token en localStorage y lo adjunta a las peticiones autenticadas.
• AuthContext — Contexto React que expone user, login() y logout() a toda la app.
• LoginPage + LoginPage.module.css — Formulario de login con manejo de errores y redirección tras autenticación.
• PrivateRoute — Componente wrapper que redirige a /login si el usuario no está autenticado.

📖 Módulo de Colecciones

• collectionService.js — Servicio para consumir la API de colecciones con token JWT en las cabeceras.
• CollectionCard + CollectionCard.module.css — Tarjeta visual para mostrar una colección con sus cómics asociados.
• Collections.jsx + Collections.module.css — Página completa con listado de colecciones del usuario autenticado.

🔍 Catálogo con búsqueda y filtros

• SearchBar + SearchBar.module.css — Componente de búsqueda por texto con debounce.
• useCatalog.js — Hook personalizado que gestiona el estado del catálogo: búsqueda, filtros y llamada a la API.
• Catalog.jsx + Catalog.module.css — Página de catálogo con grid de cómics, barra de búsqueda integrada y estados de carga/error/vacío.
• src/types/ComicFilters.js — Tipos para los filtros del catálogo.

🧩 Componentes y páginas actualizados

• ComicCard — Rediseño con más información y mejor accesibilidad.
• ComicSlider — Ajustes de estilo y comportamiento.
• HeroSection — Actualizada para reflejar las nuevas funcionalidades disponibles.
• Home — Página principal actualizada con navegación a catálogo y colecciones.
• useDarkMode — Refactorización y mejoras de persistencia.
• index.html — Título cambiado a vComics DB.
• vite.config.js — Ajustes de proxy para la API en desarrollo.

✅ Tests unitarios

Todo el código nuevo tiene cobertura de tests con Vitest + Testing Library:

• CollectionCard.test.jsx
• SearchBar.test.jsx
• useCatalog.test.js
• Catalog.test.jsx
• comicServicePage.test.js

Stack tecnológico

Reflexión final (del humano supervisor)

Esta vez el flujo ha sido más fluido que nunca. Le indiqué a Copilot qué quería — auth JWT, colecciones, routing protegido — y fue tirando solo, preguntando cuando tenía dudas y ajustando cuando le decía que algo no cuadraba.

Lo que más me sorprende es la coherencia entre front y back: los DTOs encajan, los endpoints que consume el frontend son exactamente los que expone el backend, los tests tienen sentido… Claro que hay que supervisarlo, pero cada vez el margen de error es menor.

Código generado por GitHub Copilot (Claude Sonnet 4.6), revisado y supervisado por mí. Este post también. Así de claro. 😄