Work

Case study

HydroSync mobile prototype

A React Native concept for checking hydration trends and keeping an eye on family members from one mobile flow.

Mobile UI and backend team projectMarch 23, 20242 min read
HydroSync mobile prototype project visual

The concept

HydroSync explores a simple question: how could a mobile app show personal hydration trends while also making it easy to check on family members?

The mobile interface was built in React Native with React Navigation. The wider team project also included a Django API, Python data processing, and an AWS deployment.

Main flows

The app includes sign-up and login screens, a personal hydration dashboard, a family-member list, an add-member form, and a call screen.

The dashboard combines a progress ring with a weekly line chart. The family view gives each person a plain status such as hydrated, mildly dehydrated, or severely dehydrated, then exposes a quick route to call them.

Why the navigation mattered

The product serves two related jobs: checking your own trend and checking someone else. I kept those jobs in separate screens and used a small stack navigator rather than forcing every status into one dashboard.

That made the prototype easier to reason about and gave the call action a clear place in the flow.

Current limitations

The published repository is the mobile interface snapshot rather than the complete deployed system. Its chart uses demonstration data, and it should be read as a prototype rather than a connected health product.

Those boundaries are important because health-related interfaces should not imply certainty they do not have.

Next pass

I would start by tightening the data contract and consent model before adding more screens. The next technical work would be accessible chart summaries, clearer API failure states, and explicit handling for missing or stale readings.