Construyendo El Chipil Menu

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

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

Scaffold inicial

El primer commit estableció el esqueleto completo de la aplicación: Vite + React + TypeScript, componentes de Tailwind y shadcn/ui, el modelo de enrutamiento de tres páginas en App.tsx y el dataset completo del menú con rutas de imagen placeholder. Las piezas centrales de UI — MenuCard, HomePage, Navigation, PlatillosPage y BebidasPage — estuvieron listas desde el primer día, junto con la identidad visual oscura zinc/dorado y la tipografía Playfair Display para los encabezados.

Intento de fix de deploy

El segundo commit se enfocó en hacer la app desplegable. El hosting estático para SPAs suele fallar en deep links y rutas de assets; este commit ajustó la configuración de Vite/build y la estructura del proyecto para que el sitio compilado pudiera servirse correctamente desde un host estático (probablemente GitLab Pages o similar).

Fixes de logo y scroll-to-top

Pulido de navegación: el logo de ElChipil en el header fijo se volvió clicable para regresar al inicio, y se corrigió el comportamiento del botón flotante de scroll-to-top para que aparezca de forma confiable en páginas largas de menú y haga scroll suave de regreso arriba.

Imágenes de productos cargadas

El commit de contenido más grande agregó la biblioteca completa de imágenes — decenas de fotos de platillos y bebidas (JPEG, WebP, AVIF) en public/images/, con rutas conectadas en menu.ts para que cada ítem del menú tenga su visual correspondiente.

Fix de carga de imágenes

Un seguimiento esa misma noche corrigió cargas de imagen rotas — probablemente discrepancias de rutas entre builds de desarrollo y producción, o problemas de mayúsculas/minúsculas en nombres de archivo (varias imágenes usan extensiones mixtas y caracteres acentuados). Después de este commit, todas las tarjetas de producto renderizan sus fotos correctamente en la app compilada.

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.