RestArt 2026 — POS & KDS festival
Sistema POS + KDS full-stack per eventi food & beverage
Sistema POS + Kitchen Display System (KDS) full-stack per RestArt 2026, festival street art e food & beverage. Next.js 16 + React 19 + Supabase, stampante termica Epson Web USB, 3 ruoli (cliente/cassiere/banco), realtime e report Excel multi-foglio.

Highlights
- Sistema multi-utente: clienti (smartphone), cassieri (tablet/notebook), operatori stand (tablet fisso)
- Stampante termica Epson TM-T88V via Web USB API (ESC/POS nativo, no driver, no SDK)
- QR code ESC/POS nativi (GS ( k commands) con auto-reconnect silenzioso
- Realtime Supabase per KDS live (subscription INSERT/UPDATE su orders + order_items)
- 17 migration Postgres versionate con RLS policies restrittive per ruolo
- Dashboard report con 5 KPI principali + 3 secondari + 7 grafici Recharts
- Export Excel: 11 worksheet principale + 17 worksheet totali con filtri avanzati
- Mobile-first 320-1536px (iPhone SE → desktop), touch target ≥44×44 px
- WCAG 2.1 AA + piano accessibilità non udenti (vibration API, SDH captions)
- TypeScript strict mode (tsc --noEmit sempre pulito)
Cosa è
Un sistema full-stack pronto per la produzione che gestisce ordini, pagamenti, ritiri, inventario, reportistica e stampa scontrini per un evento food & beverage con 4 stand fornitori (Panini, Pizze, Gelati, Bevande) e decine di operatori simultanei.
Committente: Onstage APS — associazione di promozione sociale di Botrugno (LE).
Evento target: RestArt 2026, 2 maggio 2026 a Botrugno: street art + hip hop + food & beverage.
Flusso end-to-end
Cliente sceglie prodotti → Cassa (POS o /menu Stripe) → Stampante termica Epson TM-T88V → Cliente ritira con QR → Banco (KDS) scansiona QR → Consegna parziale/totale → Report cassiere realtime con grafici + export Excel.
Aree funzionali
Area Cliente — ordine self-service
- Home evento con line-up dinamico (timeline concerti aggiornata ogni 60s)
- Menu pubblico full-width con thumbnail, stepper qty, badge "⭐ Top" su prodotti >10€, gestione SOLD OUT
- Carrello bottom drawer sticky con totale live
- Checkout Stripe hosted, redirect a pagina QR ordine
- Storico ordini cliente con filtri status
- Dettaglio ordine + QR 256px scaricabile come PNG (SVG → Canvas)
Area Cassa — POS operativo
/cassa: POS touch con tabs categoria scrollabili, griglia responsive 2-4 col, pannello carrello/cassa/inventory: magazzino realtime con stepper +1/-1/+10/-10, numpad, toggle disponibilità/cassa/storico: tabella paginata con filtri categoria/origine/fascia oraria/status/cassa/report: dashboard realtime con 5 KPI principali, 3 secondari, 7 grafici Recharts, export Excel multi-foglio
Area Banco — KDS stand operator
/banco/scan: scanner QR con html5-qrcode, redirect intelligente/banco/order/[id]: consegna ordine con stepper parziale/banco/dashboard: KDS live con tabs In Corso/Completati, beep audio Web Audio API, flash animation
Stampante termica Epson TM-T88V
Integrazione nativa via Web USB API (no driver, no dipendenze esterne):
- Hook dedicato
useEpsonPrintercon lifecycle USB - Auto-reconnect silenzioso al mount via
navigator.usb.getDevices() - Event listeners su
usb.connect/usb.disconnect - Protocollo ESC/POS nativo: bytecode con logo raster, double-size + bold, QR ESC/POS (GS ( k), codepage PC858 per simbolo €
- Chunking invii in blocchi da 64 byte sul bulk endpoint (evita stall USB)
- Reset ESC/POS automatico in caso di errore
- Fallback HTML
@media print 80mmper browser senza Web USB - Stato stampante (disconnected/connected/printing/error) mostrato nell'header
Database & sicurezza
Postgres via Supabase con tabelle profiles, products, orders, order_items, audit_log. 17 migration versionate + bootstrap fresh install. RLS policies restrittive per ruolo (customer, stand_operator, cashier), SECURITY DEFINER su function sensibili, trigger inventario per auto-decremento stock, trigger status orders per auto-compute da order_items.
Mobile-first, accessibilità, performance
- Viewport coperti 320-1536px (iPhone SE, Galaxy, iPhone Pro Max, iPad Mini, iPad Pro, desktop)
- Touch target ≥ 44×44 px (Apple HIG)
- Safe-area inset iOS
aria-labelsu tutti i bottoni icon-only,aria-pressedsui toggle,aria-livesui toast- Focus visible globale con outline 3px solid #fddf0b
- Piano WCAG 2.1 AA documentato
- Piano dedicato accessibilità non udenti (vibration API, SDH, trascrizioni)
- Dynamic import ExcelJS (450KB lazy chunk solo al click export)
- Realtime debounce 500ms per batch aggiornamenti KPI
Stack tecnologico completo
| Layer | Tecnologia | Note |
|---|---|---|
| Framework | Next.js 16 | App Router + Turbopack |
| UI Library | React 19 | — |
| Linguaggio | TypeScript strict | — |
| Styling | Tailwind v4 | — |
| Backend | Supabase (Postgres + Auth + Realtime + RLS) | — |
| Pagamenti | Stripe | — |
| Stampante | Epson TM-T88V via Web USB API | ESC/POS nativo |
| Export | ExcelJS (dynamic import) | — |
| Charts | Recharts | — |
| Testing E2E | Playwright | — |
Tecnologie principali
Galleria del progetto
Clicca su un'immagine per ingrandirla.


