Before
A PDF menu, a phone number for reservations and a delivery app taking around 20–30% of every order.
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.
Live demo
Click through the working build — every form, filter and calculator runs in your browser.
Guide: Restaurant Websites with Online Ordering: Your Own System or Delivery Apps?
Industry
Hospitality
Services
Website & Software Development
Delivery record
Showcase build · live demo
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.
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
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.
Visual evidence
Delivery timeline
Phase 1
Phase 1: Art direction, menu structure and photography
Phase 2
Phase 2: Menu filters, cart and tax logic, reservations and gift cards
Phase 3
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.