ByteBite

A production-grade, real-time food ordering and delivery platform built as a TypeScript monorepo. Three role-based interfaces -- Customer, Restaurant Owner, and Driver -- synchronized via WebSockets, secured with session-based authentication, and designed with a cinematic dark luxury UI.

---

Table of Contents

• What This Demonstrates
• User Flows
• Architecture
• Tech Stack
• Features
• Design System
• Project Structure
• Getting Started
• Running in Demo Mode
• Pages and Routes
• API Reference
• Database Schema
• Real-Time Events
• Authentication
• Payment Flow
• Seeded Data
• Scripts
• Environment Variables
• License

---

What This Demonstrates

Concept	Implementation
Real-time multi-client sync	Socket.io broadcasts order lifecycle events; useSocketInvalidation hook auto-invalidates React Query caches with role-aware toast notifications
Role-based authentication	better-auth with Drizzle adapter; httpOnly session cookies; requireAuth and requireRole Express middleware
Payment lifecycle	Stripe Checkout with webhook signature verification; cash-on-delivery option; simulated fallback when keys are absent
Concurrent write safety	Optimistic locking on driver accept via WHERE driver_id IS NULL; returns 409 on race conflict
End-to-end type safety	OpenAPI spec generates React Query hooks and Zod validators via Orval; Drizzle schema provides TypeScript types from database to UI
Public browsing with gated checkout	Guests browse restaurants and menus freely; cart persists in localStorage; checkout requires authentication
Cinematic UI	Auto-play hero carousel, glassmorphism card system, scroll-to-expand restaurant hero, infinite marquee, 3D tilt cards, draggable testimonials

---

User Flows

Guest (no account)

Browse the home page, explore restaurant menus, add items to cart. Cart persists across sessions. Checkout redirects to login. After signing in, the cart is preserved and checkout continues.

Customer

Register with "Customer" role. Browse the cinematic home page with auto-play hero carousel, search restaurants, filter by cuisine. Open a restaurant to see the scroll-to-expand hero that reveals the menu. Add items, checkout via Card (Stripe) or Cash on Delivery. Track orders live with a 5-step animated progress bar. View order history with search, filters, and one-tap reorder.

Restaurant Owner

Register with "Restaurant" role. Add a restaurant via the 4-step onboarding wizard (Info, Menu Items, Preview, Launch). Manage orders on the Kitchen Cockpit dashboard with revenue chart, activity timeline, and order pipeline (Accept, Cook, Ready). Edit restaurant details (name, description, cuisine, image, delivery time) or delete restaurants from the "My Restaurants" section. Manage menu items per restaurant -- add, edit, delete items and toggle visibility.

Driver

Register with "Driver" role. View earnings, delivery count, and active stats. Accept available pickups (race-safe with 409 on conflict). Mark orders as delivered once picked up.

---

Architecture

                           Browser
    +--------------+  +--------------+  +--------------+
    |   Customer   |  |  Restaurant  |  |    Driver     |
    +--------------+  +--------------+  +--------------+
            |                |                  |
            v                v                  v
    +-----------------------------------------------+
    |         React 19 + Vite 7 Frontend            |
    |  Zustand . React Query . Framer Motion        |
    |  Wouter . Tailwind CSS 4 . Radix UI           |
    +------------------------+----------------------+
                             |  Vite proxy
                             v
    +-----------------------------------------------+
    |            Express 5 API Server               |
    |  better-auth . Drizzle ORM . Zod . Pino       |
    |  Socket.io . Stripe                           |
    +------------------------+----------------------+
                             |
                             v
                    +----------------+
                    |   PostgreSQL   |
                    +----------------+

---

Tech Stack

Frontend

Technology	Purpose
React 19	UI framework
Vite 7	Build tool and dev server
Tailwind CSS 4	Utility-first styling
Radix UI	Accessible component primitives
Framer Motion	Carousel, 3D tilt, drag gestures, scroll animations
Zustand	Client state (cart persisted to localStorage)
React Query	Server state, caching, auto-refetch
Wouter	Lightweight routing
Recharts	Dashboard analytics
Sonner	Toast notifications
Socket.io Client	Real-time events

Backend

Technology	Purpose
Express 5	HTTP framework
better-auth	Session-based authentication
Drizzle ORM	Type-safe PostgreSQL queries
Zod	Runtime validation
Socket.io	Real-time events
Pino	Structured logging
Stripe	Payment processing (optional)

Infrastructure

Technology	Purpose
PostgreSQL	Primary database
pnpm workspaces	Monorepo management
TypeScript 5.9	End-to-end type safety
Orval	OpenAPI codegen
esbuild	Server bundling

---

Features

Feature	Customer	Restaurant	Driver
Cinematic hero carousel (auto-play 2.5s, crossfade)	x
Public browsing without login	x
Search and filter by cuisine	x
Infinite marquee featured dishes	x
Scroll-to-expand restaurant hero	x
Circular food image menu cards	x
Cart with Card / Cash on Delivery	x
Live 5-step order tracking	x
Order history with search and reorder	x
Revenue trend chart		x
Activity timeline		x
Order pipeline (Accept, Cook, Ready)		x
4-step restaurant onboarding wizard		x
Edit/delete owned restaurants		x
Menu item CRUD (add, edit, delete, toggle visibility)		x
Earnings and delivery stats			x
Race-safe pickup accept (409 on conflict)			x
Mark orders as delivered			x
Role-aware toast notifications	x	x	x
Session auth with role selection	x	x	x
Profile with stats	x	x	x
3D tilt glassmorphism cards	x
Draggable testimonial shuffle cards	x
Responsive down to 375px	x	x	x
Avatar dropdown with sign out	x	x	x

---

Design System

Theme

The entire application uses a luxury dark theme with glassmorphism effects.

Element	Value
Background	#0C0C0C
Card surface	bg-white/[0.04] backdrop-blur-xl
Card border	border-white/[0.08]
Card hover	bg-white/[0.07] border-white/[0.14] with red glow shadow
Primary accent	#E63946
Text primary	text-white
Text secondary	text-gray-400 to text-gray-500

Animation Patterns

Pattern	Method	Duration
Hero carousel	CSS transition-opacity	700ms crossfade, 2.5s interval
Section reveals	Framer Motion whileInView	500-600ms
How It Works cards	Directional entry (left, top, right)	600ms staggered
Why Choose Us cards	Rotate + scale entry	600ms staggered
Restaurant cards	3D tilt via useMotionValue + useSpring	Real-time
Featured dishes	CSS translateX infinite marquee	30s loop
Testimonials	Framer Motion drag with elastic snap	350ms
About image	Slide from left with rotation correction	700ms
Contact items	Staggered slide from left	100ms apart
Auth pages	Scale + fade modal over food photo	600ms

---

Project Structure

bytebite/
  artifacts/
    api-server/src/
      index.ts              Server entry
      app.ts                Express middleware and auth handler
      lib/auth.ts           better-auth configuration
      middlewares/auth.ts    requireAuth and requireRole
      routes/               health, menu, orders, drivers, checkout, webhooks
      socket/               Socket.io event emitters
    bytebite/src/
      App.tsx               Providers, auth guard, router
      pages/
        customer/home.tsx         Cinematic landing page
        customer/restaurant-menu.tsx  Scroll-to-expand menu
        customer/order-tracker.tsx    Live tracking
        customer/order-history.tsx    Past orders
        restaurant/dashboard.tsx      Kitchen cockpit + my restaurants
        restaurant/onboarding.tsx     4-step wizard
        restaurant/manage-menu.tsx    Menu item CRUD
        driver/dashboard.tsx          Driver terminal
        profile.tsx                   User profile
        login.tsx                     Glassmorphism auth
        register.tsx                  Role selector auth
      components/
        layout.tsx            Adaptive header with avatar dropdown
        cart-sidebar.tsx      Cart with payment method selector
        ui/                   Radix primitives and custom components
        dashboard/            Revenue chart, timeline, driver stats
        shared/               Page transition, initials avatar
      hooks/
        use-auth.ts           Auth Zustand store
        use-store.ts          Cart Zustand store (persisted)
        useSocketInvalidation.ts  Socket cache reconciliation
  lib/
    db/src/
      index.ts              Drizzle instance
      seed.ts               Deterministic seed (6 restaurants, 40 items, 3 drivers)
      schema/               auth, restaurants, orders, drivers tables
    api-spec/               OpenAPI specification
    api-zod/                Generated Zod schemas
    api-client-react/       Generated React Query hooks

---

Getting Started

Prerequisites

• Node.js 20 or later
• pnpm 10 or later
• PostgreSQL 14 or later

Setup

git clone https://github.com/Nafeesa-Shehzadii/Byte-Bite.git
cd Byte-Bite
pnpm install

createdb bytebite
export DATABASE_URL="postgresql://postgres:yourpassword@localhost:5432/bytebite"

pnpm --filter @workspace/db run push
pnpm --filter @workspace/db run seed

Run

Terminal 1 (API):

DATABASE_URL="postgresql://postgres:yourpassword@localhost:5432/bytebite" \
  PORT=8080 pnpm --filter @workspace/api-server run dev

Terminal 2 (Frontend):

PORT=5173 BASE_PATH="/" pnpm --filter @workspace/bytebite run dev

Open http://localhost:5173. Browse as a guest or register an account.

---

Running in Demo Mode

Scenario	Behavior
No Stripe keys	Checkout simulated, order placed immediately
Stripe keys set	Real Stripe Checkout, order waits for webhook
Cash on Delivery	Order placed immediately regardless of Stripe

export STRIPE_SECRET_KEY="sk_test_..."
export STRIPE_WEBHOOK_SECRET="whsec_..."

---

Pages and Routes

Public (no login required)

Route	Page
/	Home: hero carousel, featured dishes marquee, how it works, restaurants, why us, testimonials, about, contact
/menu/:id	Restaurant menu: scroll-to-expand hero, circular food images, inline quantity controls
/login	Glassmorphism login over food photography
/register	Role selector (Customer, Restaurant, Driver) with password strength

Protected (requires login)

Route	Role	Page
/orders	Customer	Order history with search, filters, reorder
/track/:id	Customer	Live 5-step order progress
/profile	All	User profile, stats, quick links
/restaurant	Restaurant	Kitchen cockpit with chart, timeline, board, my restaurants
/restaurant/add	Restaurant	4-step onboarding wizard
/restaurant/:id/menu	Restaurant	Menu item management (add, edit, delete, toggle)
/driver	Driver	Stats, assignments, available pickups, mark delivered

---

API Reference

Public

Method	Endpoint	Description
GET	/api/healthz	Health check
GET	/api/restaurants	List restaurants
GET	/api/restaurants/:id	Restaurant with menu
GET	/api/menu	Menu items
GET	/api/menu/categories	Menu categories

Auth

Method	Endpoint	Description
POST	/api/auth/sign-up/email	Register (name, email, password, role)
POST	/api/auth/sign-in/email	Login
GET	/api/auth/get-session	Current session
POST	/api/auth/sign-out	Logout

Protected

Method	Endpoint	Role	Description
POST	/api/restaurants	restaurant	Create restaurant
PATCH	/api/restaurants/:id	restaurant	Update restaurant (owner only)
DELETE	/api/restaurants/:id	restaurant	Delete restaurant (owner only)
GET	/api/restaurants/mine	restaurant	List owned restaurants
POST	/api/menu/items	restaurant	Add menu item
PATCH	/api/menu/items/:id	restaurant	Update menu item
DELETE	/api/menu/items/:id	restaurant	Delete menu item
GET	/api/orders	any	List orders
POST	/api/orders	any	Place order
GET	/api/orders/:id	any	Order details
GET	/api/orders/summary	restaurant	Stats and revenue
PATCH	/api/orders/:id/status	restaurant, driver	Update status
GET	/api/drivers/available	driver	Ready orders
GET	/api/drivers/my-orders	driver	Assigned orders
PATCH	/api/drivers/:orderId/accept	driver	Accept (optimistic lock)
POST	/api/checkout/session	any	Create payment session
POST	/api/webhooks/stripe	none	Stripe webhook

---

Database Schema

Tables

Table	Purpose	Key Columns
user	Authentication	id, name, email, role, email_verified
session	Session management	id, token, expires_at, user_id
account	Auth providers	id, provider_id, user_id, password
verification	Email verification	id, identifier, value, expires_at
restaurants	Restaurant listings	id, name, description, image_url, cuisine_type, delivery_time, rating, owner_id
menu_items	Food items	id, restaurant_id, name, price, category, image_url, available
orders	Order records	id, customer_id, restaurant_id, driver_id, status, total, items (JSONB), payment_status
drivers	Driver profiles	id, name, phone, vehicle, avatar_url

Order Status Flow

placed --> accepted --> cooking --> ready --> assigned --> delivered

Driver accept uses optimistic locking: UPDATE ... WHERE driver_id IS NULL. Second driver receives 409 Conflict.

---

Real-Time Events

Event	When	Toast
order:created	New order placed	Restaurant: "New order received"
order:status_changed	Status updated	Customer: status label
order:accepted	Driver accepts	Driver: "Order assigned"

---

Authentication

1. Register via /api/auth/sign-up/email with name, email, password, role
2. better-auth creates user and account records, sets httpOnly session cookie
3. All API requests include the cookie via credentials: "include"
4. requireAuth validates session; requireRole checks role
5. Frontend useAuth() hydrates on mount via GET /api/auth/get-session
6. Cart clears on new account creation; persists across login sessions

---

Payment Flow

Card (Stripe): Order created, checkout session created, order enters pending_payment, browser redirects to Stripe, webhook confirms payment, order moves to placed, socket broadcasts.

Cash on Delivery: Order created, simulated session, order placed immediately, socket broadcasts.

Demo Mode: No Stripe keys set. All payments simulated. Order placed immediately.

---

Seeded Data

Run pnpm --filter @workspace/db run seed (idempotent).

Restaurant	Cuisine	Rating	Items
Ember and Co.	American	4.7	6
Sakura Ramen House	Japanese	4.8	7
Verde Pizza Kitchen	Italian	4.6	8
Fuego Cantina	Mexican	4.7	6
Lemongrass and Co.	Thai	4.9	7
Aegean Table	Mediterranean	4.8	6

3 driver profiles: Marcus Rivera, Priya Sharma, Jake Thompson.

---

Scripts

Command	Description
pnpm install	Install dependencies
pnpm run build	Typecheck and build
pnpm run typecheck	TypeScript checking
pnpm --filter @workspace/db run push	Push schema
pnpm --filter @workspace/db run seed	Seed data
pnpm --filter @workspace/api-server run dev	Start API
pnpm --filter @workspace/bytebite run dev	Start frontend
pnpm --filter @workspace/api-spec run codegen	Regenerate types

---

Environment Variables

Variable	Required	Default	Description
DATABASE_URL	Yes	--	PostgreSQL connection string
PORT	Yes	--	Server port
BASE_PATH	Frontend	--	URL base path
STRIPE_SECRET_KEY	No	--	Stripe key (simulated if absent)
STRIPE_WEBHOOK_SECRET	No	--	Stripe webhook secret
FRONTEND_URL	No	http://localhost:5173	Frontend URL for redirects
BETTER_AUTH_URL	No	http://localhost:8080	Auth base URL
LOG_LEVEL	No	info	Log level
NODE_ENV	No	--	development for pretty logs

---

License

MIT