Full-stack web app · Next.js 16
One burger order, five live screens.
A complete ordering system for a smash-burger shack. Customers order for pickup or in-house delivery, while the kitchen, dispatch, drivers and an admin each get their own screen, all updating live. Built from wireframes, with payments mocked so nothing is ever charged.
WebGL · move your cursor
0
Seeded menu items
0
Role-based areas
0 s
Live update poll
0
Real charges made
// highlights
Whatmakesittick
One place prices an order
A single module serves both the live checkout quote and order placement, and nothing the client sends, cart prices included, is trusted. Orders are written in one synchronous transaction with a conditional stock decrement, and a repeated idempotency key returns the original order.
A real state machine
Legal order steps are defined once and enforced by a transition function that composes into larger transactions, like sending a whole delivery run out at once. Every staff move carries the status the screen showed, so a stale click can't apply twice.
Live kitchen display
Tickets with due-time timers, station filters, recall, "86 an item" and hotkeys. Updates arrive over server-sent events that poll the database once a second, so changes from any tab or script show up.
Dispatch and driver screens
Dispatch hands over pickups and groups packed deliveries into a driver's run. The driver view is phone-first, with the address, notes, a call link and the cash to collect.
Settings are data
Tax, delivery fee, minimum, zone, opening hours and the pause switch live in the database, and each order stores the tax rate it was charged, so changing the rate never rewrites old receipts.
Hardened auth
Database-backed sessions with a random 256-bit token in an httpOnly cookie (only its SHA-256 is stored), scrypt password hashes, per-email login throttling and same-site-only redirects. Every page, action and stream re-checks the role itself.
// architecture
Howit'sbuilt
- 01Next.js 16 App RouterStorefront · staff shell · admin
- 02Server logicPricing · state machine · SSE streams
- 03SQLite + Drizzlebetter-sqlite3 · migrations · seed data
step 01
Browse
A DB-backed menu with a filters drawer, search and item customisation: options, add-ons and notes.
step 02
Check out
Pickup or delivery, scheduled slots, promo codes, tip and loyalty points, with a server-priced live quote.
step 03
Cook
The order lands on the kitchen display as a ticket with a due-time timer.
step 04
Dispatch
Packed deliveries are grouped into a driver's run and sent out together.
step 05
Track
The customer watches a live tracker and downloads a PDF invoice in the site's theme.
// under the hood
Thedetails
git clone https://github.com/VelvetGradient-26/BurgerShack.git cd BurgerShack cp .env.example .env # set ADMIN_EMAIL and ADMIN_PASSWORD (12+ chars) docker compose up -d --build # http://localhost:3000
What's in it
| Area | Routes | Highlights |
|---|---|---|
| Storefront | /, /menu | Animated landing page, filters, live cart |
| Ordering | /checkout, /orders/[id] | Scheduled slots, promo codes, PDF invoice |
| Kitchen | /staff/kds | Due-time timers, station filter, 86 an item |
| Driver | /staff/driver | Phone-first run, call link, cash to collect |
| Admin | /admin/* | Inventory, options, settings, team logins |
Limits and testing
- ◆Payments are mocked: the card form is a demo and nothing is charged, so it isn't yet a shop that takes real money.
- ◆SQLite means one instance only. There is no password reset or email yet.
- ◆Tested with unit tests against in-memory SQLite, Playwright flows across separate customer, kitchen, driver and admin sessions, and an axe-core accessibility scan at desktop and phone widths in both themes.
// stack
Builtwith
- Next.js 16
- TypeScript
- Tailwind v4
- SQLite
- Drizzle ORM
- better-sqlite3
- pdf-lib
- Vitest
- Playwright
- Docker