Waterlator: From Sketch to Deployement

About a year, or so, ago I was listening to this episode of the Huberman Lab podcast, then I heard this hydration formula (called Galpin Equation) that tells you how much water you would need to drink during your workouts.

I didn't find any online tool that would do the math for me, so I thought of making one myself.

As mentioned in my previous blog, I thought of building an app in public, and that's when I thought of this: a hydration calculator.

I drew what the web app would look like and what it would do (i.e., inputs & outputs). I also went back to the Huberman Lab episode to fin out the exact formulas to use.

I set up the project, using React JS. The initial version of the website was very simple with little to no styles but could do the needed calculations.

I asked on an Instagram story for junior designers to collaborate with. After explaining the goal of the application, I received two design suggestions:

Design by @abdellahId:

Design by @dounia-hanyn:

I asked IG followers to vote on which one they thought was better. The result was a perfect 50/50, so @abdelhadi, a friend of mine, who is also a senior designer, suggested that the two designers collaborate. The result ? An amazing design, having the best of both.

This part took some time, but I did it. I even asked the designers to add an animation and a few updates to the UI.

I used Vercel to deploy the application and asked for early feedback in IG stories, which I used to find out about a few UI bugs in certain browsers, and patched them.

WaterLator is to me a living example of the beauty of engineering. How you can build tools you couldn't find, or solve problems you may have faced. Big up to anyone that contributed to the making of WaterLator.

Thank you for making it this far <3, did you check WaterLator, yet ? Did you find it useful ? If that's the case, consider sharing it with a friend or friends that might find it useful.