Inspiration

The fragmented, multi‑system workflows I experienced during remote care in the pandemic—constant toggling between video calls, emails, phone trees, and PDF portals—inspired me to build a unified space where patients, doctors, and admins all work from the same live data. I wanted to streamline follow‑up reminders, report sharing, and messaging so no one ever has to chase down a document or a chat thread again.


What it does

  • Role‑Based Dashboards: Patients see upcoming appointments and reports; doctors see their daily schedule, patient queue, and message inbox; admins get an overview of clinic load and can manage staff access.
  • Medical Report Management: Upload, preview, annotate, and download lab results and imaging files, all within a secure, auto‑expiring storage bucket.
  • Real‑Time Chat & Notifications: Encrypted messaging between doctor and patient, with read receipts and push‑style toasts for new messages or appointment changes.
  • Prescription Builder: Doctors can draft, edit, and sign prescriptions in‑app; patients can view or download prescribed medications as PDF.
  • PWA‑Enabled Access: Available offline for viewing downloaded reports and queued messages, with “Add to Home” prompts on mobile.

How I built it

  1. Frontend
  • Framework & Styling: Vite + React + TypeScript for fast HMR and type safety, with Tailwind CSS enforcing a mobile‑first, accessible design system.
  • State Management: Zustand stores session info, active chat threads, and offline‑cache flags; React Router handles role‑specific routes.
  • PWA Setup: A custom service worker caches static assets and recent reports, enabling offline report viewing and draft‑mode messaging.

    1. Backend
  • Supabase Auth & Storage: Managed user roles and secure file buckets; row‑level security policies ensure Patients only read their own records, Doctors only theirs, and Admins full access.

  • Realtime Channels: Supabase Realtime powers live chat and appointment updates without manual refresh.

  • Edge Functions & Webhooks: Serverless functions enforce HIPAA‑style rules (auto‑delete reports after a set period) and process file‑upload events.

    1. Integrations & Tooling
  • Date‑fns: Normalized timestamps across time zones in appointment calendars.

  • @dnd‑kit: Accessible drag‑and‑drop UI for doctors to reorder their appointment queue.

  • UUID: Globally unique IDs for all records, preventing collisions in distributed storage.


Challenges I ran into

  • Fine‑Grained Access Control: Crafting Supabase RLS policies to exactly map user roles to data scopes—so that no cross‑access ever slipped through—took multiple iterations and exhaustive policy testing.
  • Offline & Sync Logic: Ensuring that messages composed while offline would sync correctly (and in order) once connectivity returned, without duplication or data loss.
  • File Lifecycle Management: Coordinating automatic expiry of medical reports in storage, invalidating CDN caches, and cleaning up DB references without orphaned pointers.
  • Drag‑and‑Drop Accessibility: Making @dnd‑kit reorderable appointment cards fully keyboard‑navigable and screen‑reader friendly was more complex than mouse‑only interactions.

Accomplishments that I’m proud of

  • End‑to‑End Secure Workflow: From client‑side encryption to serverless auto‑purge rules, patient data never lingers longer than necessary.
  • Sub‑Second Chat Latency: Real‑time messaging feels instantaneous, even with hundreds of concurrent users on the same clinic instance.
  • Zero‑Code Offline Mode: Patients and doctors can both view their last‑synced data without any additional downloads or configurations.
  • Seamless Role Onboarding: A new user (patient or doctor) can sign up, verify their email, and be fully operational within 2 minutes—no manual admin intervention required.

What I learned

  • Advanced RLS Patterns: How to write composable, testable row‑level security policies in Supabase that bridge multiple tables and joins.
  • Optimistic UI Reconciliation: Balancing immediate feedback (e.g., “Message sent”) with server‑confirmed state to avoid ghost notifications or duplicate sends.
  • PWA Cache Strategies: Fine‑tuning service‑worker fetch and stale‑while‑revalidate rules to deliver fresh data without sacrificing offline reliability.
  • HIPAA‑Mindful Design: Thinking through every file path and network call to ensure compliance objectives are baked into the architecture, not just bolted on.

What’s next for Diagnosa

  • Telehealth Video Integration: Embedding secure, low‑latency video calls directly in the patient‑doctor chat stream.
  • Analytics Dashboard for Admins: Real‑time metrics on throughput, average wait times, and resource utilization to optimize clinic operations.
  • AI‑Assisted Triage: A chatbot that gathers symptom details, suggests preliminary triage categories, and flags high‑risk cases for faster attention.
  • Multi‑Clinic Support: Allowing larger hospital networks to spin up isolated “sub‑tenants” with shared billing and centralized admin controls.

Built With

Share this project:

Updates