--- title: Catálogo Yumehon Manga - Proyecto HubDB | carlosguisan description: Sistema de catálogo e-commerce con HubDB. Búsqueda de títulos, filtros por géneros, 30+ productos. Demo interactivo de HubSpot Content Hub por carlosguisan. --- [Skip to content](https://www.carlosguisan.dev/proyectos/yumehon#main-content) [![logo-horizontal-blanco](https://www.carlosguisan.dev/hs-fs/hubfs/logo-horizontal-blanco.png?width=709&height=180&name=logo-horizontal-blanco.png "logo-horizontal-blanco")](https://www.carlosguisan.dev/?hsLang=es) - [Sobre mí](https://www.carlosguisan.dev/#sobre-mi) - [Proyectos](https://www.carlosguisan.dev/#proyectos) - [Servicios](https://www.carlosguisan.dev/servicios) - [GreenSpot](https://www.carlosguisan.dev/greenspot) - [Sobre mí](https://www.carlosguisan.dev/#sobre-mi) - [Proyectos](https://www.carlosguisan.dev/#proyectos) - [Servicios](https://www.carlosguisan.dev/servicios) - [GreenSpot](https://www.carlosguisan.dev/greenspot) [Contacto](https://www.carlosguisan.dev/?hsLang=es#contacto) [Follow us on LinkedIn](https://www.linkedin.com/in/carlosguisan/) [Wordpress profile](https://profiles.wordpress.org/carlosguisan/) Menu Home > Proyectos > Yumehon # Yumehon Manga & Comics Sistema de catálogo dinámico escalable con búsqueda de títulos y filtros por género, construido con HubSpot Content Hub. [Ver demo en vivo](https://demo1.carlosguisan.dev/) Tipo: Demo técnico | Plataforma: Hubspot Content Hub | Año: 2025 | Stack: HubL + HubDB ![demo-yumehon](https://www.carlosguisan.dev/hubfs/demos/demo-yumehon.png "demo-yumehon") ## El desafío *Demostrar las capacidades de HubDB para crear catálogos dinámicos escalables sin necesidad de código backend complejo.* El sistema debía permitir gestionar un inventario completo de productos (mangas y cómics) con las siguientes características: - **Búsqueda de títulos** por su nombre - **Filtro** de títulos según su género. - **Actualización de contenido** desde interfaz visual sin tocar código - **Arquitectura escalable** que funcione igual con 30 o 5,000+ productos   ### Requisitos técnicos - **Búsqueda de títulos:** Los usuarios deben poder buscar por el título deseado. - **Filtros de productos:** Sistema de filtros que permita seleccionar el género de su interés (Shonen, Seinen, Isekai, etc). - **Gestión Sin Código:** El contenido debe ser actualizable desde una interfaz visual (HubDB) sin necesidad de redesplegar o modificar código. - **Performance Optimizado:** Tiempo de respuesta menor a 300ms en búsquedas y filtros, incluso con cientos de productos. - **Escalabilidad:** Arquitectura que funcione igual de bien con 30 productos que con 5,000+, sin cambios en el código. - **Experiencia Mobile-First:** Interfaz completamente responsive con controles touch-optimized para dispositivos móviles. Restricción adicional: Todo debía implementarse usando únicamente las herramientas nativas de HubSpot Content Hub, sin plugins externos ni servicios de terceros.   ## Solución técnica Implementé una arquitectura optimizada que combina un tema del marketplace optimizado para ecommerce, su personalización mediante un tema secundario, la potencia de HubDB como base de datos y la funcionalidad de páginas dinámicas de Hubspot Content Hub. ### HubDB como Motor de Datos Estructura de tabla optimizada con columnas para título, autor, género (select), imagen y descripción. Se creó una tabla auxiliar de géneros para facilitar la inclusión de nuevos géneros por parte de usuarios no técnicos. **Ventajas:** - Sin necesidad de backend tradicional - Interfaz visual para gestión de contenido - Cambios reflejados instantáneamente - Versionado automático de datos ### Actualización sin deployment Todo el contenido es editable directamente desde HubDB. Agregar nuevos productos, actualizar stock o modificar descripciones no requiere tocar código ni redesplegar. Marketing tiene autonomía completa. **Flujo de trabajo:** - Editar en HubDB → Guardar → Live automáticamente - Preview de cambios antes de publicar - Rollback a versiones anteriores - No requiere conocimientos técnicos ### Tema de marketplace + personalización Se generó un tema secundario basado en un tema del marketplace, para la personalización del proyecto, generación de módulos y plantillas auxiliares necesarias para el correcto funcionamiento del catálogo. ## Stack Tecnológico Tecnologías y herramientas utilizadas en el desarrollo e implementación del catálogo. Plataforma & Base de Datos Frontend Development Optimización & Performance Herramientas de Desarrollo *HubSpot CMS Hub* Plataforma de hosting y CMS. Aprovecha CDN global de HubSpot  para performance óptimo en cualquier región. *HubDB* Base de datos relacional nativa de HubSpot. Almacena 30+  productos con metadata completa (título, autor, género, imágenes). *HubSpot File Manager* Gestión de assets (imágenes de portadas) con CDN integrado y optimización automática. *HubL (HubSpot Markup Language)* Template engine para renderizado server-side. Queries a HubDB, loops de productos, condicionales para estados. *CSS3 + CSS Grid* Layout responsive con CSS Grid. Animaciones y transiciones suaves. *Lazy Loading* Imágenes de productos cargan solo cuando son visibles en viewport. Atributo `loading="lazy"` nativo. *CSS Minification* HubSpot minifica y optimiza CSS automáticamente en producción. *HubSpot Design Manager* IDE en navegador para desarrollo de templates y módulos. Preview en tiempo real. Generación de módulos auxiliares y temas secundarios. *Cursor + HubSpot CLI* Desarrollo local con sync automático. ## Galería del proyecto × © 2026 | Construido en Hubspot | Tema Showcase de Stephanie O'Gay Garcia De Sarapiquí, Costa Rica 🦜| Local roots, global quality. Ícono de la lapa verde usada en el branding, es obra de Kevin from [Noun Project](https://thenounproject.com/browse/icons/term/macaw/) (CC BY 3.0)