Food Ordering

Chit - Table Ordering SaaS

Quick Start

Requirements: Node.js 18+ and npm. No environment variables or backend are required to run it - the menu, live order queue, and both AI features run against seeded data in src/lib.

Download and unzip

After purchase, download the zip from your order confirmation email and unzip it.

Install dependencies

npm install

Start the dev server

npm run dev

Open http://localhost:3000. Routes:

/ - marketing home, /pricing - plans, /login - mock-auth login/signup
/order/[tableId] - guest QR menu (try /order/table-5), /order/checkout, /order/track/[ticketId]
/dashboard - live order queue, /dashboard/menu - menu editor, /dashboard/insights - AI demand insights

Build and lint

npm run build
npm start

# optional
npx biome check .   # lint

Folder Structure

Next.js App Router. The cart is a localStorage-backed React context; the menu, order queue, and both AI features each live in one data/logic file under src/lib.

src/
├── app/
│   ├── layout.tsx                Fonts (Space Grotesk / Inter / Space Mono); flash-free theme script
│   ├── globals.css                "Midnight Kitchen" design tokens + the shared .ticket surface
│   ├── page.tsx                    Marketing home - photo hero, feature bento, testimonials
│   ├── pricing/page.tsx
│   ├── login/page.tsx              Tabbed login / signup, mock auth
│   ├── order/
│   │   ├── [tableId]/page.tsx      Guest QR menu + AI ordering assistant
│   │   ├── checkout/page.tsx       Cart review, payment seam, order-ticket confirmation
│   │   └── track/[ticketId]/page.tsx
│   └── dashboard/
│       ├── page.tsx                Live order queue + AI insight banner
│       ├── menu/page.tsx           Menu management (prices, 86, AI-drafted descriptions)
│       └── insights/page.tsx       Demand heatmap + AI insight feed
├── components/                    FeatureBento, MenuItemCard, LiveOrderQueue, DashboardShell, ...
└── lib/
    ├── menu.ts                     Menu items + categories - swap for a real catalog
    ├── orders.ts                   Order/queue/insight seed data + types
    ├── assistant.ts                 Rule-based ordering assistant - swap for a real model call
    └── cart.tsx                     localStorage-backed cart context

Customization

Re-skin the whole product

Every colour is a CSS custom property defined once in src/app/globals.css - dark is the default theme (no class needed); :root.light supplies the light-mode override. Edit --theme-color-primary* to change the accent everywhere at once. The .ticket class (a sharp card with a thicker top accent border, set in the monospace type family) is reused across order confirmations, the live queue, and guest receipts.

The menu

Everything guests order is in src/lib/menu.ts: categories and MenuItem entries with priceCents, dietary tags, a popular flag, and a soldOut toggle. Point image at your own photos to replace the Unsplash placeholders.

The two AI surfaces

src/lib/assistant.ts (guest ordering assistant) and the insightFeed in src/lib/orders.ts (owner demand insights) are both deterministic, rule-based logic today - no API key, works offline. Swap in a real model by replacing the matching function and routing it through AI_GATEWAY_API_KEY / ASSISTANT_MODEL (see .env.example); the chat and insights UI components don't need to change.

Payments and persistence

Checkout (src/app/order/checkout) and owner-plan billing are stubbed with a documented seam - no real charge is made. Set DATABASE_URL to persist menu/order data instead of the seeded arrays in src/lib, and the DODO_* variables to take real payments at checkout.

Deployment

Every variable in .env.example is optional - the template runs fully seeded without any of them.

Deploy the demo

Import the repo on Vercel and ship - the included vercel.json sets the framework and build command. No database or API keys are required for the demo to work.

Add keys only when you go live

Copy .env.example to .env.local(or your host's dashboard) and set DATABASE_URL to persist real data, AI_GATEWAY_API_KEY / ASSISTANT_MODEL to route the two AI features through a real model, and the DODO_* variables once you wire real payments at checkout.

Still stuck?

Email us at support@thekitbase.app with your order number and we'll help you get set up.