📌 Project Overview
The Booking / Appointments template is a full-service scheduling platform built for salons, spas, gyms, personal trainers, consultants, and any service provider who needs a professional, client-facing booking experience backed by a robust operational system. With a 6-step guided booking flow, Supabase Realtime live availability updates, Stripe deposit or full payment collection, and automated email and SMS reminders, this template handles the entire client booking lifecycle from discovery to day-of confirmation.
Designed to replace manual phone bookings and scheduling spreadsheets, this platform gives service businesses a polished digital front door while delivering the backend tools staff and admins need to manage their calendar with confidence.
🧩 Core Features
1. 6-Step Guided Booking Flow
Clients move through a fully guided booking flow: selecting a service, choosing a staff member (or any available), picking a date and time from live Supabase availability, completing an intake form, paying via Stripe (deposit or full), and receiving an animated Framer Motion confirmation screen.
2. Supabase Realtime Live Availability
When a booking is confirmed, Supabase Realtime instantly updates available time slots across all active booking sessions — preventing double bookings and ensuring the calendar is always accurate without page refreshes.
3. Stripe Deposit or Full Payment
Businesses can choose to collect a deposit percentage or the full service amount at booking time. Stripe React handles the secure payment UI, and webhook events confirm payment and update the booking status in Supabase.
4. Admin Calendar View
A protected Admin Calendar page displays all bookings by day or week view, with color-coded status indicators and the ability to update, reschedule, or cancel appointments directly from the calendar interface.
5. Automated Email & SMS Reminders
A cron job triggers a 24-hour-before email reminder via Resend and a 2-hour-before SMS reminder via Twilio — reducing no-shows and keeping clients informed without any manual effort from staff.
6. Staff Profiles with Specialty Tags
The Staff/Team page showcases individual team members with their specialties, certifications, and a personalized availability preview — helping clients choose the right professional for their needs.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | Service pages & booking flow |
| Styling & UI | Tailwind CSS + shadcn/ui | Calendar & time slot UI |
| Animations | Framer Motion | Booking confirmation animation |
| Calendar | React Calendar + custom time slot picker | Date picker with availability |
| Booking State | Zustand | Multi-step booking state management |
| Forms | React Hook Form + Zod | Client intake & validation |
| Payments | Stripe React + Stripe API | Deposit or full payment checkout |
| Database | Supabase (PostgreSQL) | Services, staff, availability, bookings |
| Auth | Supabase Auth | Staff & admin login |
| Live Updates | Supabase Realtime | Live availability slot updates |
| Email Reminders | Resend | 24h before appointment reminder |
| SMS Reminders | Twilio | 2h before appointment text reminder |
| Hosting | Vercel | Hosting & deployment |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Home | Brand hero, service highlights, staff showcase, and Book Now CTA |
| Services | Category tabs with service cards showing duration, price, description |
| Book Now | 6-step guided booking: service → staff → date/time → intake → payment → confirm |
| Staff / Team | Individual profiles with specialties, availability preview, and bios |
| Gallery | Before/after and ambiance photography with lightbox |
| Reviews | Verified client reviews with star ratings |
| Contact | Location, hours, contact form, and Google Maps embed |
| Admin Calendar | Day/week booking calendar with status management and edit controls |
🔒 Key Technical Highlights
- Availability calculation logic based on staff schedules and existing bookings
- Cron job setup for automated 24h email and 2h SMS reminders
- Supabase Realtime hook for instant slot availability updates on booking
- Multi-step booking form with Zustand state persisted across steps
- Supabase schema: services, staff, staff_availability, bookings, clients, payments