During the semester, we are always hard at work keeping it at the grind and always forgetting to take care of ourselves and drink up whenever we have to. Hence there was a crying need for some way to help up keep track of our hydration regime.

What it does

Drink requires you to upload an image of your own pee and it will process the image to detect how light or dark your pee and giving you recommendations on how to properly hydrate yourself. It also keep tracks of your pee color records in a heatmap so you can easily see how your hydration level changes over time.

How I built it

It is a web app built using React and Redux with some image processing function to detect the color of the pee image that was uploaded. Backend is built with Flask to keep track of the historical records.

Challenges I ran into

Learning React and Flask on the go while making this web app.

Accomplishments that I'm proud of

The web app is functional as you can upload an image and you can get a recommendation of how much water to drink based on the color of your pee. How great is that!

What I learned

We all learnt quite a bit on how to work with React and the different function that React uses to be able to make multi page web applications.

What's next for Drink

To allow users to have a scoring system based on their hydration level. And add social networking features like GitHub, so you can follow your friends.

Built With

Share this project: