Hero image for HydrtHero image for Hydrt

Hydrt

Drinking enough water is very important for a healthy lifestyle. Unfortunately, it’s also not that easy for many people in this world of sweet soft drinks and constant distractions—me included.

I had no idea how much or little water I was drinking every day and so I started looking for a way to track just that. There are plenty of apps out there that allow just that, but none of them fit my needs of simplicity and privacy, so I set out to build my own.

That’s how Hydrt was born. A simple progressive web app with one task: collecting data about how much water the user drinks throughout the day and displaying that in a clear and pleasant way.

While I do have a lot of experience building progressive web apps in Vue by now, I took the opportunity with this one to focus on some key areas:

  • Learning Vite and the Vue 3 Composition API

  • Providing a delightful user experience through micro interactions

  • Upping my motion design game with playful transitions and animations especially during the onboarding of a new user

The end result is an app that allow a user to add consumed liquid in just two taps (one to open the app, one to add the liquid) and displays the collected data in a clean and simple, yet informative way that simply flows like water—to quote an early user.

  • hydration tracking
  • progressive web app
  • ui
  • ux
  • motion
Three screenshots of Hydrt showing the main views: stats, entries, and settings. The entries view is highlighted and shows a half-filled globe of liquid above a list of entries of how much liquid was consumed at a given point in time

😢
Sorry, but embedded content is not available when JavaScript is deactivated.

Micro interactions are a great way to keep the user engaged over a long time—if used subtly. So I sprinkled little animations and motion all throughout the app that can provide delight when first noticed, but easily fade into the background over time while the app is used.

A screenshot showing the weekly hydration graph in HYDRT. The entry for Friday shows a little heart because the goal of 2800ml was met

Showing data in a clean and informative way was a priority for this project. While I had initially planned on showing it as a bar-diagram, during the implemenation phase I decided a rounded graph would be better suited to fit the wavy theme of the app.