Restaurant Website & Online Ordering Demo

Overview

Most restaurant websites are an afterthought — a PDF menu embedded in a WordPress site that hasn’t been touched in three years. They don’t rank, they don’t convert, and they send potential guests somewhere else.

Ember & Grain is a demo built to show what the alternative looks like: a fast, visually polished restaurant site with real features — online ordering, reservations, a structured menu, and a gallery — all driven by content collections so any staff member can update the menu without touching code.

What Was Built

Online ordering with cart and checkout simulation. Guests can browse the menu, add items to a persistent cart (stored in localStorage), and complete a simulated checkout flow — method selection, contact details, payment fields, a processing state, and an order confirmation. React islands handle interactivity; the surrounding page is static HTML.

Reservation system. A dedicated reservations page with a date/time/party-size form, wired up to submit and display a confirmation — structured the same way a live booking integration would slot in.

Content-collection-driven menu. Every menu item is an MDX file with structured frontmatter: name, description, price, category, dietary tags, and image. Adding or removing a dish is a file change, not a code change. The menu page groups items by category with a sticky navigation bar and “Add to Cart” buttons on each item.

Gallery with lightbox. A full-page photo gallery with category filtering and a lightbox modal — no third-party dependencies.

Config-driven identity. All business information — name, address, phone, hours, social links — lives in a single client.config.ts file. Deploying this for a real restaurant client is a configuration change, not a rebuild.

Technical Approach

Astro handles the static shell — fast, SEO-ready, zero JavaScript for content pages. React islands are scoped to the parts that need interactivity: the cart button, checkout flow, and gallery filter. State is coordinated between islands via CustomEvents and localStorage, avoiding any global state management dependency.

Plain CSS with custom properties keeps the design system coherent without a framework. The warm green-and-gold palette is intentionally distinct from the woodworking demo — both built on the same Astro foundation, visually unrelated.

Outcomes

• Live at ember.hpnstudio.com — actively used for outreach to food & beverage businesses
• Full ordering flow — cart, checkout, confirmation — without a payment processor dependency
• Menu updatable by non-developers — MDX frontmatter, no code changes required
• New client version deployable in under an hour — configuration swap only
• Lighthouse Performance 95+ across all pages