Exercise Tracker

A relatively simple fullstack project that allows users to track workouts. Live demo here (coming soon).

Table of Contents

• General Info
• Technologies Used
• Features
• Screenshots
• Setup
• Usage
• Project Status
• Room for Improvement
• Acknowledgements
• Contact

General Information

This is a simple MERN stack application to track user exercises. It's a helpful app for tracking (exercises or otherwise) and was intended to help me learn Authentication and continue to work on my fullstack building using the MERN stack. The hardest part of the project was the authentication, but when it clicked it was a great moment!

Tech Stack

Features

Login & Register Forms:

• Login Form

• Register Form

Exercise Log Form:

• Form to enter workout details:

  • once details have been added, you can click to add the workout or clearn the form.

Exercise Details Card:

• Details of the workouts that have been saved

  

  • you are able to see the workout name, details of the workout and also use the delete button

Authentication:

• Different users can only see their own workouts:

Setup

Run Locally

1. Clone repo locally
2. Change into API folder
3. Run npm install in your bash/command line
4. Change into UI folder
5. Run npm install in your bash/command line
6. In the API folder, run npm run dev in your bash/command line
7. Open http://localhost:4000/hello-world to view it in the browser.
8. In the UI folder, run npm start in your bash/command line
9. Open http://localhost:3000 to view it n the browser.

Available Commands

This project was bootstrapped with Create React App.

In the UI folder directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

In the API folder directory, you can run:

npm run dev

Runs the server. Open http://localhost:4000 to view it in your browser. I am also using nodemon so the server will restart & page will reload when you save changes.

Project Status

Status: COMPLETE!

Room for Improvement

Improvement Thoughts:

• Second part of this app is to add authentication for users to have accounts - DONE -
• Styling needs to be updated.
• I would like to change the user display email to a user display name.

To do:

• Add Auth
• re-design
• display user name instead of email

Acknowledgements

Many thanks to Net Ninja, this project was based on this tutorial from the Net Ninja YouTube page!

Contact

Created by @azulverdosa - feel free to contact me!

• LinkedIn

🤝 Support

Contributions, issues, and feature requests are welcome!

Give a ⭐️ if you like this project!

License

MIT License Copyright (c) [2023] [AvaElise]