BUILD #003LIVE

Digital Menu

A QR menu that loads instantly and can be updated from a phone in seconds.

Status: LIVE
Date: May 2026
Stack: Next.js / Tailwind / Cloudflare / SQLite

RESTAURANTWEBQR

The problem

Most QR menus are a PDF. They open slowly, they pinch-zoom badly, and changing one price means sending the file back to whoever designed it. Meanwhile the restaurant reprints the QR sticker every season for no reason.

The idea

Treat the menu as a product, not a document. A real web page that loads in under a second on restaurant wifi, works on any phone, and has an editor the owner can use from behind the bar.

Building it

How it came together, step by step.

01 / 04

Performance budget first

A hard limit was set before any design work: under 50KB of JavaScript and a first paint under one second on a throttled 3G connection. Every decision after that was measured against it.

Terminal

zsh — restaurant

~/builds/restaurant $ php artisan test --filter=OrderTotals

PASS Tests\Unit\OrderTotalsTest

✓ sums line items without float drift

✓ applies reduced tax rate to takeaway

✓ splits a bill four ways to the cent

✓ reopens a closed ticket and re-emits the event

Tests: 4 passed (11 assertions)

Duration: 0.42s

~/builds/restaurant $ npm run build && deploy

▲ compiled successfully in 3.1s

→ 42.1 KB first load JS

✓ deployed · day 14 of building in public

~/builds/restaurant $

02 / 04

Designing for one thumb

Sticky category tabs, large photography, prices that stay readable in sunlight. Nobody pinches to zoom.

Mobile

03 / 04

An editor for behind the bar

Change a price, mark a dish sold out, reorder categories by dragging. Published instantly — the QR sticker never changes.

Interface

04 / 04

Serving it from the edge

Static generation with on-demand revalidation on Cloudflare, so the menu is cached close to the customer and still updates the moment it is edited.

Editor

Explorer

app/

Models/

Order.php

Ticket.php

Livewire/

OrderScreen.php

KitchenBoard.php

resources/

views/

order.blade.php

Order.phpOrderScreen.php

1// Order totals are money — never trust a float.

3public function total(): Money

5 return $this->items

6 ->map(fn ($i) => $i->subtotal(),

7 ->reduce(Money::zero(), fn($c, $i) => $c->add($i))

8 ->withTax($this->taxRate);

11// A closed ticket can reopen — the table ordered one more coffee.

12public function reopen(User $by): void

13{

14 throw_unless($by->can('reopen', $this), Forbidden::class);

15 $this->update(['closed_at' => null]);

16 OrderReopened::dispatch($this, $by);

17}

● PHP 8.3mainLn 14, Col 320 problems

Features

What it actually does.

Instant load

Under a second to first paint on restaurant wifi, on a five-year-old phone.

Edit from a phone

Prices, photos, availability and ordering — changed from behind the bar, live immediately.

Permanent QR

The sticker never needs reprinting. Content changes behind a stable URL.

Allergens and diets

Per-dish tags that customers can filter, which cuts a repeated question for staff.

Multi-language

Spanish, English and Arabic from the same dataset.

Sold-out toggle

One tap greys out a dish across every language at once.

Tech stack

What it is built with.

Next.js
Tailwind
Cloudflare
SQLite

The result

Where it ended up.

First paint: 0.8s
JavaScript shipped: 42KB
Lighthouse: 100
Reprints needed: 0

Build in public

Documented from day 1 to day 9.

See the build on Instagram