H2O Tracker
Source | Visit | Built with: JavaScript, Next.js, Styled Components
Why I built it
The problem I'm trying to solve: Dehydration while spending many hours in front of a screen. Dehydration can contribute to fatigue and depression, and drinking enough water is a simple and powerful way to support oneself. The app is meant to get the user thinking more about drinking water through goal setting and logging consumption throughout the day.
What it does
The H2O Tracker helps the user to keep track of how much of a predetermined amount of water has been consumed over a predetermined amount of time.
The user is prompted to input a water consumption goal in litres and the number of hours over which that water is to be consumed. The app then provides an average amount of water to be consumed per hour and asks for confirmation of these details. If the user clicks the 'No' button, the input fields maintain their amounts and wait for the user to make the necessary changes. If the user clicks the 'Yes' button, the user is taken to a new page with a timer and a console for logging water consumed. The user is instructed to click the 'H2O' button each time the average amount of water has been consumed, which adds that amount to the total amount in the console.
How I built it
The first version of this app was built with vanilla JS, HTML and CSS. It was a good start, but it lacked responsiveness and speed.
For this new version, I began with developing user stories, which led to a better understanding of what features were needed, which led to the development of the backlog (which I'm still working through). I then designed the UI mockups for the landing/form and tracker/timer pages with Figma.
I chose the Next.js framework because I wanted fast server-side rendering, and I wanted the app to move from the landing page with the form to the tracking page with the timer. I trust in the Next.js routing set-up.
Styling is done primarily with Styled Components and custom breakpoints.
How I tested it
What challenges I ran into
When starting on this new version, I wanted to immediately connect it to a PostgreSQL database (for user accounts), use Prisma as an ORM, and add user authentication. This backend focus, I realised, was premature and was distracting me from the frontend needs, so I started over and focused solely on a version that I could use as the base tool I had originally envisioned while continuing to improve the frontend and moving closer to starting on the backend.
What I learned
Approaching the development of the app in a more agile way took more time up front, but it has paid off in overall clarity and efficiency of process.
How I deploy it
The H2O Tracker is deployed using Vercel for hosting, CI pipeline, and automated tests.
What's next for this project
• Testing the app.
• A gentle reminder to the user when the average amount of water to drink has not been met.
• Content for the T&C's, Guidelines, and About pages.
• User accounts using a PostgreSQL database and Prisma for object relational mapping -- I want to give users the option to record their daily, weekly, monthly, and yearly water intake.
• User authentication