Pues con amigo Claude, he creado el frontal para atacar al back que ya teníamos. Lo he creado con SDD, agentes y demás ayuditas IA.
Añadí unos cambios al back para ciertas cosas, y puse (pusimos) tests a todo.
A partir de aquí, os suelto el monólogo de Claude, que generó también una propuesta de post:
El proyecto
vcomics DB es una aplicación web para gestionar colecciones de cómics. Está compuesta por un frontend en React 18 + Vite 5 y un backend en Spring Boot 3 + MongoDB. Esta semana hemos dado un salto importante en ambas capas.
Código disponible en GitHub:
🖥️ Frontend: github.com/entorno5/front-comics
⚙️ Backend: github.com/entorno5/comics-backend
Frontend React — Lo que se ha añadido
🎨 Rediseño completo con sistema de tokens
Hemos reemplazado los estilos ad hoc por un sistema de design tokens basado en CSS custom properties. Todos los colores, radios, sombras y tipografías están definidos en :root dentro de index.css, lo que facilita mantener la coherencia visual en toda la aplicación.
🌙 Modo oscuro
Se ha implementado soporte completo para dark mode mediante el hook personalizado useDarkMode. El hook persiste la preferencia del usuario en localStorage y aplica el atributo data-theme="dark" al elemento <html>, lo que activa automáticamente los tokens de color del modo oscuro. También respeta la preferencia del sistema operativo (prefers-color-scheme) en la primera visita.
El usuario puede alternar el modo con el botón ☾ / ☀ en la barra de navegación.
🧩 Nuevos componentes
- HeroSection — Sección principal con titular, subtítulo, botones de acción y contador visual de cómics.
- StatsBar — Barra con tres métricas: cómics en catálogo, editoriales y coleccionistas.
- FeatureSection — Sección de características con layout alternante (prop
reverse). Se usa tres veces para describir las funcionalidades clave. - Footer — Pie de página con año dinámico.
- ComicSlider — Slider horizontal con navegación por flechas y arrastre con el ratón (drag). Incluye detección de límites mediante ResizeObserver.
- MockBanner — Aviso visible cuando los datos provienen del perfil demo. Se alimenta del campo
mockque devuelve la API.
🖱️ Scroll suave al hacer clic en “Cómo funciona ↓”
El botón secundario del hero hace un scroll suave (scrollIntoView({ behavior: 'smooth' })) hasta la primera sección de características de la página.
✅ 60 tests unitarios
Todo el código está cubierto con tests usando Vitest + happy-dom + Testing Library. Los tests cubren servicios, hooks, componentes y la página principal, incluyendo casos de carga, error, estado vacío y el indicador de modo demo.
Test Files 11 passed (11)
Tests 60 passed (60)Backend Spring Boot — Lo que se ha añadido
🔧 Perfil mock sin MongoDB
Hemos añadido el perfil Spring mock, activado con el flag -Dspring-boot.run.profiles=mock. Este perfil inicializa repositorios en memoria (InMemoryComicRepository, InMemoryUserRepository) con datos de prueba predefinidos, sin necesitar ninguna conexión a base de datos. Ideal para demos, pruebas locales rápidas o entornos sin infraestructura.
📦 Nuevo DTO: ComicPageResponse
El endpoint GET /api/v1/comics ahora devuelve un objeto paginado con cuatro campos:
content— Lista de cómicstotalElements— Total de registrostotalPages— Número de páginasmock— Booleano que indica si los datos provienen del perfil demo
Este campo mock es el que consume el frontend para mostrar el MockBanner sin necesidad de hacer una segunda petición a la API.
🛡️ MongoConfig condicional
La configuración de MongoDB ahora detecta si está activo el perfil mock y omite la conexión cuando no es necesaria, evitando errores de arranque en entornos sin MongoDB.
Stack tecnológico
| Capa | Tecnología |
|---|---|
| Frontend | React 18, Vite 5, CSS Modules, CSS Custom Properties |
| Tests Frontend | Vitest, happy-dom, Testing Library |
| Backend | Spring Boot 3.5, Java 17, Maven |
| Base de datos | MongoDB (+ modo in-memory para demo) |
| Control de versiones | Git + GitHub |
¡Fin del chorro de Claude!
En resumen, con SDD y dándole indicaciones más precisas cuando no se enteraba mucho, me ha hecho un frontal que ataca al back y pinta la página principal con toda la información que llega, con modo oscuro, aviso de que tiramos de mock (que pasa si falla la BD, para poder trabajar sin levantarla)…
Algo que me hubiera llevado días, en 2/3 horitas 😉
