-
-
Med-ID
Inspiration
The inspiration for Offline Med-ID AI came from a terrifying reality in emergency medicine: the "Information Blackout." During the "Golden Hour"—the first 60 minutes where medical intervention is most effective—first responders often treat unconscious patients blindly. Current digital health IDs are fragmented across ecosystems (iOS vs. Android) or fail entirely in rural "dead zones" and disaster areas where there is no internet. We wanted to build a universal, indestructible safety net that speaks for the patient when they can't.
What it does
Offline Med-ID AI is a decentralized emergency dashboard. It allows users to encode their "Critical Triad" (Blood Type, Allergies, and ICE Contacts) into a secure, high-density QR code.
- Universal Access: Any smartphone can scan the code to instantly launch a "Responder Dashboard."
- AI Advocate: A local AI engine analyzes the patient's data to suggest protocols (e.g., "Avoid Penicillin") and prevent fatal drug interactions.
- Vital-Vision: Using on-device computer vision (rPPG), the app can estimate a patient's heart rate simply by pointing the camera at their face.
- 100% Offline: Once the PWA is installed, it requires zero kilobytes of data to generate or read IDs.
How we built it
We built a production-grade web application using Vite, React, and TypeScript.
- Architecture: To ensure 100% privacy, we pioneered a "Zero-Server" model. Data is compressed and encoded into the URL hash, meaning it exists only in the QR code and never touches a database.
- UI/UX: Designed with Tailwind CSS and Shadcn/UI, focusing on high-contrast accessibility for elderly users and high-pressure emergency environments.
- AI Layer: We integrated Transformers.js to run LLM logic locally in the browser and MediaPipe for the Vital-Vision face-tracking pulse detection.
- Deployment: Optimized as a Progressive Web App (PWA) for instant mobile installation and offline persistence.
Challenges we ran into
The biggest technical hurdle was Data Density vs. Scannability. We had to fit complex medical JSON, AI instructions, and personal data into a QR code that remains scannable even by low-end cameras. We solved this through custom Base64 compression and high-level error correction (Level H). Another challenge was optimizing the rPPG (vital scanning) algorithm to work smoothly on mobile browsers without overheating the device.
Accomplishments that we're proud of
We are incredibly proud of achieving 100% Offline AI Functionality. Showing that a browser can estimate vitals and provide medical protocol suggestions without a single API call is a huge win for decentralized tech. Additionally, our Zero-Server architecture means the project is "Privacy-by-Design," effectively bypassing the massive data-liability hurdles usually found in HealthTech.
What we learned
We learned that in emergency tech, Simplicity > Complexity. A tool is only useful if it works in a basement with no signal. We gained deep experience in client-side data persistence, PWA lifecycle management, and the fascinating world of Remote Photoplethysmography (rPPG) for non-contact health monitoring.
What's next for Med-ID
The goal is to move from a prototype to a public utility. We plan to:
- Physical Distribution: Partner with local transit authorities to offer "Med-ID" stickers for motorcycle helmets and driver's licenses.
- NGO Integration: Work with disaster relief organizations to provide IDs for elderly populations in hurricane-prone zones.
- AI Expansion: Increase the local knowledge graph to include hundreds of emergency drug contraindications and localized first-aid guidance.
Built With
- framer-motion
- geolocation-api
- github
- html-to-image-+-jspdf
- lucide-react
- mediapipe-facemesh-+-react-webcam
- pwa-service-workers
- qrcode.react
- react-19-+-typescript
- react-hook-form-+-zod
- sms:-uri-handoff
- tailwind-css-v4
- vite
- web-speech-api
