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

El Chipil Menu is a static Vite + React SPA — menu data lives in TypeScript, images in public/images/, and the site deploys to any static host with the base path configured correctly.

Application scaffold

• Bootstrapped with Vite React TypeScript and Tailwind CSS.
• Added shadcn/ui primitives on top of Radix UI for accessible buttons and layout.
• Defined the three-page model in App.tsx: Home, Platillos, and Bebidas.
• Built core components — MenuCard, HomePage, Navigation, PlatillosPage, BebidasPage — and typed the full menu in src/data/menu.ts with placeholder image paths.
• Applied the dark zinc/gold theme and Playfair Display headings for the restaurant brand.

Static deploy configuration

• Adjusted Vite base and build output so deep links and asset URLs resolve on static hosting (GitLab Pages–style deploys).
• Verified production build paths match how the host serves the dist/ folder — see Vite static deploy guide.
• Confirmed client-side routing works when users open /platillos or /bebidas directly from a QR code.

Navigation and UX polish

• Made the El Chipil logo in the sticky header link back to home.
• Fixed the floating scroll-to-top button so it appears on long menu pages and scrolls smoothly (window.scrollTo with behavior: ‘smooth’).
• Kept category filtering in React state — tab switches are instant with no API calls.

Image library and production fixes

• Added the full photo set (JPEG, WebP, AVIF) under public/images/ and wired paths in menu.ts.
• Fixed broken loads caused by path mismatches between dev and production builds and by mixed file extensions / accented filenames.
• Confirmed every MenuCard renders its image in the built app after the evening patch commit.

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.