Dr. Geeta S K had a problem many influencers would envy: 100K+ Instagram followers and 20K+ YouTube subscribers, but no efficient way to convert them into patients.
Patients had to DM on Instagram or call during business hours. Administrative chaos. Missed bookings. Lost revenue.
The Challenge
A Gynecologist & Fertility Specialist with massive social media reach needed:
- Professional booking system — stop Instagram DMs for appointments
- Real-time availability — show open slots instantly
- UPI payment integration — the Indian healthcare payment reality
- Admin dashboard — manage appointments without manual tracking
- SEO content — attract local patients beyond social media
What We Built: Full-Stack Healthcare Platform
Built with React 18 + TypeScript + Supabase, the platform handles everything — from booking to payment to automated confirmations.
1. Real-Time Appointment Booking
typescript
// Supabase real-time subscription for live slot availability
const { data: appointments } = await supabase
.from('appointments')
.select('*')
.eq('date', selectedDate)
.eq('status', 'confirmed')
// Calculate available slots
const availableSlots = allSlots.filter(slot =>
!appointments.find(apt => apt.time_slot === slot)
)
Key features:
- Service-specific booking flows (4 consultation types)
- Real-time slot availability (no double-bookings)
- Mobile-first responsive design
- Instant email confirmations via Resend API
2. UPI Payment Integration
India-specific payment flow with dynamic QR codes:
// Generate UPI payment link
const upiLink = upi://pay?pa=${UPI_ID}&pn=${DOCTOR_NAME}&am=${amount}&cu=INR&tn=Appointment%20${appointmentId}
// Generate QR code for scan-to-pay
Why UPI matters:
- 70%+ Indian digital payments use UPI
- Instant confirmation (no 2-3 day credit card processing)
- Zero payment gateway fees
- Better conversion than international payment methods
3. Admin Dashboard with Real-Time Updates
Built with Supabase subscriptions:
// Real-time appointment tracking
const subscription = supabase
.channel('appointments')
.on('postgres_changes',
{ event: '*', schema: 'public', table: 'appointments' },
(payload) => {
// Live update UI without refresh
updateAppointmentsList(payload.new)
}
)
.subscribe()
Dashboard features:
- Live appointment stream
- One-click confirm/cancel
- Patient contact details
- Payment status tracking
- Export to calendar
4. AI-Powered Blog System
Automated content generation targeting local SEO:
// Claude Sonnet 4 via OpenRouter
const blogPost = await openrouter.chat.completions.create({
model: "anthropic/claude-sonnet-4",
messages: [{
role: "user",
content: `Write SEO-optimized blog post about: ${topic}
Target keywords: ${keywords}
Location: Hubli, Karnataka
Medical specialty: Gynecology & Fertility`
}]
})
SEO Strategy:
- 100+ auto-generated articles
- Local keywords: "gynecologist Hubli", "fertility specialist Karnataka"
- Structured data for rich snippets
- Automated publishing via GitHub Actions
5. Social Media Integration
Instagram & YouTube feed dynamically embedded:
// Fetch latest Instagram posts via Apify scraper
const instagramPosts = await apify.call({
username: 'doctorhubli',
limit: 12
})
// Display latest videos from YouTube
const youtubeFeed = await fetch(
`https://www.youtube.com/feeds/videos.xml?channel_id=${channelId}`
)
Why this matters:
- Leverages existing 100K+ social proof
- Fresh content without manual updates
- Drives social traffic to booking page
6. Health Calculators
Interactive tools for patient engagement:
- BMI Calculator - Health tracking
- Ovulation Tracker - Comprehensive cycle tracking
Lead magnets that drive bookings
The Tech Stack
- frontend: "React 18 + TypeScript + Vite + Tailwind CSS + shadcn/ui",
- backend: "Supabase (PostgreSQL + Real-time + Auth + RLS)",
- payments: "UPI with QR code generation",
- emails: "Resend API for confirmations",
- ai: "Claude Sonnet 4 via OpenRouter for blog content",
- analytics: "DataFast Analytics",
- hosting: "Vercel with automatic deployments"
The Results
After 4 weeks:
- ✅ 500+ patient registrations from Instagram/YouTube traffic
- ✅ 18% conversion rate (Instagram follower → booked patient)
- ✅ 12,000+ monthly visitors (70% from SEO blog content)
- ✅ < 1.5s page load time - Critical for healthcare UX
- ✅ Zero administrative overhead - Fully automated workflow
Dr. Geeta's testimonial:
"My 100K+ Instagram following now seamlessly books appointments online. The automated blog brings new patients through SEO while real-time booking eliminates administrative headaches."
Key Lessons for Healthcare Platforms
- 1. Payment Localization Matters
- UPI integration (not Stripe/PayPal) = 3x higher conversion in India.
- 2. Real-Time > Batch Processing
- Supabase subscriptions prevent double-bookings without complex locking.
- 3. Social Proof Integration
- Embedding existing Instagram/YouTube feeds = instant credibility.
- 4. Mobile-First is Non-Negotiable
- 80% of healthcare searches happen on mobile.
- 5. AI Content = SEO Shortcut
- Automated blog generation with Claude Sonnet 4 = consistent local SEO without manual writing.
Open Source Tech Decisions
Why Supabase over Firebase?
- PostgreSQL > NoSQL for relational appointment data
- Row Level Security > Cloud Functions for auth
- Real-time subscriptions out of the box
- Better TypeScript support
Why Vite over Create React App?
- 10x faster dev server
- Better HMR performance
- Modern build tooling
- Smaller bundle sizes
What's Next?
Adding:
- SMS confirmations (Twilio integration)
- Multi-doctor support (scaling to clinic chains)
- Prescription management system
- Patient health records (HIPAA-compliant)
- Telemedicine video consultations
Live Demo: doctorhubli.com
Questions about building healthcare platforms? Drop them below - happy to discuss HIPAA compliance, payment gateways, or Supabase architecture!
We're Pikasso Studio - we build real-time appointment systems, AI-powered dashboards, and conversion-focused platforms for healthcare, education, and SaaS.
Check out our work: pikassostudio.com
Top comments (0)