BUILD #003EN PRODUCCIÓN

Carta Digital

Una carta QR que carga al instante y se actualiza desde el móvil en segundos.

Estado: EN PRODUCCIÓN
Fecha: Mayo 2026
Stack: Next.js / Tailwind / Cloudflare / SQLite

RESTAURANTEWEBQR

El problema

Casi todas las cartas QR son un PDF. Tardan en abrirse, hay que hacer zoom y cambiar un precio significa mandarle el archivo a quien lo diseñó. Mientras tanto, el restaurante reimprime la pegatina del QR cada temporada sin necesidad.

La idea

Tratar la carta como un producto, no como un documento. Una página web de verdad que carga en menos de un segundo con el wifi del local, funciona en cualquier móvil y tiene un editor que el dueño maneja desde detrás de la barra.

Cómo lo construí

Cómo fue tomando forma, paso a paso.

01 / 04

Primero el presupuesto de rendimiento

Antes de diseñar nada se puso un límite duro: menos de 50KB de JavaScript y primer pintado por debajo de un segundo en una 3G limitada. Todo lo demás se midió contra eso.

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

Diseñado para un solo pulgar

Pestañas de categoría fijas, fotos grandes y precios legibles al sol. Nadie hace zoom.

Móvil

03 / 04

Un editor para detrás de la barra

Cambia un precio, marca un plato como agotado, reordena categorías arrastrando. Se publica al instante — la pegatina del QR no cambia nunca.

Interfaz

04 / 04

Servida desde el edge

Generación estática con revalidación bajo demanda en Cloudflare, así la carta está cacheada cerca del cliente y aun así se actualiza en cuanto se edita.

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

Funcionalidades

Lo que hace de verdad.

Carga instantánea

Menos de un segundo hasta el primer pintado con el wifi del local, en un móvil de hace cinco años.

Editar desde el móvil

Precios, fotos, disponibilidad y orden — cambiados desde detrás de la barra, en vivo al momento.

QR permanente

La pegatina no hay que reimprimirla nunca. El contenido cambia detrás de una URL fija.

Alérgenos y dietas

Etiquetas por plato que el cliente puede filtrar, lo que quita una pregunta repetida al personal.

Multi-idioma

Español, inglés y árabe desde los mismos datos.

Marcar agotado

Un toque atenúa el plato en todos los idiomas a la vez.

Stack técnico

Con qué está hecho.

Next.js
Tailwind
Cloudflare
SQLite

El resultado

Dónde acabó.

Primer pintado: 0,8s
JavaScript enviado: 42KB
Lighthouse: 100
Reimpresiones: 0

Construyendo en público

Documentado del día 1 al día 9.

Ver el build en Instagram