How to Integrate Lovable with Practo

Go to practo.com/developers and submit a partner application. Unlike fully self-serve APIs, Practo reviews partner applications to ensure use cases align with their healthcare marketplace guidelines. Fill in your application name, description, target market (India/Southeast Asia), expected user volume, and how your application improves healthcare access. Practo's developer program has two tracks: a limited public API for basic doctor search and a full partner API for booking and deeper data access. The public API allows searching doctors and clinics by specialty and location. The full partner API adds appointment booking, clinic management, and health records access. Once approved, you receive API credentials — typically an API key or OAuth2 client credentials. Practo's API authentication model has evolved over their platform's history; your onboarding documentation will specify the exact authentication method for your integration tier. For testing, Practo provides a sandbox environment with simulated doctor profiles and appointment data for Indian cities. Use this throughout development before switching to production credentials that hit real provider data.

After receiving Practo API credentials, open your Lovable project, click '+', select 'Cloud', and expand Secrets. Add PRACTO_API_KEY (or PRACTO_CLIENT_ID and PRACTO_CLIENT_SECRET if using OAuth2) and PRACTO_API_BASE with the API base URL from your onboarding documentation. Also add PRACTO_DEFAULT_CITY and PRACTO_DEFAULT_COUNTRY to set defaults for your target market. For an India-focused app, PRACTO_DEFAULT_COUNTRY='IN' and PRACTO_DEFAULT_CITY='Bangalore' (or your primary target city). These defaults simplify Edge Function logic for location-based searches. Practo's API key grants access to their provider database and booking infrastructure for your registered geographic markets. The key is scoped to your registered application and may be restricted to specific cities or countries based on your partner agreement. Keep credentials in Cloud Secrets — never hardcode them in frontend code or commit to version control.

Create a Supabase Edge Function that queries Practo for doctors and clinics. The primary search endpoint accepts: specialty (mapped to Practo's specialty taxonomy), city_id or location coordinates, availability filter (available today/this week), fee range, and gender preference. Practo's doctor profiles include: name, qualifications (MBBS, MD, MS, etc. — Indian medical degree conventions), specialization, years of experience, consultation fee in INR, clinic name and address, next available slot, ratings, and review count. These differ from US-market APIs in the degree format (Indian medical council qualifications) and fee structure (flat consultation fee rather than insurance-based billing). For the search response, return the most relevant fields for your use case. A doctor discovery app needs: doctor_id, name, qualifications, specialization, experience_years, consultation_fee_inr, clinic_name, locality, city, next_available_slot, rating, review_count. For a booking flow, you'll also need the clinic_id and available_slot_ids. Design the Edge Function to accept a simplified action interface with action='search-doctors', action='get-availability', and action='book-appointment' to handle the complete booking workflow.

1// supabase/functions/practo-api/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const API_KEY = Deno.env.get("PRACTO_API_KEY") ?? "";
5const BASE = Deno.env.get("PRACTO_API_BASE") ?? "";
6const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization" };
7
8const practoFetch = (path: string, options?: RequestInit) =>
9  fetch(`${BASE}${path}`, { ...options, headers: { "Authorization": `Bearer ${API_KEY}`, "Content-Type": "application/json", ...((options?.headers ?? {}) as Record<string, string>) } });
10
11serve(async (req) => {
12  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
13  try {
14    const body = await req.json();
15    const { action } = body;
16
17    if (action === "search-doctors") {
18      const { specialty, city_id, date_filter } = body;
19      const params = new URLSearchParams({ specialty, city_id });
20      if (date_filter) params.set("availability", date_filter);
21      const res = await practoFetch(`/doctors/search?${params}`);
22      const data = await res.json();
23      const doctors = (data.doctors ?? data.results ?? []).map((d: any) => ({
24        doctor_id: d.id ?? d.doctor_id,
25        name: d.full_name ?? d.name,
26        qualifications: d.qualifications ?? "",
27        specialization: d.specialization ?? d.specialty,
28        experience_years: d.experience ?? null,
29        fee_inr: d.consultation_fee ?? d.fee,
30        clinic_name: d.clinic?.name ?? "",
31        locality: d.clinic?.locality ?? "",
32        next_slot: d.next_available_slot ?? null,
33        rating: d.rating ?? null,
34        review_count: d.review_count ?? 0,
35      }));
36      return new Response(JSON.stringify({ doctors }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
37    }
38
39    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
40  } catch (err) {
41    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
42  }
43});

Build the doctor discovery interface optimized for the Indian healthcare user experience. Key design considerations: consultation fee in INR is a primary decision factor for Indian patients, experience and qualifications are more important than ratings for specialist search, and 'available today' is a common urgent care scenario. Create a search page with: specialty dropdown (using Indian specialty terms), city selector (list of major Indian cities with their Practo city IDs), and filters for availability (any/today/this week), fee range (in INR), and doctor gender. On search, call the Edge Function and display doctor cards. Each doctor card should show: doctor name with prefix (Dr.), qualifications (MBBS, MD, etc.), specialization, experience ('15 years experience'), clinic name and locality, consultation fee with ₹ symbol, star rating, and a prominent 'Book Appointment' or 'Book Online' button with the next available slot highlighted. For the booking flow, Practo patients in India typically provide: full name, mobile number, and age/DOB. Build a simple form with these fields. After successful booking, display the appointment confirmation including: doctor name, clinic address, appointment date and time, and any pre-appointment instructions from the doctor's profile.