Mawid · online booking for small businesses

The MilcodeUni reference SaaS (weeks 6–8). A barber, salon or coach shares one link; customers pick a service and a free time; the owner manages everything in a dashboard.

Stack: Next.js (App Router, Server Actions) · Supabase (Postgres, Auth, Row Level Security) · Vercel

Features

Built to the MilcodeUni capstone spec:

Required	Where
Landing page with a clear value proposition	/
Service listing and detail	/b/<link> and /b/<link>/services/<id>
Sign-up, sign-in, sign-out	/login
Booking form with validation	/b/<link>: service → day → free time → name + WhatsApp
Loading, empty, success and error feedback	loading.tsx, empty states, form errors, /done
Protected dashboard	/dashboard (signed-out visitors go to /login)
Create and view bookings	New requests, today's schedule, next 7 days, "Add a booking"
Update a status	Confirm, Decline, Done, Cancel
Delete with confirmation	Services and cancelled/done bookings ("Sure? Yes, delete")
Owner-only data with RLS	supabase/migrations/0001_mawid.sql
Responsive navigation	Dashboard menu stacks on phones

How double-booking is prevented, in two simple layers:

1. The server action checks the chosen time against existing bookings before inserting (src/lib/bookings.ts).
2. A unique index in the database refuses two active bookings starting at the same time.

How privacy works: customers can send a booking (always pending) but can't read any. The booking page only reads public_busy_times, a view with the taken times and no names or phones.

Set up (15 minutes)

1. Supabase: create a project at supabase.com.
2. Database: open SQL Editor, run supabase/migrations/0001_mawid.sql, then supabase/seed.sql (creates the demo business Atlas Barbershop).
3. Env: copy .env.example to .env.local and fill in the URL and anon key (Project Settings → API).
4. Run:

   npm install
   npm run dev
   

   Open http://localhost:3000 → "Try the demo booking page".
5. Own the demo business: sign up in the app, then in SQL Editor:

   update public.businesses
   set owner_id = (select id from auth.users where email = '[email protected]')
   where slug = 'atlas-barbershop';
   

   Your dashboard now shows Atlas Barbershop. (Or create your own business from the setup screen.)
6. Deploy: import the repo on vercel.com and add the same 3 env variables. In Supabase → Authentication → URL Configuration, set the Site URL to your Vercel URL.

Tip: for quick testing, turn off "Confirm email" in Supabase → Authentication → Providers → Email.

How it works

supabase/migrations/0001_mawid.sql   tables, view, RLS policies
supabase/seed.sql                    demo business: Atlas Barbershop
src/app/page.tsx                     landing page
src/app/b/[slug]/                    booking page, service detail, form, server action, confirmation
src/app/login/                       sign in / sign up / sign out (server actions)
src/app/dashboard/                   today, add booking, services & hours, first-time setup
src/lib/bookings.ts                  server-side checks: hours, past times, overlaps
src/lib/slots.ts                     which start times to show (every 30 minutes)
src/lib/time.ts                      "today" and "now" in Morocco, date formatting
src/proxy.ts                         keeps the login fresh, protects /dashboard (from Supabase's Next.js guide)

Dates and times are stored as the shop's local time (day + start_time), so the only timezone code is "what's today in Morocco" in src/lib/time.ts.

Ideas for next steps

• WhatsApp or email reminders the day before
• Edit or move an existing booking
• Online payment, staff members, a weekly calendar view