Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/carlosp1806/fitness-hub
Fitness Hub is a web application that allows users to keep track of their health in different categories and save daily fitness data.
https://github.com/carlosp1806/fitness-hub
css fitness-tracker javascript react
Last synced: 1 day ago
JSON representation
Fitness Hub is a web application that allows users to keep track of their health in different categories and save daily fitness data.
- Host: GitHub
- URL: https://github.com/carlosp1806/fitness-hub
- Owner: CarlosP1806
- Created: 2022-02-02T15:47:03.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2022-02-16T16:18:18.000Z (over 2 years ago)
- Last Synced: 2024-04-18T05:49:10.343Z (7 months ago)
- Topics: css, fitness-tracker, javascript, react
- Language: JavaScript
- Homepage:
- Size: 16.4 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💪 Fitness Hub
## 📃 Project Description
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/
## 🤖 Technologies Used
- **React.js** for the frontend
- **CSS** for a personalized design
- **Github Pages** for hosting app
## 🎯 Learning Objectives
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
## ⚙️ Functionality
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:
