This health and exercise tracker aims to be a master repository for your health and wellness information.
- React.js
- JavaScript
- CSS
- React-Bootstrap
- Victory
- Firebase/Firestore
Born out of a need for a single source of truth for health and exercise data, this React.js web application serves as a repository for all of your health and wellness information. Users can create an account, log in, and view their dashboard. From there, they can add data to their daily log, view a running list of their past data entries, and see a variety of metrics visualized as a various charts.
-
To run this program locally download the repository by clicking the "Code" button at the top right of the GitHub page.
-
Navigate to the folder where it downloaded and open it in your code editor of choice.
-
Add a .env file to the root directory
-
Create a Firebase instance and add the following to your .env file:
REACT_APP_FIREBASE_API_KEY = [Your Firebase API Key] REACT_APP_FIREBASE_AUTH_DOMAIN = [Your Firebase Auth Domain] REACT_APP_FIREBASE_PROJECT_ID = [Your Firebase Project ID] REACT_APP_FIREBASE_STORAGE_BUCKET = [Your Firebase Storage Bucket] REACT_APP_FIREBASE_MESSAGING_SENDER_ID = [Your Firebase Sender ID] REACT_APP_FIREBASE_APP_ID = [Your Firebase App ID]
-
Run
npm install
to install the dependencies needed for this project. -
Run
npm start
to start up the program locally. -
To view the deployed version of this program navigate the live site at: https://fit-ledger.web.app/
-
Click "Sign In" in the top right corner of the page to create an account, log in, and view your dashboard.
- 8:00am - 9:00am: Creating project repository and project proposal document
- 9:00am - 10:00am: Kanban board task development and planning in Miro (https://miro.com/app/board/uXjVM3huH7k=/)
- 10:30am - 12:00pm: Researching Firebase/Firestore as a backend solution for DB (https://www.youtube.com/watch?v=jCY6DH8F4oc&ab_channel=PedroTech)
- 1:00pm - 3:00pm: Researching using React with Firebase via LHTP/YT/Firebase Docs
- 3:00pm - 5:00pm: Researching and experiment with using Tailwind CSS and Flowbite in React Apps via YT and Tailwind Docs, set up Prettier/Tailwind CSS plugins
- 2:10pm-2:30pm: Researching Nivo.Rocks for data visualization components
- 2:30pm-3:30pm: Testing Victory React Charts for data visualization components
- 11:30am-12:00pm: Researching quote APIs for daily quotes
- 12:00pm-12:30pm: Researching API call techniques in React
- DOM validation issues due to React-Bootstrap structure in data details cards.
- Responsiveness broken in navigation bar.
For questions, comments, or concerns please reach out at Kyungmj@gmail.com
Copyright (c) [2023] [Marcus Kyung]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR\ A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.