MedMap

Inspiration

Most people know what medication they're taking, but how many actually understand what it's doing inside their body?

Medication information is often buried in dense medical terminology, lengthy articles, and diagrams that don't connect the dots between a condition, a medication, and its biological effects. Even when that information is available, it can be difficult to visualize, especially for people without a medical background.

We wanted to bridge that gap.

MedMap was built around one simple idea: what if you could actually see how your medicine works?

Instead of just reading about a medication, we wanted users to explore the human body, visualize biological mechanisms, and interact with the science behind their treatment. Our goal was to make medication education more approachable, engaging, and empowering for patients, caregivers, and students.

What it does

MedMap is an interactive 3D medication education platform that transforms complicated medical concepts into visual learning experiences.

Users can explore a detailed 3D anatomical model, discover how medications interact with different organs and biological systems, and follow guided lessons that explain the science behind common treatments.

Our platform includes:

Interactive 3D Anatomy: Rotate, zoom, isolate anatomical systems, explore organs, and visualize where medications act in the body.
Medication Explorer: Browse 69 medication guides with accessible explanations, scientific breakdowns, safety information, and educational resources.
Condition Directory: Explore 100 medical conditions and discover relevant medication examples.
Interactive Mechanism Visualizations: See simplified before-and-after representations of how medications affect biological processes.
Patient Stories: Follow fictional patients through guided learning experiences that connect symptoms, anatomy, medication mechanisms, and knowledge checks.
Knowledge Challenges: Test your understanding before and after lessons, receive feedback, and track your learning progress.
Medication Comparisons: Compare medications side by side to understand differences in their mechanisms and clinical roles.
Simple and Scientific Modes: Switch between beginner-friendly explanations and more detailed biological descriptions.
U.S. Medication and Condition Data: Explore population-level prescription and condition statistics using publicly available healthcare survey data.

One of our favorite features is our guided asthma patient story.

Users meet Maya, a fictional patient with asthma, explore her respiratory system through the 3D anatomy viewer, and learn how albuterol helps relax airway smooth muscle. They can interact with a magnified airway visualization, explore the underlying biological pathway, and complete knowledge challenges to reinforce what they've learned.

Rather than simply presenting information, MedMap encourages users to explore, visualize, interact, and understand.

How we built it

We built MedMap as a responsive web application using:

React 19 and TypeScript for our frontend and interactive learning experiences.
Vite for fast development and optimized production builds.
Three.js for rendering and interacting with our 3D anatomical models.
Tailwind CSS for responsive styling and a cohesive interface.
SVG-based animations and illustrations for interactive medication mechanism visualizations.
Lucide React for interface icons.
Playwright for automated browser testing across desktop and mobile experiences.
Vercel for deployment.

For our anatomical visualization, we incorporated reference models from the BoneHub CT dataset and Human Reference Atlas, combining skeletal and organ structures into an interactive viewer. We also implemented anatomical layer controls, organ highlighting, camera interactions, and medication-specific targeting.

We structured our medication education content around authored medication guides, condition mappings, and interactive learning components. Users can navigate between anatomy, mechanisms, comparisons, and quizzes without needing an account.

Our guided patient story connects these individual features into one cohesive learning experience, allowing users to move from a real-world medical scenario to an anatomical explanation and then apply what they've learned.

We also incorporated publicly available 2024 AHRQ Medical Expenditure Panel Survey (MEPS) data to provide additional context about medications and medical conditions in the United States.

Throughout development, we used AI-assisted coding tools to accelerate implementation, iterate on the interface, troubleshoot issues, and refine the experience within the hackathon timeframe.

Challenges we ran into

1. Making complex anatomy interactive

Building an interactive 3D human body was one of our biggest technical challenges. We had to work with anatomical models from different sources, handle differences in model positioning and structure, and create an experience that remained intuitive rather than overwhelming.

We also had to account for incomplete anatomical coverage and make sure the platform didn't imply that our reference models represented a perfectly complete human body.

2. Visualizing invisible biological processes

Showing where a medication acts is relatively straightforward. Showing how it works is much harder.

Medication mechanisms often involve receptors, signaling pathways, and cellular processes that can't be directly observed in a full-body anatomical model.

We addressed this by connecting our 3D anatomy viewer to simplified, interactive mechanism illustrations. This allowed us to move from the organ level to the biological processes happening within it.

3. Balancing medical accuracy with accessibility

We wanted MedMap to be understandable without sacrificing scientific integrity.

Finding the right balance between simple explanations and more technical descriptions required careful consideration. We introduced separate explanation modes and made sure our visualizations were clearly presented as educational illustrations rather than clinically precise simulations.

Because MedMap is a hackathon prototype, we also made its limitations explicit, including the need for independent clinical review.

4. Connecting everything into one experience

A 3D anatomy viewer, medication database, interactive animations, and quizzes are useful individually, but they don't automatically create a compelling educational product.

One of our biggest design challenges was making these features feel connected.

Our solution was to introduce guided patient stories that bring everything together into a structured learning journey.

5. Building and testing under a tight deadline

With limited hackathon time, we had to balance ambitious features with performance, usability, and reliability. We prioritized a complete interactive learning experience over adding features that wouldn't meaningfully improve the final product.

Accomplishments that we're proud of

We're especially proud that MedMap goes beyond being another searchable medication encyclopedia.

We built a platform where users can actually interact with medical concepts instead of only reading about them.

Some of our biggest accomplishments include:

Building an interactive 3D anatomical explorer with organ highlighting, multiple anatomical layers, and system isolation.
Creating a complete guided asthma learning experience that connects a fictional patient scenario, anatomy, medication mechanisms, and knowledge challenges.
Developing interactive visualizations that make concepts like bronchodilation easier to understand.
Incorporating 69 medication guides and 100 medical conditions into a cohesive educational platform.
Implementing side-by-side medication comparisons, including an interactive airway comparison for albuterol and tiotropium.
Integrating public healthcare survey data to give users broader context.
Building a responsive experience that works across desktop and mobile devices.
Deploying a functional, publicly accessible application within the hackathon timeframe.

Most importantly, we're proud of the way MedMap combines technical complexity with a clear human purpose.

The 3D models and animations aren't just there to look impressive. They're there to help people understand something that affects their health.

What we learned

This project taught us that building something technically impressive and building something genuinely useful are two different challenges.

We learned a lot about working with 3D anatomical assets, interactive rendering, component architecture, and responsive UI development. We also gained experience turning complicated scientific information into visual, approachable learning experiences.

One of our biggest takeaways was the importance of designing around the user's learning journey rather than the technology itself.

Initially, the anatomy viewer and medication explorer were compelling features on their own. But connecting them through a guided patient story made the overall experience much more meaningful.

We also learned how important transparency is when building healthcare-related software. Medical visualizations can be powerful educational tools, but they must communicate their limitations clearly and avoid presenting simplified illustrations as precise clinical predictions.

Finally, building MedMap reinforced how much can be accomplished in a short period through rapid iteration, thoughtful prioritization, and effective use of modern development tools.

What's next for MedMap

We see MedMap as the foundation for a more immersive approach to healthcare education.

Our next steps include:

Expanding Patient Stories: Introducing additional guided experiences covering conditions such as diabetes, hypertension, and acid reflux.
Improving Anatomical Visualizations: Expanding validated anatomical coverage and creating more detailed, interactive biological mechanism illustrations.
Personalized Learning Paths: Adapting educational content and challenges to users' existing knowledge and learning progress.
Clinical Review: Working with healthcare professionals to review educational content and improve scientific accuracy.
Learning Outcome Research: Conducting usability studies and evaluating whether interactive visualization improves comprehension and retention.
Educational Partnerships: Exploring how MedMap could support classrooms, healthcare education programs, and patient education initiatives.
Accessibility Improvements: Continuing to improve navigation, performance, and accessibility across devices and learning needs.