Hydration Monitor

About 75 percent of Americans are chronically dehydrated. Dehydration can cause fatigue, kidney stones, and more. The react app gives people a quick access point to check their hydration status.

Comment

Inspiration

According to a survey conducted by the Nutrition Information Center, about 75 percent of Americans are chronically dehydrated. Dehydration can cause fatigue, foggy memory, and irritability. Dehydration is one of the most common risk factors for kidney stones. It is critical to maintaining well-hydrated status in daily life.

What it does

The hydration monitor provides a quick access point for people to check their hydration status and gives advice on fluids intake.

How I build it

The topic was researched to gain enough correct information to help people realize their hydration status. The app was built using the React framework. The web app is styled using the tailwind CSS framework. The react-spring package is used to added transition animation into the web app.

Challenges I ran into

Challenges include research the scientific method to check human hydration state. Also, it is time-consuming to install different react packages and set up configurations.

Accomplishments that I am proud of

The application is easy to understand and use. The app is concise as well as contains all the necessary information.

What I learned

I learned how to design the layout and the logic of a web app and how to use the react framework and different packages to implement it.

What's next for Hydration Monitor

Test the application and collect feedbacks to improve the user experience. Add more functionalities to the web application.

Built With

  1. React
  2. TailwindCSS
  3. react-spring
  4. react-router-dom

Built With

Share this project:

Updates