Ember & Oak

Overview

Ember & Oak is a demo restaurant platform: a warm, photographic public site with a browsable menu, cart and checkout, a customer-facing order tracker, and an admin dashboard where the restaurant manages the menu and works through incoming orders.

Challenge

A restaurant site has to do two jobs at once — sell the atmosphere and take an order without friction — and the owner needs to see and act on those orders. The challenge was building both halves so they stay in sync, with no payment or database accounts needed to try it.

Approach

The menu, orders and settings live in shared persisted stores that drive both the public pages and the admin, so a dish edited in the dashboard changes the site and an order placed on the site appears in the dashboard queue. Payments are simulated and labelled as such, and a demo bar offers a one-click full reset.

Design

Dark, photographic hero over a warm off-white page, a serif display face for the brand voice, and a single ember-orange accent reserved for primary actions. Subtle scroll reveals and hover lift keep it feeling alive without getting in the way of ordering.

Development

Next.js 16 App Router with TypeScript, Tailwind CSS v4 and shadcn/ui, validated with zod and covered by 56 Vitest tests. Order tracking reads its state from the URL through a History-API hook, and the app is built so nothing impure runs during render.

Responsive Experience

Audited at mobile, tablet and desktop widths for overflow, clipped text and tap-target size, with accessibility checks on the ordering flow.

Final Result

Live at restaurant-platform-six-eta.vercel.app as a portfolio demo. The restaurant, menu and orders are fictional and the data stays in the visitor’s own browser.

Key Features

• Menu with categories, cart and simulated checkout
• Customer order tracking page
• Admin dashboard to manage menu items and move orders through their stages
• Toasts, 404 and error pages, and image fallbacks throughout
• One-click demo reset and clear “simulated” labelling