Hydration Monitor

Inspiration

COVID has made remote work more likely, thus more time at a desk and less walking. Health is America has long since been a problem, however working from home can promote more health concerns.

What it does

This application serves as a reminder to when you should consider getting up to stretch and drink water.

How we built it

This application was created using HTML, CSS, JavaScript, ReactJS. I also used some packages such as CircularProgressBar and react-slider to visualize the timer. There was also bootstrap used for styling as well as GoogleFonts and HeroIcons.

Challenges we ran into

Lack prior knowledge of React. Got blocked by a problem that an experienced React developer would know but eventually figured out the solution.

Accomplishments that we're proud of

The fact that I have a functional product with my team disbanding the last minute of entering.

What we learned

I've gained more knowledge in ReactJS and how certain functions within that library operates.

What's next for Hydration Monitor

Fleshing out the frontend with a few more features and connecting it to a database.

Built With

• bootstrap
• circularprogressbar
• css
• html
• javascript
• react
• react-slider