En esta página
El Chipil Menu es una aplicación web de menú digital para ElChipil, un concepto ficticio de restaurante gourmet mexicano. El sitio está diseñado como una experiencia mobile-first: los clientes exploran platillos y bebidas con fotos, precios en MXN, niveles de picante y filtros por categoría — sin necesidad de una app nativa ni menú impreso.
Qué hace
La app es una aplicación React de una sola página con tres vistas principales:
- Home — Landing con la marca ElChipil, imagen de fondo tropical y puntos de entrada a los menús de comida y bebida.
- Platillos — 28 platillos gourmet mexicanos organizados por categoría (Entradas, Tacos Gourmet, Platos Fuertes, Especialidades, Postres), cada uno con foto, descripción, precio e indicador de picante 🌶️ (0–3).
- Bebidas — Cócteles, cervezas, vinos, destilados y aguas frescas sin alcohol, con badges para ítems alcohólicos y no alcohólicos.
La navegación usa un header fijo en las páginas de menú con cambio rápido entre platillos y bebidas, control para regresar al inicio y un botón flotante de «regresar arriba». En escritorio, un banner desplegable recuerda a los visitantes que la experiencia está optimizada para móvil.
Stack tecnológico
| Capa | Elección |
|---|---|
| Framework | React 18 + TypeScript |
| Build tool | Vite |
| Estilos | Tailwind CSS + shadcn/ui (primitivos Radix) |
| Íconos | Lucide React |
| Datos | Arreglos estáticos en TypeScript en src/data/menu.ts |
| Assets | ~50 imágenes de productos en public/images/ |
Los datos del menú están completamente tipados con interfaces Platillo y Bebida — cada ítem incluye id, nombre, descripcion, precio, categoria, imagen y flags opcionales picante o alcoholica. Las categorías se filtran del lado del cliente con estado de React, así que cambiar de pestaña es instantáneo sin llamadas a API.
Proceso de desarrollo
El Chipil Menu es una SPA estática de Vite + React — los datos del menú viven en TypeScript, las imágenes en public/images/, y el sitio se despliega en cualquier host estático con la ruta base configurada correctamente.
Scaffold de la aplicación
- Bootstrap con Vite React TypeScript y Tailwind CSS.
- Primitivos de shadcn/ui sobre Radix UI para botones y layout accesibles.
- Modelo de tres páginas en
App.tsx: Inicio, Platillos y Bebidas. - Componentes centrales —
MenuCard,HomePage,Navigation,PlatillosPage,BebidasPage— y menú completo tipado ensrc/data/menu.tscon rutas de imagen placeholder. - Tema oscuro zinc/dorado y encabezados en Playfair Display para la marca del restaurante.
Configuración de deploy estático
- Ajuste de
basede Vite y salida de build para que deep links y URLs de assets resuelvan en hosting estático (deploys estilo GitLab Pages). - Verificación de que las rutas de producción coinciden con cómo el host sirve la carpeta
dist/— ver guía de deploy estático de Vite. - Confirmación de que el enrutamiento del cliente funciona al abrir
/platilloso/bebidasdirectamente desde un código QR.
Navegación y pulido de UX
- Logo de El Chipil en el header fijo enlazado de regreso al inicio.
- Corrección del botón flotante scroll-to-top para que aparezca en páginas largas de menú y haga scroll suave (
window.scrollToconbehavior: ‘smooth’). - Filtrado de categorías en estado de React — cambios de pestaña instantáneos sin llamadas a API.
Biblioteca de imágenes y fixes de producción
- Set completo de fotos (JPEG, WebP, AVIF) en
public/images/con rutas conectadas enmenu.ts. - Corrección de cargas rotas por discrepancias de rutas entre builds de dev y producción y por extensiones mixtas / nombres con acentos.
- Confirmación de que cada
MenuCardrenderiza su imagen en la app compilada tras el commit de parche de esa noche.
Decisiones de diseño
Mobile-first por diseño. El componente MobileOptimizedBanner detecta viewports ≥ 768px y muestra un aviso amigable de que el sitio se disfruta mejor en el teléfono — reforzando que este es un caso de uso de menú con código QR, no un folleto de escritorio.
Datos como código. Mantener el menú en TypeScript en lugar de un CMS o archivo JSON da seguridad de tipos y facilita agregar campos (como picante) sin deriva de esquema. Trade-off: actualizar el menú requiere un cambio de código y redeploy.
Jerarquía visual en las tarjetas. MenuCard usa zoom al hover en imágenes, badges de categoría, indicadores de picante superpuestos en las fotos y tipografía dorada grande para precios — para que los comensales escaneen rápido en pantalla pequeña.
Construyendo Galena AI