S
sero
Gamma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
🚀 App #3: Manga Blog - Descubriendo el poder del SDD
¡Hola comunidad! 👋 Como parte de mi reto #OneAppADay, hoy les presento Manga Blog, mi tercera aplicación, donde implementé Spec-Driven Development (SDD) para construir una experiencia moderna de descubrimiento y gestión de mangas y animes.
📱 Sobre Manga Blog
Una aplicación web moderna que permite a los usuarios descubrir, explorar y gestionar su colección de mangas y animes en tiempo real. Integra datos de la API pública Jikan, ofreciendo una experiencia fluida con búsquedas, filtros avanzados y gestión local de favoritos.
Core features:
⚙️ Tech Stack
🎯 La Técnica: Spec-Driven Development
¿Qué es SDD? Un enfoque donde defines especificaciones claras antes de escribir código. En lugar de codear directamente, creé primero un documento detallado sobre qué quería construir.
Cómo lo implementé:
1. Claude para spec inicial: Generé una descripción detallada de la app + stack elegido usando IA. Esto ahorró horas de planeación manual.
2. Context Skill: Agregué archivos de contexto para mantener consistencia en decisiones arquitectónicas.
3. V0 (Vercel) para template: Descargué una plantilla visual inicial, asegurando consistencia de diseño desde el inicio.
4. Design System extraction: Extraje el design system de la plantilla (sin shadcn por preferencia personal).
5. Propose Skill por módulos: Generé cada página paso a paso, asegurando calidad incremental.
6. API Integration: Finalmente integré Jikan API para datos reales, no estáticos.
Por qué SDD aquí? Porque me permitió trabajar de forma ordenada sin idas y venidas. Tenía clara la visión antes de escribir JSX.
📚 Aprendizajes Clave
✅ Qué funcionó bien
Usar Claude para generar el contexto inicial ahorro MUCHO tiempo de revisión manual. Las especificaciones claras desde el inicio eliminaron refactors innecesarios.
⚠️ Desafío importante
Mantener sincronía entre el design system generado y la implementación real requirió ajustes iterativos, especialmente al rechazar librerías predefinidas como shadcn.
🔮 La lección
Crear plantillas iniciales es mucho más rápido y consistente que hacerlo manual. Iniciar por la parte visual (UI/UX) y luego los datos es el flujo correcto.
💡 Bonus insight
Construir página por página, en lugar de todo de una vez, aseguró mayor calidad y menor deuda técnica acumulada.
🔗 Links
📂 Repositorio: https://github.com/Jodev97/OnedayOneapp/tree/master/03-blog-manga
❓ ¿Qué opinas del SDD? ¿Aplicas especificaciones antes de código o prefieres un enfoque más iterativo? Déjame tu feedback en los comentarios.
#OneAppADay #SpecDrivenDevelopment #React #Vite #TanStackQuery #JikanAPI #TailwindCSS #SDD #DeveloperJourney #CleanCode #WebDevelopment #Frontend
¡Hola comunidad! 👋 Como parte de mi reto #OneAppADay, hoy les presento Manga Blog, mi tercera aplicación, donde implementé Spec-Driven Development (SDD) para construir una experiencia moderna de descubrimiento y gestión de mangas y animes.
📱 Sobre Manga Blog
Una aplicación web moderna que permite a los usuarios descubrir, explorar y gestionar su colección de mangas y animes en tiempo real. Integra datos de la API pública Jikan, ofreciendo una experiencia fluida con búsquedas, filtros avanzados y gestión local de favoritos.
Core features:
- Exploración de catálogo de mangas y animes
- Búsqueda y filtrado en tiempo real
- Interfaz responsive y moderna
- Datos frescos desde API Jikan
⚙️ Tech Stack
- React - UI Component Framework
- Vite - Build Tool & Dev Server
- TanStack Query - Data Fetching & Caching
- Tailwind CSS - Styling Utilities
- Jikan API - Manga/Anime Data
- LocalStorage - Gestión Estado Local
🎯 La Técnica: Spec-Driven Development
¿Qué es SDD? Un enfoque donde defines especificaciones claras antes de escribir código. En lugar de codear directamente, creé primero un documento detallado sobre qué quería construir.
Cómo lo implementé:
1. Claude para spec inicial: Generé una descripción detallada de la app + stack elegido usando IA. Esto ahorró horas de planeación manual.
2. Context Skill: Agregué archivos de contexto para mantener consistencia en decisiones arquitectónicas.
3. V0 (Vercel) para template: Descargué una plantilla visual inicial, asegurando consistencia de diseño desde el inicio.
4. Design System extraction: Extraje el design system de la plantilla (sin shadcn por preferencia personal).
5. Propose Skill por módulos: Generé cada página paso a paso, asegurando calidad incremental.
6. API Integration: Finalmente integré Jikan API para datos reales, no estáticos.
Por qué SDD aquí? Porque me permitió trabajar de forma ordenada sin idas y venidas. Tenía clara la visión antes de escribir JSX.
📚 Aprendizajes Clave
✅ Qué funcionó bien
Usar Claude para generar el contexto inicial ahorro MUCHO tiempo de revisión manual. Las especificaciones claras desde el inicio eliminaron refactors innecesarios.
⚠️ Desafío importante
Mantener sincronía entre el design system generado y la implementación real requirió ajustes iterativos, especialmente al rechazar librerías predefinidas como shadcn.
🔮 La lección
Crear plantillas iniciales es mucho más rápido y consistente que hacerlo manual. Iniciar por la parte visual (UI/UX) y luego los datos es el flujo correcto.
💡 Bonus insight
Construir página por página, en lugar de todo de una vez, aseguró mayor calidad y menor deuda técnica acumulada.
🔗 Links
📂 Repositorio: https://github.com/Jodev97/OnedayOneapp/tree/master/03-blog-manga
❓ ¿Qué opinas del SDD? ¿Aplicas especificaciones antes de código o prefieres un enfoque más iterativo? Déjame tu feedback en los comentarios.
#OneAppADay #SpecDrivenDevelopment #React #Vite #TanStackQuery #JikanAPI #TailwindCSS #SDD #DeveloperJourney #CleanCode #WebDevelopment #Frontend
