Salta al contenuto principale
pos In sviluppo 2026

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.

RestArt 2026 — POS & KDS festival — anteprima principale del progetto
ClienteOnstage APS — Botrugno (LE)
RuoloLead developer (architettura, full-stack, hardware integration Epson)
Anno2026

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 useEpsonPrinter con 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 80mm per 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-label su tutti i bottoni icon-only, aria-pressed sui toggle, aria-live sui 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

LayerTecnologiaNote
FrameworkNext.js 16App Router + Turbopack
UI LibraryReact 19
LinguaggioTypeScript strict
StylingTailwind v4
BackendSupabase (Postgres + Auth + Realtime + RLS)
PagamentiStripe
StampanteEpson TM-T88V via Web USB APIESC/POS nativo
ExportExcelJS (dynamic import)
ChartsRecharts
Testing E2EPlaywright

Tecnologie principali

Next.js 16React 19TypeScriptTailwind v4SupabaseStripeEpson Web USBPlaywright

Galleria del progetto

Link al progetto

Altri progetti