Fitness Hub is a web application that allows the users to keep track of their health by a simple easy-to-use interface. The app can record information on different categories: walk distance, workout time, water intake, and sleep time. The data is displayed in different cards which contain the count and the goal for the user. If the users want to consult previous data, they can click on the stats button to display new cards containing a summary of their previous activity.
I was motivated to build this project primarily to strenghten my React.js skills, since it features different particularities of the framework, from context to custom hooks.
Visit the live project hosted using Github Pages at:
https://carlosp1806.github.io/fitness-hub/
- React.js for the frontend
- CSS for a personalized design
- Github Pages for hosting app
This project was built considering the following learnings:
- Understand how to build a complete frontend application using React
- Acknowledge the importance and use cases of context in React
- Learn how to create custom React hooks
- Show proficiency in creating an easy-to-use and responsive web design
- Understand the importance of React components to modularize code in large applications
- Show proficiency in handling local storage to maintain data without the need of a database
When the users open the application for the first time, they are presented with 5 cards: one that displays the global progress of the day, and four that contain information on each category (walk, workout, water, sleep). Each new day the counts are reset to 0, and the previous data is stored so that the users can keep track of their health across multiple days. To access the archive, click on the button in the upper right corner. In order to enter the daily data or to update the goals, click on the edit button on the corresponding card. The following images show how the app works:
