MedMap

MedMap is a cross-platform mobile health companion built with Expo and React Native. It helps users track vitals, maintain medical records, visualize medication-to-condition relationships, and query their history through an in-app assistant.

Hackathon Scope

• Unified patient profile with emergency context
• Doctor visit and prescription capture
• Daily medication checklist and adherence logging
• Vital tracking (heart rate, calories, steps, weight)
• Graph-based MedMap visualization for conditions and medications
• In-app health assistant grounded in the user record

System Architecture

Client Application Layer

• app/ contains route-based screens using Expo Router
• app/(auth)/ handles authentication and account flows
• app/onboarding.tsx collects required patient and emergency data
• app/(tabs)/ provides the main product surfaces: Home, Records, Graph, Chat, Profile

Domain and Data Access Layer

• lib/medical-records.ts implements profile, contacts, visits, medications, checklist, and search operations
• lib/vitals.ts manages vital writes and latest/history reads
• lib/queries.ts builds contextual records for the assistant
• lib/medmap/ transforms records into graph payloads used by the visualization
• lib/emergency-data-context.tsx provides shared profile and contact state across screens

Integration Layer

• Clerk handles authentication and session management
• Supabase provides persistent storage accessed through lib/supabase.ts
• OpenRouter/OpenAI client in lib/medbot.ts powers the MedBot chat response pipeline

Application Flow

1. User signs in with Clerk.
2. Onboarding enforces baseline profile and emergency contact completeness.
3. Tabs expose operational modules:
   • Home: quick vitals and medication checklist interactions
   • Records: doctor entries and prescription capture
   • Graph: interactive condition-medication network
   • Chat: assistant replies grounded in profile, visit, and medication history
   • Profile: emergency details management and sign-out
4. All persistent actions route through typed access functions in lib/.

Data Model (Logical)

Core entities used by the app:

• profiles
• emergency_contacts
• doctor_visits
• medications
• medication_adherence
• vitals

The records module composes these entities to produce search views, checklist state, and graph payload inputs.

Tech Stack

• Expo SDK 54
• React Native 0.81 / React 19
• Expo Router
• Clerk (@clerk/clerk-expo)
• Supabase (@supabase/supabase-js)
• NativeWind + Tailwind
• React Native Reusables + RN Primitives
• OpenAI SDK against OpenRouter API

Environment Configuration

Create .env in the project root.

Required:

• EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY
• EXPO_PUBLIC_SUPABASE_URL
• EXPO_PUBLIC_SUPABASE_KEY

Required for Chat assistant:

• EXPO_PUBLIC_OPENROUTER_API_KEY

Local Development

Install dependencies:

npm install

Run development server:

npm run dev

Platform targets:

npm run ios
npm run android
npm run web

Production Notes

• Keep environment variables injected per environment.
• Restrict API keys and rotate if exposed.
• Validate Supabase schema compatibility before release.
• Confirm mobile build settings in app.json before submission.

Demo-Ready Features

• End-to-end auth and onboarding flow
• Real-time medication and doctor record updates
• Visual MedMap exploration with filters and detail drawer
• Context-aware chat assistant for medication and visit history
• Cross-platform deployment path (iOS, Android, Web)

Screenshots