Inspiration
Over 70% of patient medical histories are fragmented across lost paper receipts, handwritten prescriptions, and isolated clinic portals. During medical checkups or emergency room trauma triage, doctors and paramedics lack instant access to a patient's blood group, severe allergies, and active medications.
Furthermore, traditional smart health solutions rely on expensive, proprietary cloud AI APIs (like OpenAI or Gemini), creating recurring subscription costs and exposing sensitive patient health data to third-party cloud servers. We were inspired to build Health-One—a privacy-first, zero-cost lifetime digital health portal that bridges patients and healthcare providers seamlessly.
What it does
Health-One is a unified digital health record system that turns paper document chaos into a single source of truth for lifetime health:
- Open-Source Client-Side OCR Scanner: Patients upload photos or PDFs of lab reports or prescriptions. Our browser-native engine automatically extracts Systolic/Diastolic BP, Heart Rate, SpO2, and line-by-line prescriptions 100% locally on-device with ZERO cloud API costs.
- Active Medication Deduplication: Case-insensitive matching algorithms prevent dangerous duplicate drug prescriptions across different doctors.
- Live Doctor ↔ Patient Interconnection:
- Patients request appointment slots and track review statuses (Pending, Confirmed, Rescheduled, Cancelled).
- Doctors view patient records, record consultation notes (
visits), and e-prescribe medications that sync live to the patient's timeline and active medications list.
- Emergency QR Access & Audit Trail: Paramedics scan a public emergency QR code (
/emergency/:code) for instant access to critical blood groups and allergies, while every view is automatically logged into an immutable Access Audit Trail. - Global Instant Search & Mobile Responsiveness: Search across medications, lab reports, doctor checkups, and analytics in under 100ms with a touch-optimized mobile navigation drawer.
How we built it
We built Health-One using modern, high-performance web architecture:
- Frontend & UI: Built with React 18, TypeScript, Vite, Tailwind CSS, and Framer Motion for smooth glassmorphism UI transitions.
- Local OCR Processing: Integrated Tesseract.js running inside dedicated browser web worker threads for zero-cost, privacy-preserving document parsing.
- Backend & Database: Powered by Supabase PostgreSQL utilizing strict Row Level Security (RLS) policies (
auth.uid() = patient_id) for secure multi-tenant data isolation. - State & Sync Layer: Custom data service modules (
patientRecords.ts,patientAppointments.ts,patientEmergency.ts) featuring automatic LocalStorage & Data URL fallbacks for 100% offline resilience.
Challenges we ran into
- Client-Side Document Parsing & Noise Reduction: OCR on handwritten or low-resolution medical receipts frequently produced raw text noise. We engineered custom regular expressions and fuzzy string pattern matchers to consistently isolate blood pressure fractions (e.g. 128/82 mmHg), heart rates, and medication dosages.
- Active Medication Deduplication: Prevented duplicate drug entries across different doctor uploads by normalizing medicine names with case-insensitive string matching before database insertion.
- Database RLS & Unauthenticated Emergency Access: Public emergency QR scans needed to expose life-saving blood types without exposing private medical records. We configured tailored Supabase security policies and RPC functions to safely serve public emergency profiles while capturing responder audit logs.
Accomplishments that we're proud of
- 🚀 Eliminated 100% of Cloud AI Costs: Replaced expensive third-party cloud APIs with a completely free, open-source local browser OCR engine.
- ⚡ Sub-100ms Global Instant Search Engine: Real-time cross-category search matching across prescriptions, lab files, visits, and emergency codes.
- 📲 Fully Responsive Touch UI: Built a mobile-first interface complete with a slide-over mobile drawer navigation for smartphones and tablets.
- 🔒 Zero-Trust Privacy Architecture: Sensitive medical document parsing happens 100% inside the user's browser worker thread, ensuring medical scans never leak to external AI servers.
What we learned
- How to spawn and manage browser Web Workers using Tesseract.js for heavy parallel computing without freezing the UI thread.
- Deep experience in crafting PostgreSQL Row Level Security (RLS) policies and real-time database view aggregations (
patient_timeline_view). - Designing accessible, high-contrast healthcare user interfaces adhering to strict accessibility and mobile-first principles.
What's next for Health-One-Portal
- 💊 Automated Drug-Drug Interaction Warning Engine: Real-time cross-referencing of new doctor prescriptions against active patient allergy lists and clinical drug interaction databases.
- ⌚ Wearable IoT Telemetry Sync: Real-time Bluetooth integration for smartwatches and continuous glucose monitors (CGM).
- 🌐 FHIR & ABHA Interoperability: Exporting unified health records into standardized FHIR JSON format for universal hospital EHR compatibility.
Built With
- css
- postgresql
- qrcode.react
- react
- rls
- supabase
- tailwind
- tesseract.js
- typescript
- vite
Log in or sign up for Devpost to join the conversation.