Lion City Booking

An MVP appointment booking system for a single Singapore small business, built with Next.js App Router, TypeScript, Tailwind CSS, and Supabase.

Features

• Public booking flow at /book
• Guest booking with service, date, slot, name, phone, and notes
• Availability generated from seeded business hours
• Admin auth with Supabase email/password
• Admin dashboard with grouped appointments and status actions
• Supabase SQL schema, seed data, and setup instructions
• Mobile-friendly UI for both customers and owners

Tech Stack

• Next.js 16 App Router
• TypeScript
• Tailwind CSS v4
• Supabase Postgres + Auth
• Vercel-friendly deployment

Folder Structure

app/
  (public)/
    page.tsx
    book/page.tsx
  (admin)/
    admin/page.tsx
    admin/login/page.tsx
  api/availability/route.ts
components/
  admin/
  booking/
  site/
  ui/
lib/
  actions/
  supabase/
  availability.ts
  queries.ts
  validations.ts
supabase/
  schema.sql
  seed.sql
types/
  app.ts
  database.ts

Environment Variables

Copy .env.example to .env.local and fill in:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
SUPABASE_DB_URL=

The anon key is safe for browser auth. The service-role key is server-only and powers server-side booking reads/writes plus admin data access. SUPABASE_DB_URL is optional and only useful if you want direct SQL access from your own environment.

Supabase Setup

1. Create a new Supabase project.
2. In the Supabase SQL editor, run supabase/schema.sql.
3. Run supabase/seed.sql.
4. In Supabase Auth, create the admin user manually:
   • Example email: [email protected]
   • Example password: any strong password you choose
5. Copy the new user's UUID from the Auth users table.
6. Run the commented SQL snippet at the bottom of supabase/seed.sql with that UUID to insert the admin_users link row.
7. Add the project URL, anon key, and service-role key to .env.local.

Local Development

npm install
npm run dev

Open http://localhost:3000.

Useful Scripts

npm run lint
npm run typecheck
npm run test
npm run build

How the MVP Works

Public booking

• / is a lightweight marketing/demo homepage.
• /book loads the business and services from Supabase.
• Slot availability is fetched from /api/availability.
• Booking submission uses a server action:
  • validate input with Zod
  • upsert customer by phone
  • create a pending appointment

Admin dashboard

• /admin/login uses Supabase email/password auth.
• /admin is protected by proxy auth middleware.
• Dashboard data is loaded server-side and grouped into:
  • today’s appointments
  • pending bookings
  • confirmed bookings
  • cancelled bookings
• Owners can confirm, cancel, or complete bookings from the dashboard.

Seeding

Seed data includes:

• 1 business: Lion City Barber
• 3 services
• Tue-Sun operating hours, Monday closed
• sample customers
• sample appointments across pending, confirmed, cancelled, and completed

Deployment on Vercel

1. Push this repo to GitHub.
2. Import the project into Vercel.
3. Add the same environment variables in Vercel project settings.
4. Deploy.
5. Ensure your Supabase URL is added to Auth redirect settings if you later expand auth flows beyond password sign-in.

Notes

• This MVP is single-business only.
• Payments, WhatsApp, AI chat, analytics, and multi-branch support are intentionally out of scope.
• The UI still renders in preview mode without env vars, but live booking and admin features require Supabase to be configured.

Suggested Next Features

1. Customer booking edits and cancellations via secure links
2. Business-hours editing in the admin dashboard
3. Appointment reminders by SMS or WhatsApp
4. Staff assignment and multi-calendar views
5. Basic reporting for utilization and no-shows