← Back to workCase study

Travel & Health Advisor

Health risk is part of travel planning, but the information is scattered and clinical. This app puts it on a map you can click and a chatbot you can ask.

RoleFull-stack: interactive map UI, Node API, AI guidance
When2025 · BGSU Hackathon (AI & ML Track winner)
RecognitionBGSU Hackathon · AI & ML Track Winner
The problem

Travel-health guidance lives in dense government tables that are hard to act on. A traveler wants a simple read on where they're going and what to do about it.

The app pairs an interactive world map with AI guidance: click a country for its advisories, then ask a chatbot follow-up questions and generate a vaccination checklist from your own health profile.

How it works

Map UI

A React 18 + Vite front end renders the world with react-simple-maps over TopoJSON boundaries, using D3 for the visualization layer; clicking a country opens its advisory detail panel.

Routing & auth flow

React Router separates the login/signup flow from the main application, with a floating chatbot overlay available across the experience.

Data backend

A Node/Express server serves country-level disease data and stores the user's health profile, which downstream guidance is built from.

AI chatbot

Mistral AI powers conversational health queries, answering follow-ups in the context of the selected country and the traveler's profile.

Checklist output

The profile plus advisory data turn into a concrete vaccination checklist, moving the user from 'here's the information' to 'here's what to do'.

Key decisions

Map-first interaction

Geography is the natural index for travel risk, so the map is the primary control surface. react-simple-maps + D3 over TopoJSON kept it lightweight while still feeling interactive.

Pinned to React 18 on purpose

react-simple-maps' peer dependencies were incompatible with React 19, so the stack was deliberately held at React 18 and that constraint was documented for the rest of the team. A small but real engineering call under time pressure.

Profile-driven output, not generic advice

The chatbot and checklist both read the stored health profile, so guidance is personalized to the traveler rather than a one-size-fits-all advisory dump.

Outcome
Won the AI & ML track at the BGSU Hackathon.
Turned clinical advisory data into a clickable, conversational experience.
Profile → checklist flow that ends in an actionable output, not just a readout.

Built with

React 18Vitereact-simple-mapsD3.jsReact RouterNode.jsExpressMistral AIAxios
View the codeExplore more work