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.
Tipo: Demo técnico | Plataforma: Hubspot Content Hub | Año: 2025 | Stack: HubL + HubDB
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
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.
Frontend Development
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.
Optimización & Performance
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.
Herramientas de Desarrollo
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.