Building El Chipil Menu

El Chipil Menu is a digital menu web app for ElChipil, a fictional gourmet Mexican restaurant concept. The site is designed as a mobile-first experience: customers browse dishes and drinks with photos, prices in MXN, spice levels, and category filters — without needing a native app or printed menu.

What it does

The app is a single-page React application with three main views:

• Home — Hero landing with the ElChipil brand, tropical background imagery, and entry points into the food and drink menus.
• Platillos — 28 gourmet Mexican dishes organized by category (Entradas, Tacos Gourmet, Platos Fuertes, Especialidades, Postres), each with a photo, description, price, and a 🌶️ spice-level indicator (0–3).
• Bebidas — Cocktails, beers, wines, spirits, and non-alcoholic aguas frescas, with badges for alcoholic vs. non-alcoholic items.

Navigation uses a sticky header on menu pages with quick switching between platillos and bebidas, a back-to-home control, and a floating “regresar arriba” button. On desktop, a dismissible banner reminds visitors the experience is optimized for mobile.

Tech stack

Menu data is fully typed with Platillo and Bebida interfaces — each item carries id, nombre, descripcion, precio, categoria, imagen, and optional picante or alcoholica flags. Categories are filtered client-side with React state, so switching tabs is instant with no API calls.

Development process

Initial scaffold

The first commit laid out the full application skeleton: Vite + React + TypeScript, Tailwind and shadcn/ui components, the three-page routing model in App.tsx, and the complete menu dataset with placeholder image paths. Core UI pieces — MenuCard, HomePage, Navigation, PlatillosPage, and BebidasPage — were all in place from day one, along with the dark zinc/gold visual identity and Playfair Display typography for headings.

Deploy fix attempt

The second commit focused on getting the app deployable. Static hosting for SPAs often breaks on deep links and asset paths; this commit adjusted the Vite/build configuration and project structure so the built site could be served correctly from a static host (likely GitLab Pages or similar).

Logo and scroll-to-top fixes

Navigation polish: the ElChipil logo in the sticky header became clickable to return home, and the floating scroll-to-top button behavior was corrected so it reliably appears on long menu pages and scrolls smoothly back to the top.

Product images loaded

The largest content commit added the full image library — dozens of dish and drink photos (JPEG, WebP, AVIF) into public/images/, with paths wired in menu.ts so every menu item has a matching visual.

Image loading bug fix

A follow-up the same evening fixed broken image loads — likely path mismatches between dev and production builds, or casing issues in filenames (several images use mixed extensions and accented characters). After this commit, all product cards render their photos correctly in the built app.

Design decisions

Mobile-first by intent. The MobileOptimizedBanner component detects viewports ≥ 768px and shows a friendly notice that the site is best experienced on a phone — reinforcing that this is a QR-code-menu use case, not a desktop brochure.

Data as code. Keeping the menu in TypeScript rather than a CMS or JSON file gives type safety and makes it easy to add fields (like picante) without schema drift. Trade-off: updating the menu requires a code change and redeploy.

Visual hierarchy on cards. MenuCard uses a hover zoom on images, category badges, spice indicators overlaid on photos, and large gold price typography — so diners can scan quickly on a small screen.