Skip to content
laboratorio
Public template

About

Scaffold - Template Repository

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository
BranchesTags
 
 

Latest commit

 

History

23 Commits

Folders and files

Repository files navigation

🍔 NextCollege - MasterGeniusjoa | Galaxy Burgers

Scaffold Profesional y Template Repository diseñado para webinars, masterclasses y entornos de producción. Integra un ecosistema full-stack unificado con Landing E-commerce (Astro), PWA Móvil (React) y Panel de Administración (React), respaldado por una API REST en Node.js/Express con persistencia dual (MySQL / In-Memory) y despliegue automatizado con Docker y Dokploy.

🎄 Rediseño de Temporada: Navidad & Año Nuevo 2026 (Galaxy Burgers)

El sitio web y la experiencia digital de Galaxy Burgers han sido transformados para la Temporada Navideña y de Fin de Año 2026, vistiendo tanto la Landing E-commerce como la PWA Móvil con una estética festiva, cálida y gourmet de alta gama:

🎅 Elementos Clave del Rediseño Navideño:

  • Paleta Festiva de Temporada:
    • Verde Pino Profundo (Deep Holiday Pine): #061512 y #0A221B como base atmosférica envolvente.
    • Rojo Carmesí Navideño (Holiday Crimson): #DC2626 y #991B1B para llamados a la acción, cintas y gorros festivos.
    • Dorado Navideño & Ámbar Festivo (Holiday Gold): #F59E0B y #FBBF24 para destellos, estrellas y acentos de lujo.
    • Verde Esmeralda (Holiday Emerald): #059669 y #10B981 en insignias de calidad y badges de frescura.
  • Tipografía Sofisticada de Navidad:
    • Inclusión de Playfair Display (Google Fonts) para títulos y firmas festivas con elegancia serif e itálica.
    • Combinada con Bebas Neue para titulares de impacto y Plus Jakarta Sans para lectura impecable.
  • Efectos y Microinteracciones Navideñas:
    • Guirnalda de Luces Navideñas: Barra superior animada con bombillas multicolores resplandecientes (.christmas-lights-bar, .holiday-bulb).
    • Nevada Dinámica en Pantalla: Copos de nieve flotantes cayendo suavemente sobre la interfaz (.snowflake).
    • Puntero del Mouse Navideño (Holiday Cursor): Puntero por defecto como estrella dorada (⭐), sobre botones e interactivos como regalo navideño (🎁), y al hacer clic activo como destello mágico (✨).
  • Hero Festivo "La Magia de la Navidad":
    • Corona con gorro de Santa Claus (🎅), regalos (🎁), campanas (🔔) y destellos luminosos.
    • Titular: SABOR CÓSMICO BANQUETE NAVIDEÑO 2026.
    • Píldora festiva: 🎄 EDICIÓN NAVIDEÑA • 🥩 100% ANGUS FESTIVO • 🎁 RECETA EXCLUSIVA • ⚡ 20 MIN CARACAS.
    • Botón de orden con degradado carmesí y dorado: ¡PEDIR BANQUETE DE NAVIDAD! 🎄🎁.
  • Ticket Cupón Navideño Perforado (-20% OFF):
    • Tarjeta con muescas laterales decorada con nieve y estrellas doradas.
    • Título: ¡El Sabor Más Exclusivo de Caracas Llega Caliente a Tu Mesa! 🎅.
    • Código de cupón oficial: NAVIDAD20 (con soporte retrocompatible para SANTA20).
  • Menú Festivo de Bestsellers:
    • Burger Navideña Imperial ($6.49) • Medallón 220g Angus a la brasa con queso gouda fundido, tocineta glaseada y salsa secreta.
    • Pizza Festiva Napolitana ($9.99) • Masa madre 48h con queso mozzarella fresco, albahaca y tomates confitados.
    • Crispy Golden Chicken ($6.99) • Suprema de pollo extra crujiente con especias navideñas doradas.
    • Loaded Holiday Fries ($3.99) • Papas rústicas con salsa de cuatro quesos, tocineta crocante y ciboulette.
  • PWA Móvil Sincronizada:
    • Banner promocional navideño con canje directo del cupón NAVIDAD20 (-$3.50 OFF).
    • Cursor festivo adaptado.

Identidad de Marca y Datos de Contacto Oficiales:

  • Nombre Comercial Oficial: Galaxy Burgers
  • Slogan / Tagline: "SABOR CÓSMICO • CARACAS" (Edición Especial: "LA MAGIA DE LA NAVIDAD EN CARACAS")
  • Datos de Contacto y Ubicación Oficial:
    • 📞 Teléfono: +58 414-2899554
    • ✉️ Correo Electrónico: contacto@galaxyburgers.com
    • 📍 Ubicación: Caracas - Venezuela

🎨 Referencias Visuales y Rediseño de UI de la Landing E-commerce

La interfaz de usuario de la capa Landing E-commerce ha sido desarrollada e intensificada tomando como inspiración dos referencias visuales clave:

  1. 📍 Referencia de Estructura Base y Paleta Dark Gourmet:
    D:\NetxCollege\Laboratorio\laboratorio\imagen\7109aefe8e230e92a685dfdb89915bfb.jpg
    Proporciona la arquitectura de componentes, distribución del hero, category strip, grilla de 4 bestsellers y catálogo de creaciones de autor.

  2. 📍 Referencia de Estructura de Hero y Cuponera:
    D:\NetxCollege\Laboratorio\laboratorio\imagen\5750a1fa7a4ced11fceee22fa76fa813.jpg
    Proporciona el formato de cupón perforado con muescas laterales, badges de delivery express y promociones de temporada.

  • Favicon Oficial Galaxy Burgers (SVG Vectorial):
    • Diseño de alta fidelidad con base squircle oscura, anillo orbital galáctico con degradado, pan brioche dorado con semillas de sésamo, lechuga rizada, queso cheddar fundente y carne Angus a la parrilla con marcas de sellado.
    • Implementado de manera unificada en las 3 capas: Landing E-commerce (/favicon.svg), PWA Móvil (/app/favicon.svg e iconos PWA 192/512) y Panel de Administración (/admin/favicon.svg).

Elementos Visuales y Paleta Adoptada:

  • Paleta de Colores Dark Gourmet:
    • Fondo Principal (Background): Deep Obsidian y Dark Slate (#0B0C10, #14161E).
    • Acento Primario (Primary Amber): Ámbar dorado y naranja vibrante (#FF9F1C, #FFA200, #F59E0B).
    • Bordes y Superficies: Tarjetas oscuras con relieve sutil (#1B1E28, bordes #232733).
    • Tipografía: Títulos en mayúsculas display condensadas (Bebas Neue / Plus Jakarta Sans), combinados con acentos caligráficos fluidos (Caveat).
  • Cabecera y Navegación (100% en Español):
    • Logotipo de marca con icono de hamburguesa y nombre Galaxy Burgers.
    • Menú de navegación con estado activo resaltado (INICIO, MENÚ, OFERTAS, NOSOTROS, CONTACTO).
    • Acceso directo a las capas del sistema (PWA, Admin) y botón píldora "PEDIR EN LÍNEA 👜" con contador interactivo de ítems en tiempo real.
  • Hero Section de Alto Impacto:
    • Subtítulo en caligrafía script: "¿Antojo de algo especial?".
    • Titular principal gigante: "Deliciosas HAMBURGUESAS" con efecto tipográfico dual (blanco script + ámbar display).
    • Píldora de frescura: CALIENTE • FRESCO • SABOR CÓSMICO.
    • Llamados a la acción: Botón de orden inmediata PEDIR AHORA → y botón interactivo ▶ VER VIDEO con reproducción de preparación artesanal.
    • Sello circular de garantía gastronómica: ★★★ 100% FRESCO & PREMIUM ★★★.
    • Composición fotográfica en alta resolución sobre tabla de corte con hamburguesa artesanal, papas fritas y bebida fría.
  • Barra Flotante de Categorías (Category Strip):
    • Contenedor flotante tipo píldora blanca con 6 categorías en español con microinteracciones:
      1. 🍔 HAMBURGUESAS (Jugosas & Con Queso)
      2. 🍟 PAPAS FRITAS (Crujientes & Doradas)
      3. 🍕 PIZZAS (Calientes & Deliciosas)
      4. 🥤 BEBIDAS (Frías & Refrescantes)
      5. 🍗 POLLO (Crujiente & Especiado)
      6. 🍨 POSTRES (Delicias Dulces)
    • Filtro interactivo en cliente que actualiza y desplaza suavemente hacia el catálogo.
  • Sección "Las Más Populares & NUESTROS MÁS VENDIDOS":
    • Encabezado con tipografía script y filetes dorados simétricos.
    • Grilla de 4 tarjetas oscuras con badge circular de "MÁS VENDIDO":
      • Signature Burger ($5.49) • Cargada con abundante queso y salsa especial.
      • Cheesy Pizza ($8.49) • Vegetales frescos, hierbas italianas y queso fundido.
      • Crispy Chicken ($5.99) • Pollo frito dorado y perfectamente sazonado.
      • Loaded Fries ($2.99) • Papas crujientes con queso fundido y tocineta.
    • Botón circular naranja + para adición rápida a la orden en línea.
  • Banner Promocional de Delivery:
    • Bloque con degradado ámbar y borde segmentado: "¿CON HAMBRE? ¡Te lo Llevamos a Casa!".
    • Ilustración animada de mensajero en scooter de entrega rápida express.
    • Oferta especial: "OBTÉN 20% OFF EN TU PRIMER PEDIDO" con código de cupón WELCOME20.
  • Drawer de Carrito y Modales Interactivos:
    • Carrito de compras deslizante lateral (Cart Drawer) con cálculo de subtotal en vivo, listado de productos y botón de checkout sincronizado hacia la PWA.
    • Modal detallado de ingredientes, desglose nutricional (calorías, gramaje de carne/base, tiempo de preparación) y especificaciones técnicas.
  • Footer Corporativo Completo:
    • Resumen de marca, canales sociales (Facebook, Instagram, X, TikTok, YouTube).
    • Columnas de navegación: Enlaces Rápidos, Atención al Cliente, datos de contacto (+58 414-2899554, contacto@galaxyburgers.com, Caracas - Venezuela).
    • Insignias oficiales para descarga de app móvil (App Store y Google Play) con redirección directa a la PWA.

🏛️ Arquitectura del Proyecto: Las 3 Capas Principales

El proyecto está estructurado como un monorepositorio modular donde coexisten tres capas front-end independientes y un servidor backend centralizado:

laboratorio/
├── apps/
│   ├── ecommerce/         # Capa 1: Landing E-commerce de Alto Impacto (Astro)
│   ├── pwa/               # Capa 2: Progressive Web App Móvil de Pedidos (React + Vite)
│   └── admin/             # Capa 3: Panel de Administración & Métricas (React + Vite)
├── server/                # Backend API REST, Rutas y Persistencia (Node.js + Express)
│   ├── public/            # Artefactos estáticos compilados de las 3 capas
│   │   ├── ecommerce/     # Despachado en la ruta raíz '/'
│   │   ├── pwa/           # Despachado en la ruta '/app'
│   │   └── admin/         # Despachado en la ruta '/admin'
│   └── src/               # Código fuente del servidor (app.js, db.js, routes/api.js)
├── imagen/                # Recursos visuales y referencias de diseño
│   ├── 7109aefe8e230e92a685dfdb89915bfb.jpg   # Referencia de estructura y paleta base
│   └── 5750a1fa7a4ced11fceee22fa76fa813.jpg   # Referencia de terror Burger Chief / Noche de Brujas
├── Dockerfile             # Construcción multi-stage lista para Dokploy
└── package.json           # Orquestador de scripts globales

1️⃣ Capa 1: Landing E-commerce (apps/ecommerce)

  • Tecnología: Astro 4.x (Static Site Generation - SSG).
  • Ruta de Acceso en Servidor: / (Raíz).
  • Propósito y Capacidades:
    • Creada para maximizar la velocidad de carga (Core Web Vitals óptimos) sin sobrecargar al cliente con JavaScript innecesario.
    • Implementa la identidad visual moderna (Galaxy Burgers Dark Gourmet).
    • Catálogo completo con 10 creaciones gastronómicas maestras de autor (burgers gourmet, pollo crispy, papas con trufa, pizzas artesanales y postres).
    • Filtrado reactivo en el navegador por categorías (Hamburguesas, Pollo, Papas, Pizzas, Postres).
    • Modal interactivo para inspección de especificaciones: gramaje de carne, calorías, tiempo de cocción y listado de ingredientes.
    • Carrito de compras deslizante en memoria (Cart Drawer) con badges dinámicos y redirección fluida hacia la experiencia de compra en la PWA.
    • Sección destacada con llamado a la acción para la descarga o uso de la PWA móvil.

2️⃣ Capa 2: Progressive Web App - PWA (apps/pwa)

  • Tecnología: React 18 + Vite.
  • Ruta de Acceso en Servidor: /app (SPA con soporte de Service Worker y Fallback).
  • Propósito y Capacidades:
    • Experiencia táctil optimizada para dispositivos móviles (iOS, Android y tablets) o pantallas de escritorio.
    • PWA Instalable: Dispone de manifest.json y Service Worker (sw.js) configurados con iconos en múltiples resoluciones (192px y 512px) para añadirse directamente a la pantalla de inicio del usuario sin pasar por tiendas tradicionales.
    • Simulador de Pedidos en Vivo: Selección rápida de hamburguesas, combos y acompañamientos.
    • Cupones de Descuento: Soporte para validación de cupones promocionales (incluyendo WELCOME20).
    • Rastreador de Pedidos en Tiempo Real: Interfaz visual con estados secuenciales (Recibido → En Cocina → En Camino → Entregado).
    • Club VIP & Sistema de Puntos: Módulo de fidelización con acumulación de saldo canjeable.

3️⃣ Capa 3: Panel de Administración (apps/admin)

  • Tecnología: React 18 + Vite.
  • Ruta de Acceso en Servidor: /admin (SPA con gestión de datos y control de acceso ERP).
  • Módulo de Autenticación iDempiere ERP REST API v1:
    • Barrera de Autenticación (Auth Guard): Pantalla de inicio de sesión blindada que exige autenticación contra iDempiere ERP antes de acceder al panel de control.
    • Cumplimiento Estricto de Reglas iDempiere REST v1:
      • Ruta de Token: POST /api/v1/auth/tokens (obligatorio plural /tokens).
      • Headers: Content-Type: application/json, Accept: application/json.
      • Payload Estricto: Objeto parameters con clave obligatoria organizationId (nunca orgId): 
        {
  "userName": "admin @ gardenworld.com",
  "password": "GardenAdmin",
  "parameters": {
    "clientId": 11,
    "roleId": 102,
    "organizationId": 11,
    "warehouseId": 103,
    "language": "es_ES"
  }
}
    • Indicadores en Tiempo Real: Contexto de Organización, Rol y Cliente visible en la cabecera del panel (Org: 11, Rol: 102), junto al estado de conexión con iDempiere y botón de cierre de sesión.
    • Tolerancia a Fallos y Modo de Contingencia: En caso de indisponibilidad temporal del servidor ERP en red, el módulo entra en modo de contingencia resiliente emitiendo sesiones demo estructuradas para garantizar la continuidad operativa.
  • Propósito y Capacidades:
    • Panel de control integral para gerentes y operadores de cocina.
    • Métricas en Tiempo Real: Dashboard con recaudación diaria, tickets promedio, total de clientes registrados y estado del stock.
    • Gestión de Catálogo (CRUD): Visualización del inventario de productos, creación de nuevos platillos y eliminación de elementos en base de datos.
    • Monitoreo de Infraestructura: Consumo de /api/health para auditar la latencia, memoria del proceso, tiempo de actividad (uptime), conectividad MySQL y estado de iDempiere ERP.
    • Sincronización Bidireccional: Conexión continua con la API REST del backend con cabeceras Authorization: Bearer <token>.

⚙️ Capa Backend y Persistencia de Datos (server)

  • Tecnología: Node.js + Express 4.x.
  • Servicio de Integración iDempiere ERP (server/src/services/idempiereService.js):
    • Cliente HTTP resiliente con timeout configurado vía AbortController.
    • Integración contra IDEMPIERE_BASE_URL (predeterminado https://test.idempiere.org:443).
    • Emisión, validación y descarte de Bearer Tokens en memoria y cabeceras HTTP.
  • Persistencia Dual Inteligente (server/src/db.js):
    1. Modo Producción con MySQL: Conexión mediante mysql2/promise con soporte para variables de entorno (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME, DB_PORT).
    2. Modo Seguro con Mock In-Memory: Si no se configuran credenciales de base de datos o el contenedor MySQL se encuentra inaccesible, el sistema activa automáticamente un fallback en memoria con el catálogo predeterminado de hamburguesas y clientes, garantizando alta disponibilidad sin caídas de servicio.
  • Endpoints de la API REST (/api/*):
    • POST /api/auth/idempiere-login: Autenticación y obtención de tokens cumpliendo la especificación /api/v1/auth/tokens de iDempiere.
    • GET /api/auth/idempiere-status: Chequeo de latencia y disponibilidad de iDempiere ERP.
    • GET /api/auth/verify: Verificación de tokens Bearer activos.
    • POST /api/auth/logout: Cierre y descarte de sesión.
    • GET /api/health: Estado de salud, uptime, versión, MySQL e iDempiere (ideal para Dokploy y Kubernetes).
    • GET /api/products: Catálogo completo de platillos.
    • POST /api/products: Creación de nuevo producto con especificaciones de precio y categoría.
    • DELETE /api/products/:id: Eliminación de un producto existente.
    • GET /api/customers: Listado de clientes frecuentes y métricas de consumo.
    • GET /api/metrics: Consolidado de métricas operativas y estadísticas de ventas.
    • POST /api/reset: Restablecimiento de fábrica del catálogo inicial.

🚀 Guía de Instalación y Ejecución

Prerrequisitos

  • Node.js v18.0.0 o superior.
  • npm v9.0.0 o superior.

1. Instalación de Dependencias

Instala todas las dependencias en cascada (raíz, ecommerce, pwa, admin y server):

npm run install:all

2. Compilación de Artefactos (Build)

Puedes compilar cada capa individualmente o ejecutar la sincronización global:

# Compilar solo la Landing E-commerce (Astro)
npm run build:ecommerce

# Compilar solo la PWA Móvil (React)
npm run build:pwa

# Compilar solo el Panel Admin (React)
npm run build:admin

# Compilación completa y sincronización en server/public
npm run build:all

3. Ejecución del Servidor

Inicia el servidor Node.js unificado:

npm start

El servidor quedará disponible en:

🐳 Despliegue con Docker y Dokploy

El proyecto incluye un Dockerfile multi-stage optimizado que:

  1. Construye las 3 aplicaciones estáticas (ecommerce, pwa, admin).
  2. Sincroniza los artefactos generados en server/public.
  3. Instala las dependencias del servidor backend en una imagen Node.js Alpine ligera.
  4. Expone el puerto 3000 y define el Healthcheck para orquestadores Dokploy / Coolify / Portainer.

Para desplegar localmente con Docker:

docker build -t nextcollege-masterclass .
docker run -p 3000:3000 -d nextcollege-masterclass

📄 Licencia

Este proyecto está bajo la Licencia MIT. Desarrollado para la serie formativa NextCollege - MasterGeniusjoa.

About

Scaffold - Template Repository

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages