How to Integrate Bolt.new with Practo

The foundation of a healthcare booking system is a well-designed database. In Bolt.new with Supabase connected, prompt the AI to create the data model. You need at minimum: a `doctors` table (id, name, specialty, qualification, clinic_name, clinic_address, consultation_fee, bio, photo_url, languages, years_experience, rating_avg, review_count); an `available_slots` table (id, doctor_id, slot_date, slot_time, duration_minutes, is_booked, appointment_id); an `appointments` table (id, patient_id, doctor_id, slot_id, reason, status, notes, created_at); and a `reviews` table (id, appointment_id, patient_id, doctor_id, rating, review_text, is_verified, created_at). Set up Row Level Security so patients can only read their own appointments, doctors can see their own schedule, and anyone can read doctor profiles and reviews. The reviews table uses the appointment_id foreign key to enforce that only patients who had a real appointment can leave a verified review — this is the key trust mechanism.

Create the patient-facing doctor listing page. This is the most-visited page in any healthcare booking app — users need to quickly filter by specialty, location, language, and availability. Build a DoctorCard component that shows: doctor photo, name, qualification, specialty, clinic name, consultation fee, rating with star display, and a 'Book Appointment' button. Add filter controls at the top: specialty dropdown (Cardiologist, Dermatologist, General Physician, Gynecologist, Orthopedic, Pediatrician, Psychiatrist, etc.), available today checkbox, and maximum fee slider. Sort options: Most Reviewed, Highest Rated, Lowest Fee. Data comes from Supabase via the `@supabase/supabase-js` client, which uses HTTP (PostgREST) — fully compatible with Bolt's WebContainer. The doctor listing page can be fully built and tested in Bolt's preview before connecting real scheduling logic.

Calendly provides the scheduling backbone — real-time availability, buffer times between appointments, timezone handling, and booking confirmation. Each doctor gets a Calendly event type (e.g., '30-minute consultation') linked to their Bolt profile. For the simplest integration, embed Calendly's scheduling widget using their `inline_embed` or `popup_widget` JavaScript — this requires no API calls and works in the WebContainer. For a more integrated experience, use the Calendly v2 API (OAuth 2.0 or personal access token) to fetch the doctor's scheduled events, check availability, and trigger booking creation from your custom UI. The API endpoint `/event_type_available_times` returns available slots for a given event type URL and date range. When a booking is completed, Calendly fires a webhook to your app — this requires a deployed URL. Store the Calendly event URI in your `appointments` table alongside your own appointment record so you can look up or cancel through Calendly's API if needed.

1// app/api/appointments/create/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createClient } from '@supabase/supabase-js';
4
5const supabase = createClient(
6  process.env.NEXT_PUBLIC_SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8);
9
10export async function POST(request: NextRequest) {
11  const { doctorId, patientId, slotId, reason, calendlyEventUri } = await request.json();
12
13  // Mark the slot as booked
14  const { error: slotError } = await supabase
15    .from('available_slots')
16    .update({ is_booked: true })
17    .eq('id', slotId);
18
19  if (slotError) return NextResponse.json({ error: slotError.message }, { status: 400 });
20
21  // Create the appointment record
22  const { data, error } = await supabase
23    .from('appointments')
24    .insert({
25      patient_id: patientId,
26      doctor_id: doctorId,
27      slot_id: slotId,
28      reason,
29      status: 'scheduled',
30      notes: calendlyEventUri ? `Calendly: ${calendlyEventUri}` : null,
31    })
32    .select()
33    .single();
34
35  if (error) return NextResponse.json({ error: error.message }, { status: 400 });
36  return NextResponse.json({ appointment: data });
37}

Reviews are a critical trust signal in healthcare apps — patients rely on them heavily before booking. Build a review system where only verified patients (those with a completed appointment) can leave reviews, displaying a badge to distinguish verified reviews from unverified ones. The reviews table uses the appointment_id as a foreign key — this database constraint ensures that a review can only be submitted by someone who had a real appointment with that doctor. After a patient's appointment status changes to 'completed', show a 'Leave a Review' prompt in their appointment history. The review form should include: star rating (1-5), required written feedback (minimum 50 characters), and an optional 'Would Recommend' checkbox. After submission, update the doctor's `rating_avg` and `review_count` fields via a Supabase database function or trigger for consistent aggregation. Display reviews on the doctor profile page sorted by most recent, with verified badge, date, and helpful vote count.