# Project export: Hero This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2026 - Tagline: You could save a life. - Devpost: https://devpost.com/software/organmatch - GitHub: https://github.com/angelinawwu/treehacks26 - Video: https://www.youtube.com/embed/K8HsTLNOgJI?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 2 GitHub contributor(s) — angelinawwu (23 commits), abao27 (3 commits) ## Devpost submission (written by the team) ### Inspiration At the time of writing this, the United Network for Organ Sharing (UNOS) reports there are 108,562 people on the national transplant list. Additionally, the NIH reports that 17 people die waiting for an organ each day. This means that throughout the mere duration of this hackathon, approximately 26 people died awaiting an organ in the U.S and nearly 240 new names were added (Penn Medicine). This unfortunate reality is not due to the inevitability of death but the scarcity of organs: a scarcity that can be greatly reduced by increasing the number of registered donors and living donors. This project was largely inspired by the Nobel Prize winning economic research by Al Roth and Judd Kessler that encourages donor registration through a priority policy for people that were already organ donors. By rewarding those willing to make a scarce resource available, implementation in Israel and Singapore saw a dramatic increase in registration rates and living donor donation. The current U.S. organ registration system not only fails to implement this policy but remains outdated with its current registration system. Current organ registration is largely relegated to checking a box when getting your driver’s license, completely excluding those who don’t have a driver’s license (I’m working on it). Nevertheless, such a system fails to reflect the life determining severity of maximizing the number of organ donors. ### What it does Our app, Hero, makes registering to be an organ donor easier and implements the aforementioned policy by alerting you once you hit the 3-year mark as an organ donor where you receive a level of priority on the UNOS donor list if you ever (hopefully never) need an organ. If you're “willing to spare” and eligible it uses the stable matching algorithm to match you with possible recipients and once you pick a match and a timeline sends the information to a hospital to schedule surgery. After donation, you are given the highest level of priority that can be passed off to a loved one waiting for an organ. Granted, sacrificing an organ is the only way you can contribute to the health of others, Hero given a zip code finds close by blood donation centers for you to donate blood. When it comes to illness, we are too often left powerless in protecting those we love most from suffering, Hero's easier donor registration and organ donor matching allows us to indirectly help those we love by directly helping those others love. ### How we built it We built Hero as a mobile app using React Native and Expo SDK 54 with TypeScript. Navigation is handled by Expo Router (file-based routing), while we used NativeWind (Tailwind CSS for React Native) for styling to keep UI development fast and consistent. The matching algorithm was originally prototyped in Python, then ported entirely to TypeScript. It scores recipients using blood type compatibility, medical priority factors (waiting time, sensitization, age, eGFR), and geographic proximity (converting zip codes to coordinates via the zipcodes package and applying Haversine distance). Eligibility screening cross-references user responses against a rules table derived from real donor disqualification criteria. We integrated the Overpass API/OpenStreetMap to query for nearby blood donation centers and blood banks based on the user's zip code, giving real geographic results without needing API keys. Encryption uses AES-256-GCM via the Web Crypto API, ported from our Python reference implementation. The app runs entirely frontend-side with in-memory auth and mock patient records, but would include a comprehensive backend database in a real-world application. ### Challenges we ran into : Design to dev: Converting a Figma design file into code with intuitive layout for multiple screen sizes Python → TypeScript: Porting the matching logic and AES-256-GCM encryption while keeping behavior identical Frontend-only setup: Deciding where to put auth, API calls, and matching when there’s no backend Accomplishments we're proud of: Encryption: Successfully implementing HIPAA-compliant encryption of data! App development: Creating our very first mobile app with React Native Intuitive UI: Combining design with development to create an app that feels human-first and accessible User flow: Onboarding, eligibility screening, matching, scheduling, and thank-you screen connected end-to-end Live blood drives: OpenStreetMap API integration to show real donation sites by zip code, no API key required Domain-aware matching: Matching based on blood type, recipient priority, and geographic distance. ### What we learned When designing for healthcare, the importance of erring on the side of caution instead of leaving things to chance. When determining matching, we had to make sure the questionnaire was exhaustive and learned to be quick to disqualify potential donors, sacrificing donor match maximization to ensure the safety and compatibility of all matches. None of us had extensive hackathon experience or had ever developed a mobile app before, so this was a huge and exciting learning experience. We learned a lot about the thought behind design decisions and how to collaborate on moving parts to ensure a working product. ### What's next We’re aware that ultimately the success of our application relies on policy reform; however, we thought Treehacks ( i.e.“boiling the ocean” ) called for innovation that transcended outdated and negligent infrastructure. Regardless, with improvements on the encryption logic to ensure user privacy, optimized weighting for matching and connection to national health organizations, Hero can hopefully evolve to facilitate plasma and liver donation through matching as well. In addition to allowing both hospitals and users quick access to their donor status. We hope the development of this application will trigger a much needed reform of NOTA and UAGA laws along with making registration for organ donors more accessible. Our team is sure that, Hero, policy allowing, revolutionizes organ donation and would undoubtedly save countless lives as seen in other countries. Not to mention, facilitating generosity and challenging the way we think about our own mortality. ## README (from the GitHub repository) # Hero Save lives. Be a hero. A human-first mobile app for organ donation. ## Overview Hero helps users register as organ donors, track their donor status, and explore living kidney/liver donation. The app includes: - **Onboarding & account creation** — Profile setup with medical info, security questions, and authentication - **Donor dashboard** — Status tracker, blood drive finder, and living donation CTA - **Living donor path** — Education, eligibility screening (5-part questionnaire), and preference setting for directed vs. altruistic donation - **Potential matches** — Compatibility-based recipient matching The project uses a frontend-only architecture with mock data and in-memory auth. Encryption (AES-256-GCM) and matching logic are implemented in TypeScript within the frontend. ## Tech Stack - **React Native** + **Expo** (SDK 54) - **Expo Router** — File-based navigation - **NativeWind / Tailwind CSS** — Utility-first styling - **TypeScript** - **Phosphor Icons** - Fonts: Inria Serif, Archivo, Geist Mono ## Project Structure ``` treehacks26/ ├── frontend/ # Expo/React Native app │ ├── app/ │ │ ├── (auth)/ # Welcome, Login, Medical Info, Affirmation │ │ └── (tabs)/ # Home, Donate, Profile │ ├── components/ │ ├── constants/ │ ├── contexts/ # AuthContext (in-memory user state) │ └── services/ # API, encryption, records, mockData ├── backend/ # Reference implementations (Python) │ ├── encrypt/ # AES-256-GCM encryption (Python) │ ├── sm_alg/ # Priority/matching logic │ └── records.json └── README.md ``` ## Getting Started ### Prerequisites - Node.js (v18+) - npm or yarn - Xcode (for iOS) or Android Studio (for Android) - Expo Go app (optional, for physical device testing) ### Installation 1. Clone the repo and install dependencies: ```bash cd frontend npm install ``` 2. Start the development server: ```bash npm start ``` 3. Run on a platform: - **iOS simulator**: Press `i` in the terminal, or run `npm run ios` - **Android emulator**: Press `a` in the terminal, or run `npm run android` - **Web**: Press `w` in the terminal, or run `npm run web` - **Physical device**: Scan the QR code with Expo Go ## Features ### Authentication (Frontend-Only) - **Register** — Create account with first name, last name, birthday, gender, blood type, SSN, security question, and password - **Login** — Sign in with first name, last name, and password - Data is kept in memory only (no persistence) — suitable for demos and prototyping ### Eligibility Screening A 5-part questionnaire covering: 1. Health conditions (kidney disease, diabetes, blood pressure, cancer, surgeries, heart disease) 2. Other conditions (liver, autoimmune, blood disorders, lung, neurological, psychiatric) 3. Infections & family history 4. Lifestyle (smoking, alcohol, drugs, medications, pregnancy) 5. Risk factors (incarceration, sexual behavior, needle sharing, travel, etc.) Each question supports Yes, No, and Don't know. ### Living Donation Flow 1. **Education** — Information on living kidney donation and laparoscopic surgery 2. **Screening** — Complete the eligibility questionnaire 3. **Preferences** — Choose to donate to a specific person or altruistically 4. **Matches** — View potential recipients with compatibility scores ## Backend Reference The `backend/` folder contains Python implementations used as reference: - **encrypt/** — AES-256-GCM encryption (ported to TypeScript in `frontend/services/encryption.ts`) - **sm_alg/** — Priority scoring and matching logic - **records.json** — Sample recipient and donor records (ported to `frontend/services/recordsData.ts`) ## License Private — TreeHacks 2026 ## Detected evidence (automated analysis) Indexed codebase: 64 recognized source files, 201 KB. - CSS (language) — detected in the code - JavaScript (language) — detected in the code - Python (language) — detected in the code - React (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code - Google Gemini (technology) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (77 of 77) ``` .gitignore backend/.file.swp backend/encrypt/decrypt.py backend/encrypt/encrypt.py backend/encrypt/requirements.txt backend/records.json backend/sm_alg/logic.ts backend/sm_alg/matching.ts backend/sm_alg/simulation.ts backend/sm_alg/types.ts frontend/.gitignore frontend/.vscode/extensions.json frontend/.vscode/settings.json frontend/app.json frontend/app/_layout.tsx frontend/app/(auth)/_layout.tsx frontend/app/(auth)/affirmation.tsx frontend/app/(auth)/login.tsx frontend/app/(auth)/medical-info.tsx frontend/app/(auth)/welcome.tsx frontend/app/(tabs)/_layout.tsx frontend/app/(tabs)/donate.tsx frontend/app/(tabs)/index.tsx frontend/app/(tabs)/profile.tsx frontend/app/blood-drives.tsx frontend/app/donor-ineligible.tsx frontend/app/donor-questionnaire.tsx frontend/app/donor-result.tsx frontend/app/donor-schedule.tsx frontend/app/donor-thank-you.tsx frontend/app/modal.tsx frontend/app/profile-medical-profile.tsx frontend/app/profile-notifications.tsx frontend/app/profile-personal-info.tsx frontend/app/profile-privacy-security.tsx frontend/app/share-impact.tsx frontend/babel.config.js frontend/components/Button.tsx frontend/components/Card.tsx frontend/components/external-link.tsx frontend/components/haptic-tab.tsx frontend/components/hello-wave.tsx frontend/components/parallax-scroll-view.tsx frontend/components/ProgressBar.tsx frontend/components/themed-text.tsx frontend/components/themed-view.tsx frontend/components/ui/collapsible.tsx frontend/components/ui/icon-symbol.ios.tsx frontend/components/ui/icon-symbol.tsx frontend/constants/eligibilityQuestions.ts frontend/constants/theme.ts frontend/contexts/AuthContext.tsx frontend/eligibilityQs.txt frontend/eslint.config.js frontend/global.css frontend/hooks/use-color-scheme.ts frontend/hooks/use-color-scheme.web.ts frontend/hooks/use-theme-color.ts frontend/ineligible.csv frontend/metro.config.js frontend/nativewind-env.d.ts frontend/package.json frontend/README.md frontend/scripts/reset-project.js frontend/services/api.ts frontend/services/bloodDrives.ts frontend/services/encryption.ts frontend/services/matching.ts frontend/services/mockData.ts frontend/services/records.ts frontend/services/recordsData.ts frontend/tailwind.config.js frontend/tsconfig.json package.json README.md test_logic.js userflow.md ``` ### Dependencies - backend/encrypt/requirements.txt: pip@freeze > requirements.txt - frontend/package.json: @expo-google-fonts/archivo@^0.4.2, @expo-google-fonts/geist-mono@^0.4.1, @expo-google-fonts/inria-serif@^0.4.1, @expo/vector-icons@^15.0.3, @react-navigation/bottom-tabs@^7.4.0, @react-navigation/elements@^2.6.3, @react-navigation/native@^7.1.8, @types/react@~19.1.0, @types/zipcodes@^8.0.5, eslint@^9.25.0, eslint-config-expo@~10.0.0, expo@~54.0.33, expo-constants@~18.0.13, expo-font@~14.0.11, expo-haptics@~15.0.8, expo-image@~3.0.11, expo-linking@~8.0.11, expo-router@~6.0.23, expo-splash-screen@~31.0.13, expo-status-bar@~3.0.9, expo-symbols@~1.0.8, expo-system-ui@~6.0.9, expo-web-browser@~15.0.10, nativewind@^4.2.1, phosphor-react-native@^3.0.3, react@19.1.0, react-dom@19.1.0, react-native@0.81.5, react-native-gesture-handler@~2.28.0, react-native-reanimated@~4.1.1, react-native-safe-area-context@~5.6.0, react-native-screens@~4.16.0, react-native-web@~0.21.0, react-native-worklets@0.5.1, tailwindcss@^3.4.19, typescript@~5.9.2, zipcodes@^8.0.0 - package.json: phosphor-react-native@^3.0.3 ### Recent commits (newest first) - cleanup - capitalization - mb - homepage - tabs in profile and other stuff - styling and things - archivo font weights - blood drive - selection, scheduling - location matching - ALGO - donor questionnaire pipeline - we can't say that - readme - user auth, mock - Merge branch 'main' of https://github.com/angelinawwu/treehacks26 - change to csv and fix formats - Merge branch 'main' of https://github.com/angelinawwu/treehacks26 - h - ineligible responses ## Key source files (fetched from GitHub, selected and truncated for size) ### userflow.md ```markdown Organ Scarcity Solution: Primary User Flow 1. Onboarding & Verification Sign-up: User creates a single-account profile (addressing your "one account" research point). Medical Data Entry: Input blood type and demographic info. Identity Sync: Connect with hospital/ID records to verify current donor status. The "Affirmation": User confirms or updates their donor status for the current year. 2. The Donor Dashboard Status Tracker: Displays "Member Status" (e.g., Bronze, Silver, Gold based on years of being a registered donor). Action Center: Find Local Blood Drives: Map view of nearby locations. "Willing to Spare?": A specialized CTA for living kidney/liver donation. 3. Living Donor Path (The "Matching System") If the user selects "Willing to Spare," the flow becomes a high-stakes vetting process: Education Phase: Information on surgery implications, recovery timelines, and hospital coordination. Compatibility Screening: Detailed questionnaire to determine what might eliminate them as a donor. Preference Setting: * Option to designate "Highest Priority" to close kin. Option to enter a Swap Program (If I donor to a stranger, my kin moves up the list). 4. The Matching Engine (Backend Logic) Once a user is verified and compatible, the algorithm (Al Roth/Graph Theory inspired) takes over: Direct Match Search: Finds a proximal match on the waitlist. Cycle Detection (2-way/3-way swaps): If a direct match for a loved one isn't found, the system looks for "chains" where Donor A gives to Recipient B, and Donor B gives to Recipient A. Post-Surgery Priority: System automatically updates the donor’s profile to "High Priority" status for future needs, as a "thank you" for their living donation. ``` ### package.json ``` { "dependencies": { "phosphor-react-native": "^3.0.3" } } ``` ### frontend/package.json ``` { "name": "frontend", "main": "expo-router/entry", "version": "1.0.0", "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "lint": "expo lint" }, "dependencies": { "@expo-google-fonts/archivo": "^0.4.2", "@expo-google-fonts/geist-mono": "^0.4.1", "@expo-google-fonts/inria-serif": "^0.4.1", "@expo/vector-icons": "^15.0.3", "@react-navigation/bottom-tabs": "^7.4.0", "@react-navigation/elements": "^2.6.3", "@react-navigation/native": "^7.1.8", "expo": "~54.0.33", "expo-constants": "~18.0.13", "expo-font": "~14.0.11", "expo-haptics": "~15.0.8", "expo-image": "~3.0.11", "expo-linking": "~8.0.11", "expo-router": "~6.0.23", "expo-splash-screen": "~31.0.13", "expo-status-bar": "~3.0.9", "expo-symbols": "~1.0.8", "expo-system-ui": "~6.0.9", "expo-web-browser": "~15.0.10", "nativewind": "^4.2.1", "phosphor-react-native": "^3.0.3", "react": "19.1.0", "react-dom": "19.1.0", "react-native": "0.81.5", "react-native-gesture-handler": "~2.28.0", "react-native-reanimated": "~4.1.1", "react-native-safe-area-context": "~5.6.0", "react-native-screens": "~4.16.0", "react-native-web": "~0.21.0", "react-native-worklets": "0.5.1", "tailwindcss": "^3.4.19", "zipcodes": "^8.0.0" }, "devDependencies": { "@types/react": "~19.1.0", "@types/zipcodes": "^8.0.5", "eslint": "^9.25.0", "eslint-config-expo": "~10.0.0", "typescript": "~5.9.2" }, "private": true } ``` ### backend/encrypt/requirements.txt ``` pip freeze > requirements.txt ``` ### frontend/app/_layout.tsx ```typescript import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; import { Stack } from 'expo-router'; import { StatusBar } from 'expo-status-bar'; import 'react-native-reanimated'; import '../global.css'; import { useFonts, InriaSerif_400Regular } from '@expo-google-fonts/inria-serif'; import { Archivo_300Light, Archivo_400Regular } from '@expo-google-fonts/archivo'; import { GeistMono_300Light } from '@expo-google-fonts/geist-mono'; import { useColorScheme } from '@/hooks/use-color-scheme'; import { Colors } from '../constants/theme'; import { useEffect } from 'react'; import * as SplashScreen from 'expo-splash-screen'; import { AuthProvider } from '../contexts/AuthContext'; SplashScreen.preventAutoHideAsync(); export const unstable_settings = { // Ensure any route can link back to first page of initial stack initialRouteName: '(auth)', }; export default function RootLayout() { const colorScheme = useColorScheme(); const [loaded] = useFonts({ InriaSerif_400Regular, Archivo_300Light, Archivo_400Regular, GeistMono_300Light, }); useEffect(() => { if (loaded) { SplashScreen.hideAsync(); } }, [loaded]); if (!loaded) { return null; } return ( ); } ``` ### frontend/app/(auth)/_layout.tsx ```typescript import { Stack } from 'expo-router'; import { Colors } from '../../constants/theme'; export default function AuthLayout() { return ( ); } ``` ### frontend/app/(tabs)/_layout.tsx ```typescript import React from 'react'; import { House, Heart, User } from 'phosphor-react-native'; import { Tabs } from 'expo-router'; import { Colors } from '../../constants/theme'; import { useColorScheme } from '@/hooks/use-color-scheme'; export default function TabLayout() { const colorScheme = useColorScheme(); return ( , }} /> , }} /> , }} /> ); } ``` ### frontend/app/(tabs)/index.tsx ```typescript import React, { useEffect, useState } from 'react'; import { View, Text, ScrollView, SafeAreaView, RefreshControl, TouchableOpacity } from 'react-native'; import { router } from 'expo-router'; import { Card } from '../../components/Card'; import { Button } from '../../components/Button'; import { api } from '../../services/api'; import { MapPin, HandHeart } from 'phosphor-react-native'; import { ProgressBar } from '../../components/ProgressBar'; import { useAuth } from '../../contexts/AuthContext'; const MILESTONE_YEARS = 3; function formatDonorDuration(yearsRegistered: number): string { const totalMonths = Math.round(yearsRegistered * 12); const years = Math.floor(totalMonths / 12); const months = totalMonths % 12; if (years > 0 && months > 0) return `${years} years, ${months} months.`; if (years > 0) return `${years} ${years === 1 ? 'year' : 'years'}.`; return `${months} ${months === 1 ? 'month' : 'months'}.`; } function getProgressToMilestone(yearsRegistered: number): number { return Math.min(yearsRegistered / MILESTONE_YEARS, 1); } function formatMonthsRemaining(yearsRegistered: number): string { const monthsRemaining = Math.max(0, Math.ceil((MILESTONE_YEARS - yearsRegistered) * 12)); if (monthsRemaining === 0) return '0'; return `${monthsRemaining} ${monthsRemaining === 1 ? 'MONTH' : 'MONTHS'}`; } export default function DashboardScreen() { const { user: authUser } = useAuth(); const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [refreshing, setRefreshing] = useState(false); const loadData = async () => { try { const userData = await api.getUserProfile(); setUser(userData); } catch (error) { console.error('Failed to load user data', error); } finally { setLoading(false); setRefreshing(false); } }; useEffect(() => { loadData(); }, []); const onRefresh = () => { setRefreshing(true); loadData(); }; if (loading) { return ( Loading... ); } return ( } > Hello, {authUser?.firstName ?? user?.name?.split(' ')[0] ?? ''}. Willing to spare? Living donation is a profound way to save a life now. Learn more about kidney and liver donation.