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
- 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.
- 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.
- 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
- css
- html
- javascript
- plpgsql
- typescript
Log in or sign up for Devpost to join the conversation.