Developer: Aleksandra Haniok

💻 Visit live website

• About
• User Goals
• Site Owner Goals
• User Experience
• User Stories
• Design
  • Colours
  • Fonts
  • Structure
    • Website pages
    • Database
  • Wireframes
• Technologies Used
• Features
• Validation
• Testing
  • Manual testing of user stories
  • Automated testing
  • Performing tests on various devices
  • Browser compatibility
• Bugs
• Configuration
  • Google emails
  • Forking the GitHub Repository
  • Making a Local Clone
• Credits
• Acknowledgements

The Workout Planner is an application for creating weekly training rota which also gives users ideas of exercises for their next training session.

• Be able to plan their workouts
• Be able to amend their plan at any point
• View the plan at any time

• Provide an online solution for users to plan their weekly workouts
• Create visually appealing design
• Provide fully responsive application with straightforward navigation

• People who want to be more organised with their workouts
• Gym enthusiasts who focus on training different body parts and want to plan their weekly schedule to potentially avoid repetitions in their training
• People who want to keep track of their workout/fitness routine
• People who don’t want to think back and remember which day of the week they trained a specific part of the body

• Straightforward navigation
• Easy to use
• A responsive application that allows the user to access their plan on any device
• Visually appealing design for all screen size
• Links and functions that work as expected
• An easy way to contact the developer
• Accessibility

1. I want to see the home page with explanation of the app
2. I want to be able to easily navigate around the application to different pages
3. I want to create my account to be able to plan my workouts
4. I want to prepare a plan for multiple weeks in advance
5. I want to be able to edit my current plans at any point
6. I want to delete my plan if no longer needed
7. I want to see feedback messages so that I know that my plan was created, edited or deleted
8. I want to be able to view previous plans to help me prepare the following week’s workout
9. I want to find inspiration for my workouts and be able to use search option to find a particular exercise
10. As a returning user, I want to log in to the app to see my current plans

19. I want to see details of a specific exercise and get an idea how to perform it correctly
20. I want a paginated list of exercises so that I can easily select an exercise to view
21. I want to be able to log out from my account
22. I want to be able to see details of my account on the profile page
23. I want to be able to delete my account if I decide to no longer use the app

11. I want every site visitor to be able to view the catalogue of exercises
12. I want only the logged-in users to be able to create their plans
13. I want users to be able to create the plan on any day that suits their needs
14. I want data entry to be validated on sign-up page
15. I want the user to come to a 404 error page instead of having to use the browser back button if they enter a URL that does not exist
16. I want user to be able to contact me and provide their feedback
17. I want user to receive feedback if their message in contact form has been sent.
18. I want my site to be fully responsive

The colour scheme was chosen to provide simple, neutral and fresh look. It was an intention to keep the website for all range of users and avoid colour stereotype typically found in the gyms and sports centres such as bright green or blue.

These colours were used throughout all the pages in such a way as to ensure adequate contrast and good user experience.

The pallet created using Coolors.co

See colour pallet

Google Fonts were implemented on the website. Roboto with sans-serif as fallback was used thoughout the site to present the content in a clear and legible way.

Simplicity, clarity and ease of navigation between pages were the key aspects for design of this website's structure.

At the top of the page there is a recognisable type of navigation bar with website name on the left side and the navigation links to the right which collapses to hamburger icon on smaller screen sizes. At the bottom of the page there is a footer with links to a contact page and developer's social media (opening in a separate tab/window).

• The website consists of the following sections:
  • Home page with an overview of the content and aim of the website.
  • Planner page where a not logged-in user can see an example of the workout plan and choose to log in or register. Registered user can either view their workout plans or create a new one.
  • Choose date screen where user can select the start date of their workout plan.
  • Add plan page allowing user to create a plan.
  • View plans page where user can see all their plans.
  • Edit plan page where user can edit an existing plan.
  • Delete plan allowing user to delete selected plan.
  • Exercises list page with catalogue of exercises and a filter option to find a specific exercise.
  • Exercise detail page where user can see a description of a chosen exercise.
  • Login page for returning user to log in.
  • Register page allowing a new user to sign up.
  • Profile page where user can view details of their account and created plans and also delete their account.
  • Logout page allowing user to log out of the website.
  • Contact page with contact form which allows users to send an email to the developer and provide their feedback.
  • 404 error page.

• The backend consists of Python built with the Django framework with a database of a Postgres for the deployed version
• Two database models contain all fields stored in the database and mimics the structure of what is actually stored in the Postgres database

Show diagram

The following models were created to represent the database model structure for the website:

• The User model contains information about the user. It is part of the Django allauth library

• The WorkoutPlan model contains the following fields: first_day and User
• The model has a one-to-one relationship with User

• The WorkoutTime model contains the workout_time_name field
• The model contains information about the workout time (AM or PM)

• The Workout model contains the following fields: workout_name, workout_time, workout_plan and day
• It contains WorkoutTime as a foreign key
• It contains WorkoutPlan as a foreign key
• The day field contains the date of week for the plan

• The Exercise model contains the following fields: name, description, body_part, type, equipment, level and image
• The model represents an exercise and its details
• The name fields contains the exercise name
• The description field contains exercise description
• It contains BodyPart as a foreign-key
• It contains Type as a foreign key
• It contains Level as a foreign key
• The image field contains the exercise image

• The model contains the body type category for an exercise
• The model contains the following fields: part

• The model contains the type of an exercise
• The model contains the following fields: type

• The model contains the equipment type for an exercise
• The model contains the following fields: equipment
• It contains Exercise as many-to-many field

• The model contains the level of an exercise
• The model contains the following fields: level

Big screens - laptop & desktop

Medium screens - tablet

Small screens - mobile

• HTML
• CSS
• Javascript
• Python 3.10.2
• Django 3.2

• Am I Responsive was used to create the multi-device mock-up at the top of this README.md file
• Balsamiq to create the projects wireframes
• Bootstrap v5.1.3. This project uses the Bootstrap library for UI components (Buttons, Card, Footer, Modal, Pagination, Navbar)
• Canva was used to create a background image
• Cloudinary to store static files
• Dbdiagram.io used for the database schema diagram
• Favicon.io for making the site favicon
• Chrome dev tools was used for debugging of the code and checking site for responsiveness
• Font Awesome - Icons from Font Awesome were used throughout the site
• Git was used for version control within VSCode to push the code to GitHub
• GitHub was used as a remote repository to store project code
• Google Fonts
• Render Platform was used to deploy the project into live environment
• jQuery was used for drop-down exercises filters on smaller screens
• Postgres – deployed project on Render uses a Postgres database
• Remove.bg was used to remove background on home page images & 404 page image
• Summernote - editor used for exercise description field in Admin page
• Visual Studio Code (VSCode) - code editor used to write this project
• Validation:
  • WC3 Validator was used to validate the html in the project
  • Jigsaw W3 Validator to validate the css in the project
  • JShint for JavaScript quality
  • PEP8 to check code against Python conventions
  • Lighthouse for performance, accessibility, progressive web apps, SEO analysis of the project code
  • Wave Validator to evaluate accessibility

• Featured and consistent on the all pages
• The nav bar contains links to Home page, Planner page, Exercise page and Profile page.
  • Logged-in users will see their name in the nav bar with option on click to either view their profile or log out
  • Not logged in users will have option to either register or log in
• The nav bar is fully responsive and changes to a toggler (hamburger menu) on smaller size screens
• The navbar allows user to easily jump to a specific section on the website
• User stories covered: 2, 18

• Home page includes nav bar, main body and a footer
• Home page main body includes description of the website and what its users can find and expect. It has direct links to the planner page and exercises page
• User stories covered: 1

• A footer is displayed at the bottom of the each page
• Contains link to contact form (opening in the same window), social media and GitHub page (opening in a separate window)
• Contains copyrights info
• User stories covered: 16

• New users can create an account
• The user must provide a valid username, password and password confirmation. Email address is optional
• User cannot register the same details twice for an account
• Once register the users are immediately logged in and taken to the planner page
• User stories covered: 3, 14

• Returning users can login to their account
• The user must have an account in the system and they must enter the correct username and password
• Both fields are mandatory
• Once logged in the user will be navigated to the planner page
• User stories covered: 10, 12, 14

• Confirmation screen for Logged in user to logout from their account
• User stories covered: 21

• Logged in user can see details about their account and workouts created
• User stories covered: 22

• User have an option to delete their account from the system.
• The modal pops up for user to confirm their choice and are warned that this action is irreversible
• User stories covered: 23

• There are two views depending whether a user is logged in or not
  • For users who are not logged in to their account they can see two options to access the planner - log in and sign up. There is also an example of the planner to give user an idea how the ready plan looks like
  • Logged-in users can see the confirmation message that they've been successfully logged in and they are taken back to the planner page where they can select from two options to either view their current plans or add a new one
• User stories covered: 3, 10, 12

• User can select the first day of their plan using the date picker
• It is not possible to create two plans starting on the same day. On selection of an incorrect date the user is presented with a warning message to choose another day on the calendar
• User stories covered: 4, 13

• User can add plan either from the planner page or the view plans page
• There are 28 input fields representing the workout plan. 14 fields for AM and 14 for PM
• It is possible to leave some fields blank
• For easier navigation on small screen devices the first column is frozen so that user can see it at all times when scrolling right & left between days of the week
• User is provided with a feedback message that their plan has been added
• User stories covered: 4, 13

• User can see all the plans they created
• There is one plan per page displayed with the date at the top of the table
• User can use the right & left navigation arrows to jump between plans
• There are three options available to edit plan, add a new plan or delete the currently viewed plan. These are represented by the font awesome icons below the workout plan table
• For easier navigation on small screen devices the first column is frozen so that user can see it at all times when scrolling right & left between days of the week
• User stories covered: 4, 8

• Located unser the plan in the view plans page
• Allow user to edit, add or delete currently displayed plan on the page
• User stories covered: 5, 6

• User can edit a selected plan
• This can be done by clicking the first icon from the navigation icons
• Date of plan currently being edited is displayed above the plan
• User can edit any field and save once happy with edition
• For easier navigation on small screen devices the first column is frozen so that user can see it at all times when scrolling right & left between days of the week
• User is provided with a feedback message that their plan has been edited
• User stories covered: 5

• User can delete a selected plan
• This can be done by clicking the third icon from the navigation icons
• The modal pops up for user to confirm the deletion of the plan
• User is provided with a feedback message that their plan has been deleted
• User stories covered: 6

• User is provided with feedback message about the action their performed, eg. added, edited or deleted a plan or logged-in, registered, logged-out, etc.
• User stories covered: 7

• A page with a catalogue of training exercises targeting different body parts, with various level of difficulty and type of training
• User is able to search through all the exercises choosing a specific body part, level of difficulty or type of training. They can also find a specific exercise by typing a part of its name
• User stories covered: 9, 11

• Filter through all the exercises which allows user to find a specific exercise depending on the targetedd body part, level of difficulty or type of training. There is also an option to find an exercise by typing a part of its name
• Filter collapses on smaller screens and expands by clicking on the 'Find an exercise' button
• User stories covered: 9

• Allows for display of twelve exercises per page, if there are more, the page is paginated
• User to go the the previous/next page or the first/last page of exercises
• User stories covered: 20

• Provides overview of the exercise
• Users can view a detailed description on how to perform the exercise
• User stories covered: 19

• Contact form allows user to contact the developer and send their message or provide feedback
• All three fields (username, email and message) on the form are mandatory
• Not logged-in users need to provide their name, email address and message content
• Username on the form is automatically provided for the logged-in user as well as their email address, if one was given during account registration. If not, the user needs to provide their email address manually.
• User stories covered: 16

• Confirmation message is provided for user that they contact message has been successfully sent
• User stories covered: 17

• If a user encounters an error, the relevant error page is displayed (400, 403, 404 or 500)
• User stories covered: 15

The W3C Markup Validation Service was used to validate the HTML of the website.

Home

Planner

Choose date

Add Plan

Edit Plan

View Plans

Exercises list page

Exercise detail page

Login

Signup

Profile

Logout

Contact form page

Error Pages (400, 403, 404, 500)

The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. When validating all website, it passes with no errors.

Style.css

JSHint JS Validation Service was used to validate the Javascript files. No errors were found.

Script.js

PEP8 Validation Service was used to check the code for PEP8 requirements. All the code passes with no errors and no warnings to show.

Exercises

Admin.py

Filters.py

Models.py

Test_views.py

Urls.py

Views.py

Exercises_tags.py

Home

Models.py

Test_views.py

Urls.py

Views.py

Plannerapp

Admin.py

Forms.py

Models.py

Test_views.py

Urls.py

Views.py

Lighthouse was used to test the performance, accessibility, best practice and SEO of the site. Overall the results are very good for the 4 values.

The WAVE WebAIM web accessibility evaluation tool was used to test the websites accessibility.

Home page

Contact page

- Initially there were 3 errors shown for no labels to input fields. This was fixed by adding labels and setting bootstrap class to sr-only.

Profile page

Exercises list

Exercise detail page

Choose date page

Add plan

• There were 28 errors identified related to missing form labels which were fixed and as a result there are no more errors identified. Same issues for edit plan page.

Edit plan

Planner page

• Initially there was one error related to the empty table header (1st th element), which was fixed by addiding value to the th element and setting 'visibility: none';

View plans

• A few errors related to empty links of navigation icons were corrected by adding aria-hidden='true' and setting bootstrap class to sr-only.

Login

Register

Logout

Error page

The testing approach is as follows:

1. Manual testing of user stories
2. Automated testing

1. I want to see the home page with explanation of the app

Screenshot

2. I want to be able to easily navigate around the application to different pages

Screenshot

3. I want to create my account to be able to plan my workouts

Screenshot

4. I want to prepare a plan for multiple weeks in advance

Screenshot

5. I want to be able to edit my current plans at any point

Screenshot

6. I want to delete my plan if no longer needed

Screenshot

7. I want to see feedback messages so that I know that my plan was created, edited or deleted

Screenshot

8. I want to be able to view previous plans to help me prepare the following week’s workout

Screenshot

9. I want to find inspiration for my workouts and be able to use search option to find a particular exercise

Screenshot

10. As a returning user, I want to log in to the app to see my current plans

Screenshot

11. I want every site visitor to be able to view the catalogue of exercises

Screenshot

12. I want only the logged-in users to be able to create their plans

Screenshot

13. I want users to be able to create the plan on any day that suits their needs

Screenshot

14. I want data entry to be validated on sign-up page

Screenshot

15. I want the user to come to a 404 error page instead of having to use the browser back button if they enter a URL that does not exist

Screenshot

16. I want user to be able to contact me and provide their feedback

Screenshot

17. I want user to receive feedback if their message in contact form has been sent.

Screenshot

18. I want my site to be fully responsive

Screenshot

19. I want to see details of a specific exercise and get an idea how to perform it correctly

Screenshot

20. I want a paginated list of exercises so that I can easily select an exercise to view

Screenshot

21. I want to be able to log out from my account

Screenshot

22. I want to be able to see details of my account on the profile page

Screenshot

23. I want to be able to delete my account if I decide to no longer use the app

Screenshot

Automated testing was done using the Django's unit tests from a Python standard library module: unittest. The reports were produced using the coverage tool.

• Exercises app:

• Home app:

• Plannerapp app:

The website was tested using Google Chrome Developer Tools Toggle Device Toolbar to simulate viewports of different devices.

The website was tested on the following devices:

• ASUS ZenBook (tablet screen)
• Samsung Galaxy Tab A (tablet screen)
• Samsung S7 (mobile screen)

• Testing has been carried out on the following browsers:
  • Googe Chrome Version 101.0.4951.41 (Official Build) (64-bit)
  • Firefox Browser 99.0.1 (64-bit)
  • Microsoft Edge Version 101.0.1210.32 (Official build) (64-bit)

To set up the project to send emails and to use a Google account as an SMTP server, the following steps are required:

1. Create an email account at google.com, login, click you user icon and then on 'Manage Your Google Account'
2. Click on the Security tab
3. Turn on 2-step verification and follow the steps to enable
4. Click on App passwords, click on Select app and choose Other
5. Give your app a name and click on 'Generate'
   
6. A 16 digit password will be generated, note the password down
7. Set the below variables within the settings.py file to successfully send emails
   EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_HOST_USER = os.environ.get('EMAIL_HOST_USER')
EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_HOST_PASSWORD')
EMAIL_PORT = '587'
EMAIL_USE_TLS = True
8. Set up the variables EMAIL_HOST_USER and EMAIL_HOST_PASSWORD in your Render application Config vars

1. Go to the GitHub repository
2. Click on Fork button in top right corner
3. You will then have a copy of the repository in your own GitHub account.

1. Go to the GitHub repository
2. Locate the Code button above the list of files and click it
3. Highlight the "HTTPS" button to clone with HTTPS and copy the link
4. Open commandline interface on your computer
5. Change the current working directory to the one where you want the cloned directory
6. Type git clone and paste the URL from the clipboard

$ git clone https://github.com/aleksandracodes/CI_PP4_Workout_Planner

7. Press Enter to create your local clone

• Bodybuilding.com & Regainedwellness for description of the exercises used within this app

Images used in this app were found via Google Search Engine. I'm not able to list all the sources but would like to emphasise that I'm not the author of any of them, except for the background image

• Some pictures used in this app were taken from the CrossFit® youtube channel (screenshot), e.g. bench press
• Picture of Hip thrust exercise taken from here
• Picture of Pull up exercise taken from here
• Picture of Triceps kick back taken from here
• Picture of Romanian Deadlift exercise taken from here
• Picture of Broad jump exercise taken from here
• Picture of Jumping Jack exercise taken from here
• Picture of Hammer Curls exercise taken from here
• Home page images: feepik & PNG ALL
• This picture was used for error pages
• The background image was created by the developer with Canva

• How to create sign in and out page inspired by this tutorial later in the developement replaced using django allauth
• How to render formatted text in the admin area on the website by GitHub
• How to represent day of the week with names instead of dates – source
• Youtube tutorial on how to create exercise filter
• Model forms:
  • Youtube tutorial explaining model forms and forms widget
  • GET and POST methods on forms - source
  • ModelForm and save() method - source
• FormSets:
  • Geeksforgeeks brilliant tutorial on how to create and use Django formsets
  • Stackoverflow - template for formset using {{formset.management_form}}
  • Youtube tutorial with explanation of Form Set Factory
  • Stackoverflow used for creating a table with forllop counter
  • Youtube tutorial was used for EditPlan class get method
  • This source was used to learn how to delete the form field label in the planner
• Lear about form widgets
• Stackoverflow explanation between blank & null in the database
• Pagination used in the view_plans page explained in the course materials from Code Institute
• Pagination with filters created using Youtube tutorial and caktusgroup.com
• Feedback messages taken from Code Institute 'I think therefore I blog' walkthrough project
• Collapsible navbar effect created with this Youtube tutorial
• How to send emails with Django and Gmail – Youtube & dev.to
• Sticky first column in the table created with help of this source
• Arrows for plans pagination taken from here
• Stackoverflow - prevent choosing the same start day if the plan already exists
• Stackoverflow - catch Integrity Error and show a customized message using template

I would like to thank everyone who supported me in the development of this project:

• Code Institute Tutors for their great assistance
• My mentor Mo for professional guidance and helpful feedback
• Code Institute community on Slack for resources and support
• Friends and family for words of encouragement