Lumen
Demo de e-commerce en español con tienda, checkout y panel administrativo, construida sobre una arquitectura frontend lista para evolucionar.
- Año
- 2025
- Rol
- Definición de producto, arquitectura frontend y modelado del dominio comercial.
- Equipo
- 1 desarrollador
- Timeline
- Proyecto personal
Galeria del proyecto
Funcionalidades
Tienda pública
Tienda pública con home, categorías, novedades, ofertas y detalle de producto
Carrito y checkout
Carrito, checkout y confirmación final con estado persistente en el navegador
Panel administrativo
Panel administrativo local para gestionar productos, descuentos, ventas, configuración y credenciales demo
Arquitectura evolutiva
Arquitectura preparada para migrar desde persistencia local hacia servicios remotos
Tecnologias utilizadas
Next.js 16
React 19
TypeScript
Tailwind CSSArquitectura y dominio
Vistas que condensan la arquitectura, el modelo de datos y la organizacion interna del proyecto.
Arquitectura general
La aplicación sigue una arquitectura por capas que separa la interfaz, los módulos de dominio y la persistencia local. Las pantallas no dependen directamente de IndexedDB, sino de una capa de acceso a datos inspirada en el Repository Pattern, lo que desacopla la UI del almacenamiento y facilita evolucionar el proyecto hacia una API real en el futuro.
Modelo de datos y persistencia local
El sistema modela las entidades principales del dominio comercial, como productos, categorías, carrito, órdenes y configuración administrativa, distribuyéndolas entre IndexedDB, sessionStorage y localStorage según su propósito.
IndexedDB se usa para datos estructurados y persistentes, sessionStorage para información temporal de la sesión y localStorage para preferencias o configuraciones simples. Esta separación mantiene la persistencia local organizada y facilita una futura evolución hacia una API real.
Estructura del proyecto
La estructura del proyecto está organizada por responsabilidades para mantener una separación clara entre la navegación, la interfaz, la lógica de negocio y la persistencia local.
Las rutas agrupan las pantallas principales de la tienda, el checkout y el panel administrativo. Los componentes reutilizables concentran piezas comunes de la interfaz, mientras que los módulos de negocio contienen la lógica asociada a productos, categorías, carrito, órdenes y configuración comercial.
Además, el proyecto incluye datos seed para inicializar el entorno de demostración y una capa de almacenamiento encargada de centralizar el acceso a IndexedDB, sessionStorage y localStorage, evitando que las pantallas dependan directamente de los mecanismos de persistencia del navegador.
Conclusiones y resultados
Caso de estudio sólido para mostrar criterio de producto, arquitectura frontend y modelado del negocio
Base reutilizable para futuras demos con backend real o sincronización remota
Experiencia end to end que comunica alcance técnico más allá de la interfaz