Inspiration

A few months ago, I went to the ER with a bad stomach ache, and after running several tests, the doctors figured out that I wasn't staying hydrated properly. Ever since then, I've learned the importance of hydration and wanted to build an app that could help others hydrate properly as well.

What it does

HydroMate is an app that helps users track their water consumption progress throughout the day. When they drink water, they log it in the app, and it tells them how much water they have consumed so far and if they have met their goal. It also provides insights in the form of graphs to help users see how they improve over time.

How we built it

I built the app by myself using React Native for the interface. I used React and React Native components such as StyleSheet, TouchableOpacity, Button, Image, and more. I also used gesture handlers, the react-native-gifted-charts library, 'AsyncStoragefor persistence across sessions, andmoment` for date tracking.

Challenges we ran into

I ran into many challenges while building HydroMate. I had to learn a whole new framework of building apps (React Native) that I had never used before, and build a complex and comprehensive app in only two days. Working alone on this project made it even harder. I ran into many bugs and problems that I had to debug for hours on end. One example of a particularly challenging bug was that the AsyncStorage wasn't working properly.

Accomplishments that we're proud of

I am proud of the overall app design of HydroMate and myself for learning React Native and programming a complex and aesthetically pleasing app in 2 days, especially while working alone.

What we learned

I learned the entirely new framework of React Native for building apps, including many components and libraries within it.

What's next for HydroMate

Some more features I would like to add is sharing your water consumption with friends via a competitive leaderboard, which would encourage more water intake.

Share this project:

Updates