📌 Project Overview
The Healthcare / Clinic template is an accessible, WCAG 2.1 AA-compliant clinic website built for medical practices, specialist clinics, and healthcare providers who need a professional digital presence with real appointment booking capability. Combining Cal.com's scheduling API with a multi-step patient intake flow, Supabase Auth-protected patient portal, and automated email and SMS confirmations via Resend and Twilio, this template handles the full patient journey from discovery to confirmed appointment.
Designed with clinical trust, privacy, and accessibility as core priorities, the platform provides the structured, reassuring experience that healthcare visitors expect — while giving administrative staff full control over doctor profiles, services, and appointment data.
🧩 Core Features
1. Multi-Step Appointment Booking
A guided 4-step booking flow walks patients through selecting a service and doctor, picking an available date and time via the Cal.com API, completing a React Hook Form + Zod-validated intake form, and receiving a confirmation with both email (Resend) and SMS (Twilio).
2. Cal.com API Availability Integration
Real-time slot availability is fetched from the Cal.com API, ensuring that patients only see times that are genuinely open — eliminating double bookings and manual schedule management.
3. Doctor Profiles with Specialty Filter
The Doctors page features filterable specialty tabs and individual doctor profile pages [slug] with photos, credentials, services offered, and a direct booking CTA.
4. Patient Portal (Authenticated)
Logged-in patients can view their upcoming and past appointments, access visit summaries, and cancel scheduled bookings — all scoped to their own records via Supabase RLS.
5. WCAG 2.1 AA Accessibility
The site includes skip navigation links, managed focus states, proper ARIA labels across all interactive components, and Radix UI-powered accessible accordions for the FAQ page — meeting clinical standards for digital accessibility.
6. RLS-Enforced Data Privacy
Supabase RLS ensures patients can only read and write their own records, while staff members have full access to the appointment management system — providing HIPAA-aware data segmentation.
🧰 Tech Stack
| Feature Area | Technology | Purpose |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) + TypeScript | Accessible, SEO-optimized pages |
| Styling & UI | Tailwind CSS + shadcn/ui | Clean clinical UI components |
| Animations | Framer Motion | Subtle UI transitions |
| Booking | Cal.com API + React Calendar | Scheduling with real availability |
| Forms | React Hook Form + Zod | Patient intake form validation |
| Maps | @react-google-maps/api | Clinic location embed |
| Database | Supabase (PostgreSQL) | Doctors, appointments, patients |
| Auth & Privacy | Supabase Auth + RLS | Patient & staff access control |
| Resend | Appointment confirmation emails | |
| SMS | Twilio | Appointment confirmation texts |
| Booking Engine | Cal.com API | Real-time availability endpoint |
| Hosting | Vercel | HIPAA-aware hosting |
🗂️ Website Structure
| Page / Component | Functionality |
|---|---|
| Home | Trust-building hero, services overview, doctor highlights, booking CTA |
| Doctors | Specialty filter, doctor cards, and individual profile pages |
| Services | Service listings with descriptions, duration, and pricing |
| Book Appointment | 4-step guided booking: service → doctor → time → intake → confirm |
| Patient Portal | Authenticated: upcoming appointments, past visits, cancel option |
| FAQs | Radix UI accordion with categorized patient questions |
| Contact | Address, phone, Google Maps embed, and general enquiry form |
🔒 Key Technical Highlights
- Cal.com API integration for real-time appointment availability
- Multi-step booking state management with form validation at each step
- WCAG 2.1 AA: skip links, focus management, ARIA labels across all components
- Supabase RLS: patients see only their records; staff see all
- Supabase schema: doctors, services, appointments, patients, availability_blocks