Live deployment is available here
At the time of writing/submission: the deployed version is identical to the development version.
An exercise planner. This site give you a platform to plan your exercises, view others' exercises and copy exercise ideas with the ability to personalise exercises to your own needs.
This project focuses on the data-driven aspects of development, a NoSQL database (MongoDB) is utilised to store user and exercise data.
- Workout Planner
- People interested in planning their workouts.
- People who want to record their workouts in a list.
- People who want to view or follow others' exercise lists.
This project is a suitable way to deliver this content because:
- An authentication feature enables ownership of settings and objects.
- Selective permissions limit user interaction with exercises they are not the owner of, preventing unauthorised editing or removal of others' exercises.
- Users have the ability to create, view, edit or delete their own exercises, and ability to clone others' exercises to their own list.
- Users can "follow" other users, and display followed users' exercises in a filtered list.
-
As a new user I want to create an account.
-
As an established user I want to login to access my exercises.
-
As a logged-in user I want to create a new exercise.
-
As a logged-in user I want to edit one of my exercises.
-
As a logged-in user I want to delete one of my exercises.
-
As a logged-in user I want to clone another user's exercise.
-
As a logged-in user I want to mark my exercise as complete.
-
As a logged-in user I want to add a new user to my "followed" list.
-
As a logged-in user I want to remove a user from my "followed" list.
-
Upon loading the site for the first time: the user is directed to a welcome page with links to both register/login pages, upon selecting the option to register the user is redirected to a register form. User-input of invalid credentials throws an error modal with feedback as to which fields are invalid. If valid credentials are entered: the user details are added to the database and the user is presented with a modal to either go to their own exercise list or view all exercises. The field for email address is only required to encourage users to only create one account per person.
-
Upon loading the site the user is directed to a login page this page is shown as a higher priority than the register page as the user may have previously registered on another device and encourages them to use an existing account if possible. If the user submits invalid credentials a error modal is displayed detailing the invalid field. If valid credentials are submitted a modal is displayed with options to either go to their own exercise list or view all exercises.
-
The user can create a new exercise from most pages once logged-in by selecting the "Create new exercise" button at the top of the page. On button press: a form with a placeholder example is displayed for guidance. All fields require population for the form to be submitted, upon successful submission a modal is displayed and the user is redirected to their exercise list.
-
The user can select the "Edit" button on exercise cards they are the owner of, this redirects to a form to alter the individual properties of the exercise. Upon valid population of required fields and activation of the "Confirm" button a modal feedbacks that a new exercise has been created.
-
The user can select the "Delete" button on exercise cards they are the owner of, the target exercise is removed from the database and the user is redirected to their list of exercises. A response modal is not shown for this function as the user can see in their list that the card has been successfully removed during the redirect.
-
The "Clone" button is available for all exercise cards, regardless of the owner. Activation of the clone button directs the user to a form with all properties pre-filled with the properties of the cloned exercise, the user has the option to edit the exercise properties before activating the "Confirm" button. Upon confirmation, the new exercise is added to the user's list and a modal is displayed to provide feedback to the user.
-
The owner of the exercise has the "Complete" button available for activation on the exercise card. Upon activation: the style of the card is updated to reflect the new completed state as has been updated in the database.
-
Accessing the "followed users" page from the navbar displays a page of any existing followed user cards. Ensuring the toggle in the top-right is set to "add user" allows the user to type the name of the target user in the text box below that. Upon selecting the plus button, the target user is added to the followed user list and their cards are displayed on the page also.
-
Accessing the "followed users" page from the navbar displays a page of any existing followed user cards. Ensuring the toggle in the top-right is set to "remove user" allows the user to select the target user from the dropdown list. After selecting the target user: activating the minus button removes the target user from the followed user list, the corresponding exercise cards are no longer displayed on the page.
The final website design has been customised with the following colour palette:
#1B1B1B: This black is the standard colour used for the navbar background and text in modal alerts. Variations in the opacity of the black are used for different applications on this site e.g. welcome page black overlay. This colour is used to generate contrast with a lighter background.
#555555CB: This grey is used for styling the background of exercise cards, it provides a neutral, non-obtrusive background so as to not distract users from the displayed details.
#DBB125: This gold is used as an accenting colour, generally used for colour contrast. This is used extensively for user feedback of hover and click functions.
#FFFFFF: This white is used for greater contrast against darker backgrounds and gives a strong, bright highlight of elements it is applied to.
The chosen palette defines the site as a predominantly dark-themed design with lighter colours used to highlight / segment components.
Project Inception Wireframes
Basic wireframes have been created upon project inception to aid in the planning stages of this project, these are to be adapted as the project proceeds with further iterations for multiple breakpoints.
Evolution of project scope required adaptation of the basic inception wireframes to plan for final iterations.
Most notably, wireframes were generated for required forms and the first-time welcome page with absence of dates/calendar function.
As a project decision resulted in the removal of date-specific exercises the new wireframes were updated to account for this change in plan.
Release-stage wireframes below give an idea of the general mobile and desktop breakpoints, the site was designed with a mobile-first perspective but there is little variation in the structure after the resolution increases further than tablet recommendations.
Release-Stage Wireframes
Access to the website is restricted to registered users. Upon loading: users are presented with option to register a new account or login with an existing account. Once the user has submitted valid credentials their login state is persisted across the session and the option to logout is available via a button in the navbar.
The site allows users to create, view, edit or delete their own exercises. Each exercise can be personalised to include details of the exercise name, target muscle, equipment used and a metric of intensity measured by either weight or distance. Upon completion the user can mark the exercise as completed.
Accessing the global page shows all users' exercise cards, the user then has the option to clone those exercises to their own list if they want to.
The followed users page allows the user to manage their followed users. The exercise cards owned by followed users are displayed, these can be cloned to the own user's list.
In its current state the project fulfils the initial requirements, demonstrating management of a database based on user input with a defined user case of forming an exercise to-do list and visibility of others' lists. The following are suggested additions that would exceed the project time constraints or require inaccessible resources but that would provide additional value to the project if required.
Using the user's provided email address and a tool such as EmailJS, an automated system could be implemented to allow the user to recover an otherwise lost account.
At present the only filtering is between the user's own and others' exercises, this is the extent of what is required for the purpose of an exercise "check-list" but could be extended if project purpose required further expansion.
Methods are available in PyMongo to mass-update records, this capability was identified in the early stages of project development. Although this is a poweful capability, it does not fit use-cases for this project.
At present each user is given freedom to use whatever username they want, if the project were to be used in a commercial environment rather than solely educational it would be necessary to implement a profanity filter. Inputs could be compared against a list of "banned words" to help to prevent griefing.
- HTML, CSS and Javascript are used for creating the frontend structure blocks, styling and logic of this site.
- jQuery is primarily used within this project for ease of DOM manipulation.
- Bootstrap is used for resolution responsiveness and for general structuring of the UI.
- Python is used for backend manipulation.
- Flask is a Python-based framework used for the implementation of templates for components and page structures within this project.
- MongoDB was used to store the no-SQL database.
- PyMongo was used to manage/interact with the MongoDB database.
- Git is used for the version control of this project.
- Font Awesome provides the icon in the header and all icons used in buttons, e.g. complete, clone, edit, delete.
- Google Fonts is used to supply the main font for the majority of this website, the font sourced through this service is named Bebas Neue.
- Heroku is used for the live deployment of the site.
Testing documentation is located in the TESTING.md file.
At StudentCare's request I am retrospectively providing the login details for testing of admin account by assessors below.
These were originally omitted following standard guidelines for security of content published to Github but have been made available for testing as the project has been produced in an educational capacity. Once grading has been completed these details will be changed on the backend to prevent unauthorised admin use. Secure details would not be provided publically in a professional capacity and so is a deviation from industry norms.
Username: admin
Password: WORKOUTCI2020
Two collections were used in this project: "users" and "exercises"
The structure of a document within this collection is as follows:
| Title | db Key | Data type |
|---|---|---|
| User ID | _id | ObjectId |
| Username | username | String |
| Email Address | String | |
| Hashed Password | password | String |
| Followed User | following | Array |
The structure of a document within this collection is as follows:
| Title | db Key | Data type |
|---|---|---|
| Exercise ID | _id | ObjectId |
| Exercise Name | exercisename | String |
| Primary Target Muscle | targetmuscle | String |
| Equipment Name | equipmentname | String |
| Weight/Distance | weightdistancevalue | String |
| Exercise Owner | owner | String |
| Completion Status | complete | Boolean |
This project was developed using Visual Studio Code, and was both committed to git and pushed to GitHub using the integrated source control feature.
Basic requirements for local deployment are as follows.
- Python3
- Git
- IDE, e.g. VSCode
- PIP
- An account for MongoDB is required for database creation and access.
- Following from installation of pre-requisites, open the target directory and clone the repository with the following command in the terminal:
git clone https://github.com/ElliotRedhead/WorkoutPlanner- The standard recommendation for managing python packages and preventing package conflicts is to create an isolated virtual environment for each project. Using python's included venv package create an environment within the target directory (command varies based on OS, check the documentation for additional help with this.):
Windows: python -m venv venv
Linux: py3 -m venv venv- Activate the newly-created virtual environment (command varies based on OS):
Windows: venv/Scripts/activate
Linux: source venv/Scripts/activate- Add the required python modules using pip (command varies based on OS):
Windows: pip install -r requirements.txt
Linux: pip3 install -r requirements.txt-
Inside the target directory create a new file, and name it: "env.py".
-
Copy the following code block into the env.py file, populating with the properties of your database.
import os
os.environ["MONGO_URI"] = "INSERTYOURMONGOLINKHERE"
os.environ["MONGO_DB"] = "INSERTYOURDATABASENAMEHERE"
os.environ["SECRET_KEY"] = "INSERTYOURSECRETKEYHERE"The collections used within this project are named "users" and "exercises", these will be created upon registering the first user and the user creates their first exercise.
- Run the application using the following in the command line.
Windows: python app.py
Linux: python3 app.py- The running terminal will direct you to the running address to access the application.
The Procfile and requirements.txt pre-requisites are already included within the Workout Planner repository.
Steps to deploy Workout Planner to Heroku are as follows:
-
Access the Heroku website and create a new app by selecting the "New" button in the dashboard.
Name the application and set the region as "Europe". -
Navigate to the new application's dashboard page and select "Deploy": "Deployment Method", set this to "Github".
-
Confirm connection of the app to the require Github repository.
-
To set required configuration variables: select "Settings": "Reveal Config Vars".
-
Set the required variables as detailed:
Key: Value
IP: 0.0.0.0
PORT: 5000
MONGO_URI:mongodb+srv://<username>:<password>@<cluster_name>-qtxun.mongodb.net/<database_name>?retryWrites=true&w=majority
SECRET_KEY:<examplesecretkey>
The MONGO_URI value is provided by MongoDB, the documentation provides help for this.
-
In the app settings, access the "Deploy" tab and manually deploy the app: with the master branch selected, click "Deploy Branch".
-
Wait for the app to fully deploy, access the running app via the "Open app" button at the top of the page.
The main font applied to this site is: Bebas Neue.
The images used in this site were obtained from the following sources:
- Geometric architecture image by Scott Webb, sourced from Pexels is used for the main background of the site.
- Grayscale barbell image by Victor Freitas, sourced from Pexels is used for the welcome page background.
Thank you to Stack Overflow user aldel for his solution to my redirect "http/https" bug, and saving me from further hours of head-scratching.
Many thanks for support in the creation of this website to my mentor: Simen Daehlin.
This project and its contents are for educational purposes only.