System Architecture

Tech stack

Frontend:
  Framework: Next.js 14 (App Router)
  Language: JavaScript
  Styling: TailwindCSS v4
  UI: Radix + shadcn/ui, Lucide icons
  Charts: Recharts (lazy loaded)
  State: React hooks + Context
  Analytics: Vercel Analytics

Backend:
  Runtime: Node.js (Next.js server)
  Data: Supabase (PostgreSQL)
  Realtime: Supabase Realtime
  Auth: Supabase Auth (JWT)
  Storage: Supabase Storage (planned)

DevOps:
  Hosting: Vercel (web), Supabase (DB/Auth)
  Package manager: pnpm
  Linting/Types: ESLint + JavaScript

High-level architecture

Request/response flow

Core modules and contracts

• Menu & Tables
  • Inputs: category filter, availability flag
  • Outputs: typed MenuItem[], Table[]
  • Error modes: network error, empty sets
• Orders
  • Inputs: tableId, items[] (menuItemId, quantity, price)
  • Outputs: Order with DB UUIDs mapped; realtime events
  • Errors: invalid menu item mapping, constraint violations
• Billing
  • Inputs: items, taxes, discounts
  • Outputs: Invoice, printable bill, payment status
  • Errors: numeric overflow, inconsistent totals
• Users/RBAC
  • Inputs: session cookie/JWT
  • Outputs: redirect when unauthorized, role-checked routes

Real-time subscriptions

• orders channel: push admin notifications and customer status changes
• order_items channel: kitchen/line item updates (future)
• tables channel: occupancy status updates

Performance notes

• Charts and heavy components are lazy-loaded in Admin Dashboard to minimize initial JS.
• Optimized mobile-first UI on customer page; skeletons and progressive image loading.
• Strict JavaScript and ESLint during build; security headers enabled.