profile creation screen
qr code screen

Inspiration

Medical emergencies happen when people least expect them — and first responders often have no way to know a patient's allergies, medications, or who to call. We wanted to solve the "unconscious patient" problem with something anyone could set up in minutes and carry everywhere.

What it does

mediCode lets users create a digital emergency medical profile and attach it to a QR code. In an emergency, a first responder scans the code and instantly sees the patient's blood type, allergies, current medications, medical conditions, and emergency contacts — no app required. Profiles can also trigger an AI-generated voice alert for hands-free situations.

How we built it

React 18 + Vite on the frontend, styled with Tailwind CSS. Profiles are stored in Supabase (PostgreSQL). QR codes are generated client-side with qrcode.react. Translation across 40+ languages is powered by the Google Translate API with automatic geolocation-based language detection via OpenStreetMap. ElevenLabs handles the AI voice alerts. The app is a PWA with Workbox caching so profiles are accessible offline, and Vercel serverless functions proxy our backend API calls.

Challenges we ran into

Getting translation to feel seamless — we had to translate all visible text at once rather than field-by-field to avoid flicker and missing labels. Offline support also required careful caching strategy design: profiles use NetworkFirst so they're always fresh when online but still available offline.

Accomplishments that we're proud of

A first responder can scan a QR code and read a full medical profile in their native language in under three seconds — no account, no app, no friction.

What we learned

Geolocation-based language detection adds a lot of polish with minimal code. PWA caching strategy choices matter more than most people realize for real-world reliability.