# Restaurant website with online ordering and reservations

Ember & Rye — a restaurant site with a filterable menu, pickup cart with Manitoba tax, table reservations and gift cards, in about 11.5 KB of gzipped code and no third-party ordering fees.

> hospitality · 2026-09-29T15:05:08.549Z

Project overview

Ember & Rye is a fictional wood-fired neighbourhood restaurant we built as a showcase for independent restaurants. Everything a guest does on a restaurant site — check tonight’s hours, browse the menu, order pickup, book a table, buy a gift card — happens on one page, with no third-party ordering platform taking a cut.

[Open the live Ember & Rye demo](/demos/ember-rye/index.html)

Client context

  - Industry: Hospitality / restaurant

  - Client size / environment: Independent restaurant — showcase build, fictional brand

  - Primary stakeholders: Owners, front of house, guests ordering from a phone

Challenge

Independent restaurants usually juggle a PDF menu, a reservation widget and a delivery app that charges commission on every order. The site had to feel like the room — warm, a little dark, food-first — while handling dietary filters, a real cart with tax, and reservations on a phone.

Scope delivered

  - Menu with category tabs and combinable vegetarian / gluten-free / dairy-free filters

  - Pickup cart: quantities, 15-minute pickup slots, GST + PST calculated correctly (gift cards untaxed), order number

  - Reservation form: party size, date, seating preference, time availability and validation

  - Gift card builder with live preview, added to the same cart

  - “Tonight” bar — live open status, kitchen close time and the daily special

  - Private dining, hours with today highlighted, self-hosted fonts and CSP-compatible build

Before / after

  - Before: A PDF menu, a phone number for reservations and a delivery app taking around 20–30% of every order.

  - After: Guests filter the menu, build a pickup order with correct tax, book a table and buy a gift card directly on the restaurant’s own site. About 11.5 KB of gzipped HTML, CSS and JavaScript.

Mobile — 390px layout and the open navigation menu
Desktop — the dining-room hero with reservation and pickup calls to action

Visual proof placeholders

  - 17 automated browser checks — filters, tabs, cart totals and tax, gift card tax exemption, pickup slots, reservation validation, mobile menu

  - No horizontal overflow at 390px; zero JavaScript errors on desktop and mobile

  - Runs under the same strict Content Security Policy as this website

Delivery timeline

  - Phase 1: Art direction, menu structure and photography

  - Phase 2: Menu filters, cart and tax logic, reservations and gift cards

  - Phase 3: Mobile pass, accessibility, automated QA and screenshots

Outcome

A restaurant site that looks like the restaurant and takes orders without commission. The cart and reservation steps are ready to connect to a POS, a payment provider or a simple kitchen notification.

Technology stack

HTML5, CSS Grid/Flexbox, vanilla JavaScript, self-hosted fonts, WebP images, Playwright automated browser QA.

Visual evidence

Menu — tabs, dietary filters and add-to-order on every dish
Reservations — party size, seating and real available times
Gift cards — amount, name and message with a live preview
Private dining — room sizes, minimums and an enquiry link
Find us — address and hours with today highlighted

---
Source page: https://amensecurity.ca/en/projects/restaurant-website-online-ordering
Markdown version for AI agents · Amen Security
Email: info@amensecurity.ca
Phone: +1 (204) 514-3536