Workout Tracker is a simple to use responsive website for tracking weight training workouts. Users will be directed to either log in or register from the welcome page. From there they will be able to plan workouts by adding exercises with sets and reps to a certain day. From there they can edit, delete or mark as done and view completed workouts as needed.

There is a search function in which the user can search for specific exercises performed to view progression. The website layout will be minimalist and clear, in order to make viewing and updating workout information simple during or after performing a workout, when a user may be fatigued.

Live Website

• As a new user, I wish to be directed to the appropriate place to register to the Workout Tracker.

• As a new user, I would like to create a personal profile to log my workouts.

• As a returning user, I want to be able to log in to my own personal user profile.

• As a returning user, I want to be able to plan workouts for the future.

• As a returning user, I want to have the ability to edit planned workouts in case I feel my circumstances have changed.

• As a returning user, I wish to view my previous workouts so that I can compare my exercise progression results.

• As the owner, I want to present an intuitive minimalist style application that allows a user to easily navigate the site.

• As the owner, the application must be responsive, to allow users to track their workouts as they train, or to have the choice of adding, editing or deleting their workout data from any other device.

The Workout Tracker is designed to be usable instead of logging workouts in a paper journal. By making a responsive application, this can be done easily while training or at the user's leisure on a desktop or any device.

It is important to display an intuitive minimalist design as users that log their workouts while training do not want to spend excess time navigating the application and may be fatigued also, which could impair concentration.

In each section I want to keep a common navbar which will stick to the page top. Users can use this to navigate the site easily without the use of browser forward and back buttons.

• View Workouts Wireframes
• Add/Edit Workout Wireframes

• For the navbar and page headings, I used the Materialize color class grey darken-3 (#424242).

  

• For each page body I used the Materialize color class grey lighten-1 (#bdbdbd).

  

• For the cards which contained the site content I used the Materialize color class grey lighten-3 (#eeeeee).

  

• For contrast on buttons and on navbar content I used the Materialize color class amber (#ffc107).

  

I found the use of these colours to provide a nice soft contrast that wasn't harsh to look.

I used the Roboto Condensed font from Google Fonts for this website for its clean look and readability.

• I used the hamburger icon for my menu because it is widely recognised and used for mobile menus.

• I used the external link icon to indicate the presence of a clickable link on the welcome page to help direct users to either the log in or registration pages.

• I used the double arrow up icon on the completed workout cards to indicate that additional workout notes could be viewed upon clickiing the button.

• I used the plus icon on adding workout data to emphasise the add workout button.

• I used the search icon on the search button to emphasise its use.

• Navbar - allows the user to navigate the site using the listed buttons. The company name/logo also acts as a home button.

• Welcome - a simple welcome page which directs a user to log in if returning, or register if new.

• New Workout - The user can record details of benchmarks they wish to execute in their workouts and add it to the workout planner.

• Workout Planner - this feature is only accessible if a user is logged in. It allows a user to plan future workouts, and is sorted by date starting from closest. These workouts can be edited, deleted or marked as complete, which will move it to workout history.

• Delete planned workout - a confirm deletion modal will pop up asking the user if they are sure they wish to delete their planned workout.

• Edit planned workout - the user can edit any planned workout data they have added and return it to the planed workout section.

• Done button - the user can mark a planed workout as done, and will have a final option to edit any workout data, as well as add any additional workout notes they may find useful to remark upon.

• Workout History - the user is presented with a list of their completed workouts, which can be deleted by the user if they wish. They can also view their workout notes if they have added them here.

• Exercises - this feature can be used to add new exercises to the database, which can then be selected in the add new workout form. Exercises can also be edited or deleted here. Selecting delete will pop up a confirm delete modal.

• Features for runners, such as timers and stopwatches.

• A progression graph showing weight progression for exercises.

• Body weight tracker.

• Ability to export workout data.

• Balsamiq Wireframes

  • The project uses Balsamiq Wireframes for desktop to generate wireframes for the website.

• Gitpod

  • I used Gitpod to write my code for this project.

• Git

  • The project uses Git to update records to any changes to files.

• GitHub

  • The project uses Github as a hosting service for version control.

• Heroku

  • The project uses Heroku to host the website.

• MongDB

  • The project uses MongoDB database to store the user information and workout data.

• Flask

  • The project uses the Flask Python framework to help develop the application

• Pip3

  • The project uses pip3 to install Python modules throught the command line.

• RandomKeygen

  • The projet uses RandomKeygen to generate strong passwords for the secret key.

• Materialize

  • The project uses the Materialize framework to help build front end of the site.

• Google Fonts

  • The project uses Google Fonts to style the fonts on the website.

• Font Awesome

  • The project uses Font Awesome icons throughout the website.

• Chrome DevTools

  • The project uses Chrome DevTools to analyse performance, accessibility, and best practices.

• PEP8 online

  • The project uses PEP8 online to check the python code for pep8 requirements.

• W3C CSS Validator

  • The project uses this to test CSS by direct input.

• W3C Markup Validation Service

  • The project uses this to pinpoint errors in HTML markup.

• JSHint

  • The project uses JSHint to detect errors and potential problems in the JavaScript code.

Testing documentation can be found at TESTING.md

This project was developed in Gitpod, controlled using Git, and hosted using GitHub. The live webpage is hosted by Heroku. To deploy Workout Tracker the following steps were taken:

1. Navigate back to M-E-C-20/workout-tracker.
2. Click on the Code button.
3. Make sure HTTPS is selected.
4. Copy the URL supplied.
5. Open up the terminal in your IDE.
6. Input git clone followed by the URL you copied into the terminal.

git clone https://github.com/M-E-C-20/workout-tracker.git

• Install all requirements modules by inputting the following in the command line:

pip3 install -r requirements.txt

1. Login to your MongoDB account
2. Create a cluster
3. Create a database with following collections:
   1. completed_workouts
   2. exercise
   3. routines
   4. users

1. Create a .gitignore file in the root directory
2. Write env.py and __pycache__/ into the .gitignore file
3. create env.py file
4. On the top of the file add import os to set the environment variables in the operating system.
5. In the env.py file write following code with YOURPASSWORD, YOURCLUSTERNAME, YOURDABASENAME and YOURSECRETKEY using the format: os.environ.setdefault("SECRET_KEY", "YOURSECRETKEY")

1. In the last line of app.py change debug=False to debug=True

2. It is possible to run the application by inputting the following in to the command line:

python3 app.py

To deploy the project to Heroku the following steps need to be completed:

1. Create a Heroku account
2. Create a new app and select your region

1. Make a requirements.txt file by inputting the following in to the command line:

pip3 freeze --local > requirements.txt

(This is required for the Heroku to know which files need to be installed for the app)

2. Make a Procfile in the command line:

echo web: python app.py > Procfile

(This is required for the Heroku to know at the entry point get the app up and running)

1. In the command line type:

heroku login -i 

(and fill in your username and password)

2. Commit all the files to Herkou, in CLI type:

git push heroku master 

1. Go to your Heroku account and navigate to the app settings.
2. Set the keys and values as follow:

1. Click Open app in the right corner of your Heroku account
2. Click on the live link available in the address bar

The image used on the welcome page weas obtained from Pixabay from the content creator mohamed_hassan.

• I used the Code Institute README template as a base for my own.

• I used the Code Institute task manager mini project as a template to create my own, similarities in the code can be found throughout the entire application.

• I would like to thank the Slack community as a general source of information and for people willing to lend a hand.

• I would like to thank my partner and children for both supporting and tolerating me during this process.