How Pixel Web Services Built a Real-Time Hospital Appointment System with React & Supabase
When Shreeyash Hospital realized their lack of a digital presence was hampering growth and patient acquisition, they approached Pixel Web Services to build a modern solution. We architected a Serverless Single Page Application (SPA) using React 18 and Supabase, leveraging real-time PostgreSQL subscriptions to keep clinic dashboards synchronized instantly.
Architecture Overview
Pixel Web Services opted for a Backend-as-a-Service (BaaS) Architecture to accelerate development without sacrificing scalability. The frontend was built as a React SPA using Vite, communicating directly with a Supabase PostgreSQL database.
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ Router │──▶│ Pages │──▶│ Hooks │──▶│React Qry│
└─────────┘ └─────────┘ └─────────┘ └─────────┘
│ │ │
▼ ▼ ▼
┌─────────┐ ┌─────────┐ ┌─────────┐
│UI Comps │──▶│shadcn/ui│ │API Lib │
└─────────┘ └─────────┘ └─────────┘
│
▼
┌─────────┐
│Supabase │
└─────────┘The Challenge
Before this project, Shreeyash Hospital operated without a dedicated website. In the modern healthcare landscape, this lack of digital footprint severely hampered their ability to attract new patients, rank on local search engines, and establish authority in their specialty.
The clinic also needed a system to manage patient flow efficiently. Relying on manual bookings or generic, non-specialized tools led to scheduling conflicts and scattered patient histories. They needed a unified dashboard where reception staff and doctors had full parity and real-time synchronization.
Zero Digital Presence
Lack of digital footprint hampered patient acquisition and local SEO rankings.
Operational Inefficiencies
Manual bookings led to scheduling conflicts and scattered patient histories.
Strict Data Integrity Requirements
The hospital required rigorous validation for patient demographics and clinical metrics, preventing errors like future birth dates or negative fees.
Our Approach
We opted for a Backend-as-a-Service (BaaS) Architecture to accelerate development without sacrificing scalability. By relying on robust modern primitives, we could deliver a secure, scalable solution in just two weeks.
React 18 & Vite
Provided blazing-fast development and modern client-side rendering for a highly interactive SPA experience.
Supabase
Eliminated the need to build a custom Node.js backend. Real-time subscriptions allowed dashboards to update instantly.
TypeScript 5.8
Ensured robust data modeling and type safety, which is non-negotiable for sensitive healthcare applications.
Zod & React Hook Form
Enforced strict schema rules on the client side before data ever reached the server.
shadcn/ui & Tailwind CSS
Allowed the rapid creation of a custom, accessible, and responsive design system that didn't look like a generic template.
The Solution
Delivering a complete hospital management system in 14 days required ruthless prioritization and a phased execution strategy.
Database & Auth Setup
Designed the PostgreSQL schema in Supabase, established Row Level Security (RLS) policies for Staff, Doctors, and Patients, and seeded initial accounts.
UI Primitives & Dashboards
Built out the shadcn/ui components and established the React Query data fetching hooks.
Real-Time Integration
Implemented Supabase channel subscriptions so that when reception marked a patient as "Arrived", the Doctor's dashboard updated instantly.
Polish & SEO
Refined the fuzzy name search, added strict Zod validations, and implemented SEO best practices for the public-facing booking portal.
Technical Highlight: Smart Patient Management
Instead of rigid, isolated patient profiles, the team engineered a "Contact Bucket" system. A single mobile number acts as the primary identifier (Contact). Multiple patients (Self, Spouse, Children) can be linked to this one contact. This perfectly mirrors how families actually book appointments in India, drastically reducing duplicate records. Additionally, the use of Supabase's `postgres_changes` event channel allowed the application to refetch data automatically without relying on complex WebSockets infrastructure.
Results & Impact
The custom hospital appointment management system fundamentally transformed Shreeyash Hospital's operations. The launch of the optimized platform led to an immediate growth in SEO, Generative Engine Optimization (GEO), and Google Business rankings, solving the initial pain point of digital obscurity.
"The lead physicians, Dr. Amol and Dr. Monika, were deeply impressed with the website's professional design and the seamless functionality of the dashboards. Staff and doctors now operate on a synchronized, real-time system, eliminating communication gaps during patient handoffs."
Key Takeaways
BaaS Accelerates Delivery
Leveraging Supabase allowed a small team to deliver a highly secure, real-time hospital application in just 2 weeks by eliminating backend boilerplate.
Model Real-World Behavior
The "Contact Bucket" approach (grouping families under one phone number) succeeded because it mapped software to actual human behavior, rather than forcing humans to adapt to rigid database schemas.
Data Integrity Begins on the Client
Using Zod for strict type validation before data submission prevents a massive class of operational errors in healthcare apps.
Ready to scale your digital presence?
We build custom, high-performance web applications that solve real business problems. Let's discuss your next project.