YamzWay Digital Menu and WhatsApp Ordering

Overview

YamzWay is a mobile-first web menu for a home-based Lebanese sandwich business (appetizers, subs, a "Build It Your Way" custom sub builder, and beverages). All menu content, including item names, descriptions, prices, and ingredient lists, lives in menu.json, so the entire catalog can change without touching HTML, CSS, or JS. The app lets a customer browse the menu, build a custom sub from grouped ingredient options, adjust quantities and ingredients inline, and check out through an overlay that collects name, phone, and delivery address before sending the full order as a pre-formatted WhatsApp message.

Approach

The site is a static, framework-free build: index.html provides structure, sections, and metadata (including Open Graph and Twitter card tags for link previews), styles.css handles a mobile-first green and yellow brand theme with animated nav and cart transitions, and app.js owns all behavior. The menu is fetched at runtime from menu.json and rendered into category cards; the "build-your-way" category is treated specially and rendered as an interactive chip-based builder (vegetables, cheeses, meats, sauces, priced protein add-ons) with a live running total. Cart state is kept in memory as an array of entries (item id, price, quantity, default ingredients, removed ingredients, and priced extras). A floating cart bar opens a full-screen checkout overlay where customers can adjust quantities, remove default ingredients, add more toppings to a custom sub, and leave a note per item. On submit, the app validates the customer/address fields, assembles an emoji-sectioned order summary, URL-encodes it, and opens the WhatsApp click-to-chat link with the message pre-filled so the order is sent directly to the shop's WhatsApp number.

Tech stack

• Vanilla HTML, CSS, and JavaScript (no framework, no build step, no bundler)
• menu.json as the single source of truth for categories, items, prices, and build-your-own ingredient options
• Google Fonts (Fraunces for display type, Inter for body text)
• WhatsApp click-to-chat API as the order submission channel
• Python http.server (serve.py) as a local dev server with custom content-type and cache-control headers

Engineering highlights

• Fully data-driven menu rendering: category cards, item rows, and the interactive sub builder are built purely from menu.json, so menu changes require no code edits.
• Custom sub builder with toggleable chips grouped by ingredient type, a live ingredient count and running total, and a clear split between free toppings and priced add-ons.
• Per-item customization in the cart: default ingredients can be toggled off, and custom subs support adding more toppings after the initial build.
• Order-summary generation assembles a structured, emoji-sectioned WhatsApp message (customer info, delivery address, itemized order with kept/removed ingredients and per-item notes, grand total) entirely client-side, with no backend or payment processor involved.
• Consistent HTML-escaping helper applied to all menu and user-entered data before it is interpolated into the DOM, reducing injection risk from cart notes or menu content.
• Accessible mobile navigation: hamburger toggle with aria-expanded/aria-hidden state management, focus handling on open/close, an IntersectionObserver-based scroll spy for active section highlighting, and a prefers-reduced-motion override.
• serve.py explicitly sets UTF-8 for JS/CSS/HTML and disables browser caching, addressing two common local-dev pitfalls: mojibake emoji and stale JavaScript after edits.