ClinicBell: Smart Prescriptions & AI Clinic Care
An intelligent healthcare management ecosystem powered by Google Gemini Vision AI to decipher handwritten doctor prescriptions, convert natural voice dictations into clinical orders, automate patient WhatsApp recovery tracking, and deliver full PWA mobility.
Project Evolution & Journey
ClinicBell was conceived and built through two pivotal phases of Google's AI developer ecosystem for the GDG Kolachi AI Seekho Builders Day:
Google AI Studio (Prompt Prototyping)
Engineered and fine-tuned multimodal prompts to accurately decipher challenging, faint handwritten doctor prescriptions and convert raw clinical voice notes into structured JSON medical records.
DeepMind Antigravity AI (Full Codebase Curation)
Fullstack architecture, glassmorphic UI system, Node.js + Neon PostgreSQL backend, role-based security hardening, and Progressive Web App (PWA) capabilities curated with Google DeepMind Antigravity AI.
Built with Google & Gemini AI Technologies
ClinicBell seamlessly integrates leading Google technologies to eliminate administrative fatigue in modern medical practices:
Google Gemini 2.5 / 3.5 / 3.6 Flash Multimodal Vision AI
Powers the Handwritten Doctor Prescription OCR Scanner. Deciphers messy doctor shorthand from photos, extracting diagnosis, medicine names, daily dosage counts (1-1-1), meal timings, treatment duration, and clinical rationales into structured patient charts.
Google Gemini AI Clinical Restructurer
Transforms unstructured doctor voice dictations into standard clinical prescription formats and generates respectful, bilingual Urdu/English WhatsApp follow-up check-in messages.
Google Web Speech API
Native browser-level speech-to-text dictation operating on Desktop and installed Mobile PWAs with zero latency and high transcription fidelity.
Key Core Features
1. Prescription OCR Scanner
Snap or upload photos of handwritten slips. Gemini Vision extracts Diagnosis, Medication Name, Daily Frequency (1-0-1), Meal Instructions, Duration, and Clinical Reason.
2. Unified Voice Dictation
Speak naturally into your device. Streams live into an editable textbox with one-click Gemini Auto-Structure Rx to convert messy voice notes into clean medical orders.
3. Automated WhatsApp Recovery
Automated 3-day, 1-week, and 2-week recovery follow-up schedules with personalized polite check-in messages launched directly into WhatsApp Web / Mobile.
4. Neon Cloud RBAC Security
Real-time serverless PostgreSQL database with dedicated portal experiences for Admin, Doctor, and Patient / Customer.
5. Cross-Platform PWA
Standalone application installable on Windows, macOS, Linux, Android, and iOS with persistent install prompts and offline service worker caching.
6. Security Hardening
Generic authentication error responses, rate limiting, and JWT session handling to prevent account enumeration and role exposure attacks.
Architecture & Tech Stack
| Tier / Component | Technologies Used |
|---|---|
| Frontend | React 18, Vite, TypeScript, TailwindCSS, Lucide Icons, Web Speech API, PWA Service Worker |
| Backend API | Node.js, Express, ES Modules, JWT Authentication, pg (nodepostgres) |
| Database | Neon Cloud PostgreSQL (Pooled SSL Serverless DB with zero static mock data) |
| AI Services | Google Gemini Vision (gemini-2.5-flash, gemini-3.5-flash, gemini-3.6-flash) via @google/genai & OpenRouter API |
| Hosting | Netlify (Frontend Client) + Render (Backend API Service) |
Database Schema Summary
ClinicBell operates on 5 core relational PostgreSQL tables in Neon Cloud:
hospitals:(id, name, code)users:(id, cnic, name, phone, role, hospital_id, password_hash, specialty, age, gender)patients:(id, user_id, hospital_id, cnic, name, phone, age, gender, status, note)visits:(id, patient_id, doctor_id, diagnosis, prescription, raw_note, visit_date)followups:(id, patient_id, visit_id, hospital_id, send_date, status, delay, custom_message)
Live Demo Login Credentials
Test live authentication across Admin, Doctor, and Customer/Patient portals on clinicbell.netlify.app:
| Role | Name | CNIC (Login ID) | Password | Hospital Node |
|---|---|---|---|---|
| Admin | Hospital Administrator | 42101-0000000-0 |
password123 |
hosp-gdg-01 |
| Doctor | Dr. Ahmed Raza | 42101-1234567-1 |
password123 |
hosp-gdg-01 |
| Doctor | Dr. Sara Khan | 42101-2345678-2 |
password123 |
hosp-gdg-01 |
| Patient | Fatma Tariq | 42101-9876543-2 |
password123 |
hosp-gdg-01 |
| Patient | Tariq Mehmood | 42101-8765432-1 |
password123 |
hosp-gdg-01 |
Local Development Quickstart
1. Clone & Install Dependencies
git clone https://github.com/anserking/ClinicBell-GDG-Kolachi.git
cd ClinicBell-GDG-Kolachi
npm run setup2. Seed Database & Run Locally
# Seed Neon Cloud Database with sample nodes & doctors
npx tsx backend/scripts/seed.ts
# Launch frontend & backend concurrently
npm run devLive Deployments & Portal
ClinicBell is deployed live in production. Explore the application directly or review the source code on GitHub.