- This is a website that offers a variety of fitness programs to help you achieve your health and fitness goals. Whether you're looking to lose weight, build muscle, or simply improve your overall health. The trainers create personalized training programs tailored to your individual needs and goals.
- The user can access a personalized workout plan from anywhere with an internet connection, at any time that suits the schedule.
Nara Gurgel
- UX
- Information Architecture
- Agile Process
- Features
- Home Page (Visitor)
- Workout Page (Visitor)
- Logged (Staff member)
- Exercise List (Staff member)
- Add Exercise (Staff member)
- Workout Item List (Staff member)
- Add Item (Staff member)
- Workout List (Staff member)
- Workout (Registered user)
- Sign in
- Sign out
- Sign up
- Implemented Features
- Unauthenticated user
- Messages Display
- Future Features
- Testing
- Manual Testing
- Compatibility and Responsive Testing
- Accessibility Testing
- Validation Testing
- Defects
- Defects of Note
- Outstanding Defects
- Technologies Used
- Deployment
- Credits
- The Workout prescriptions page is designed for both men and women of various age groups who are interested in maintaining a healthy and active lifestyle. These users are typically health-conscious, fitness enthusiasts, and may have specific interests such as weight loss, muscle building, or overall well-being.
- The website will prioritize intuitive navigation and clear communication of workout instructions. The simplicity of the design ensures a user-friendly interface, allowing users to easily navigate and engage with their workout plans without distractions.
- Colour scheme predominantly consisting of tons of black, green and white. The use of black provides a sense of professionalism, green refreshing and energetic touch, symbolizing growth and vitality, aligning with the health and wellness focus of the website. White is promoting a visually calming experience.
- The typography has intuitive layout contribute to a clarity and ease of use throughout the website. Montserrat- Its clear letter forms and excellent readability make it suitable for important information and instructions related to workout plans. Roboto Condensed- It is a condensed sans-serif font that offers a balance between professionalism and legibility.
The reason for the cover photo to be dumbbells is mainly because dumbbells are an iconic symbol of strength training and fitness, which is the website's focus. The photo of dumbbells creates an immediate visual association with exercise, motivating and inspiring users to engage in their prescribed workouts and pursue a healthier lifestyle.
- desktop navigation
- mobile navigation
- footer
- containers/cards
- buttons
- text input
- textarea inputs
- modals/layers
- pagination
- images
- icons
- tables
- Dropdown
- Bootstrap: I opted to utilize Bootstrap for my website due to the design elements that it supports. It also has a design that adapts to various devices. The ready-made templates and components provided invaluable time-saving advantages.
- I made some changes to the fonts, font sizes and colours of the fonts and background. It's all in the folder CSS
- I made time duration of the alert message using JavaScript. It's in the folder Base
- Desktop view unauthenticated user
- Desktop view authenticated user
- Desktop staff member logged
- Mobile view unauthenticated user
- Mobile view authenticated user
- Staff member logged
Workout prescription uses Django All Auth for user and roles management and has three custom models used to present workouts to users:
- Exercise
- WorkoutItem
- Workout
- User:
- Admin:
Postgres because of the hosting capabilities of Heroku enables effortless deployment and expandability, and PostgreSQL stands out as one of the endorsed and suggested databases on the Heroku platform.
Exercise model:
-
name: CharField with a maximum length of 200 characters. It represents the name of the exercise.
-
Create: If a staff user is logged in, they will see a menu option to add an exercise
-
Read: If a staff users is logged in, they can see exercises in the system on the Exercise List Page
-
Update: If a staff user is logged in, they will an option to update an exercise on the Exercises List Page
-
Delete: If a staff user is logged in, they will see an option to delete an exercise on the Exercises List Page.
ExerciseAdmin: This admin configuration is registered for the Exercise model so it can be touched in the Django admin by staff users too.
search_fields: It specifies that the name field should be searchable in the admin interface.
WorkoutItem model:
-
exercise: ForeignKey to the Exercise model, with on_delete=models.CASCADE specified. It represents the exercise associated with the workout item.
-
reps: PositiveIntegerField, representing the number of repetitions for the workout item.
-
sets: PositiveIntegerField, representing the number of sets for the workout item.
-
Create: If a staff user is logged in, they will see a menu option to add an Item
-
Read: If a staff users is logged in, they can see Workout Items in the system on the Workout Items List Page
-
Update: If a staff user is logged in, they will an option to update an item on the Workout Items List Page
-
Delete: If a staff user is logged in, they will see an option to delete an item on the Workout Items List Page.
WorkoutItemAdmin: This admin configuration is registered for the WorkoutItem model, so staff users can interface with the model in the Django admin too.
search_fields: It specifies that the exercise field should be searchable in the admin interface.
Workout model:
-
owner: ForeignKey to the built-in User model from django.contrib.auth.models, with related_name="user_id" and on_delete=models.CASCADE specified. It represents the owner of the workout.
-
name: CharField with a maximum length of 250 characters. It represents the name of the workout.
-
instructions: TextField with a maximum length of 1000 characters, allowing null values and blank values. It represents the instructions for the workout (optional).
-
exercises: ManyToManyField to the WorkoutItem model. It represents the exercises included in the workout.
-
Create: Creating workouts can only be done in the django admin at this time
-
Read: If a user is logged in, they will see workouts associated with their account on the Workout List page. They can also click on it to see a detailed view. Staff users will see a list of all workouts in the system.
-
Update: Updating workouts can only be done in the django admin at this time.
-
Delete: Deleting workouts can only be done in the django admin at this time.
WorkoutAdmin: This admin configuration is registered for the Workout model so that staff users can do the Create, Update and Delete of workouts through the django admin interface.
list_display: It specifies that the admin interface should display the owner and name fields in the list view. search_fields: It specifies that the name and owner fields should be searchable in the admin interface. ordering: It specifies that the list of workouts should be ordered by the owner field.
Activities Model
CRUD Operations: Create: Create a exercise or a workout list to each user.
Read: The workout sheet is visible on the workout list page and the user can have access to his own workout by accessing the website.
Update: The workout can be updated when the staff member wants to change anything on the prescription.
Delete: The workout or exercise can be deleted if a staff member wants to change the workout prescriptions.
The purpose of the workout prescription website is to provide a comprehensive platform for individuals to access personalized and effective workout plans tailored to their specific fitness goals, preferences, and medical conditions.
For users:
- some just come and read the benefits related to the workout prescriptions online.
- some users are registered, so they receive a online prescription
For administrators:
- the personal trainers are administrating the site (adding, updating & deleting models)
- As a website visitor, I want to be able to create a user profile so that I can access personalized workout prescriptions.
- As a user, I want the website to offer a variety of workout options, including cardio, strength training, and flexibility exercises, so that I can have a well-rounded fitness routine.
- As a user with specific health conditions, I want the website to offer workout recommendations tailored to my needs, so that I can exercise without compromising my health.
- As a user, I want the website to provide a variety of workout routines and exercises, so that I can keep my workouts interesting.
- As a coach, I want to have the option to customize all workout plan by adding or removing specific exercises, so that I can tailor it to my preferences and user's needs.
- As an trainer, I want to be able to create and manage the available workouts in the system.
- As a trainer, I want to be able to assign workout prescriptions to my clients so that I can help them reach their fitness goals.
- As a user, I want to check sets, reps, rest time for each exercise in my workout prescription.
- As a user, I want to visit the website to receive personalized exercise plans and guidance, so that I can achieve my fitness goals effectively.
- As a user, I want to log in to my account so that I can securely access my workout prescription personalized information.
- As a user, I want to have a user-friendly interface that guides me through the website to register and to access my workout.
- As a trainer, I want to delete a workout, so I can remove it from my list of saved workouts if it's no longer relevant.
In order to define a prioritized list of user stories for a minimal viable product based on the project goals, some scope reduction was performed to focus on the essential features within the available skill set. The main objective was to deliver a basic but functional version of the workout website. The prioritized user stories include functionalities such as viewing a list of exercises and workouts, creating new workouts, and searching for workouts by name. Additionally, the ability to create exercises and search for exercises by name were included. These core features were deemed essential to provide users with a basic experience of browsing on the workouts, while allowing the admin to manage exercises list.
EPIC: User could easily see the workout when they are logged on the website, they can intuitively access the workout page on both, mobile and desktop devices. The workout page gives the instructions to the user when they click on the workout's name. The information is easy to understand and very clear.
USER STORY: Workout Routines: As a user, I want the website to provide a variety of workout routines and exercises, so that I can keep my workouts interesting.
- On the homepage of the Workout Prescription website, you will be able to visualize the welcome message and the hero image. You will also see the buttons to login or sign up.
- There is a section for Workout but to see the workouts, you must be registered.
- If you log in as a staff member, you will be able to see sections like 'Exercises List", "Add Exercise", "Workout Item List", "Add Item" and "Workout List". There is a button to logout.
Mobile:
- Where you can find the list of exercises added, which you can delete and update.
- Where you can add an item to the list of exercises.
- Where you can find the list of exercises added, with details like how many reps and sets, you also can delete and update.
- Where you can add details to the exercises added before.
- You will be able to see the list of workout sheets, with names and owners; if you click on it, you will be redirected to the details of the workout (it's the same page as the workout registered user below)
- The user can access the workout sheet if the user is registered. Clicking on the workout name they will be redirected to the workout details.
- Where the user can be authenticated and have access to their account.
- Sign out of the account.
- Where the visitor could sign up to get prescriptions.
- Ability to update and create users within program vs django admin
- Ability for staff users to sort and filter workouts by exercises or clients
- Quick way to clone workouts so they are quicker to create
- Ability to sort and filter exercises
- Ability to sort and filter workout items
I have carried out the manual testing in order to guarantee the effectiveness and user-friendliness of the Workout Prescriptions website. To access the comprehensive testing results, kindly click on the provided link here.
Tool/Device | Browser | OS | Viewport |
---|---|---|---|
Iphone 13 | Safari | V16.3 | 390 x 664 px |
Iphone 12 | Safari | V14.1 | 390 x 664 px |
OnePlus | Chrome | v9.0 | 412 x 757 px |
Samsung Galaxy | Firefox | v12.0 | 384 x 702 px |
Google Pixel | Chrome | v13.0 | 412 x 796 px |
Ipad Pro | Safari | v16.2 | 1024 x 1292 px |
Windows PC | Edge | Windowns 11 | 1336 x 667 px |
Mac PC | Safari | Safari 15.6 | 1336 x 667 px |
Windows PC | Chrome | Chrome | 1336 x 667 px |
Confirm delete- admin/staff user
Add Exercise- admin/staff user
Workout Item- admin/staff user
Workout List- admin/staff user
Workout -user authenticated logged
I've made miletones to group all the defects and make them easier to been found.
You can find the defects I had and the full description on the link below:
-
Footer: The footer was moving up and down accordingly with the page content.
-
Style: The Heroku was not deploying the CSS file.
-
Sign up: When a new user was tying the email and submitting the page was showing an error
- There are no known functional or visual outstanding defects at this time.
JavaScript | JavaScript played a vital role in providing dynamic interactivity to the messages. |
---|---|
Python | Python is a versatile programming language that was extensively utilized to write all the code in the application. |
Django | Django is a powerful Python web framework used for efficient development, handling database interactions, and implementing secure authentication in the project. |
PostgreSQL | PostgreSQL was utilized to store and manage the project's data efficiently. |
Bootstrap | Bootstrap was employed to ensure a responsive design, making the website adapt seamlessly to different screen sizes and devices. |
Font Awesome | Font Awesome was utilized to enhance the overall design of the website by providing a collection of icons that could be easily integrated. |
GitHub | GitHub served as the primary development environment, facilitating code management and effective tracking of changes made to the project. |
Heroku | Heroku was utilized as the deployment platform for the website, making it accessible to users over the internet. |
Google Developer Tools | Google Developer Tools, specifically DevTools, played a crucial role in bug detection, testing the website's responsiveness, and resolving issues across different devices. |
Jigsaw | Jigsaw was utilized to validate CSS code, ensuring its compliance with the specified standards and best practices. |
CI's pep8 | CI's pep8 tool was used to validate all Python code, ensuring adherence to coding standards and maintaining consistency throughout the project. |
Coloors | Coloors was utilized as a tool to generate a colour palette for the website design. |
W3 HTML | W3 HTML to validate the HTML code, ensuring its correctness and compliance with web standards. |
Jshint | Jshint was used to validate JavaScript code, ensuring its quality, identifying potential errors, and promoting best practices. |
Cloudinary | Cloudinary was utilized as a cloud-based storage service to store and manage all static files and images used in the project. |
Mermaid | Mermaid was used to create diagrams, providing a visual representation of various aspects of the project's architecture and workflow. |
Gitpod | Gitpod provided an online development environment. |
Markdown Table Generator | Markdown Table Generator was utilized as a tool to create tables in Markdown format, simplifying the process of generating well-formatted tables. |
AmIResponsive | AmIResponsive was used to generate screenshots of the website in various device sizes, providing a quick visual assessment of its responsiveness and compatibility. |
Balsamiq | Balsamiq served as a wireframing tool, enabling the creation of visual representations of the website layout and structure, aiding in the design process. |
Lighthouse | Lighthouse, a web performance testing tool, was used to assess the accessibility and performance of the website. |
-HTML, CSS, JAVASCRIPT, PYTHON, DJANGO
- Balsamiq
- Coolors.co
- fontawesome
- gitpod
- github
- google fonts
- font awesome
- amiresponsive
- table of contents creator
- markdown table generator
To run this project, you need a CLOUDINARY_URL:
- Cloudinary Account:
- Create an account on Cloudinary if you don't have one.
- Access the Cloudinary dashboard.
- Obtain API Key and Secret URL:
- In the Cloudinary dashboard, navigate to your account settings.
- Look for the section related to API credentials or environments variable.
- Locate the API Key and Secret URL.
- Copy the API Key and Secret URL, as you will need them to configure the application.
You will alsoo need to obtain the DATABASE_URL, to do that follow these steps:
- Visit the ElephantSQL website:
- Go to https://www.elephantsql.com/ in your web browser.
- Sign up or log in: If you don't have an account, sign up for a new account. Otherwise, log in to your existing account.
- Create a new instance: After logging in, click on the "Create new instance" button.
- Select a plan: Choose a plan that suits your needs. ElephantSQL offers both free and paid plans, so select the one that fits your requirements.
- Configure your instance: Provide a name for your instance and select the desired region. You can also customize additional settings like the PostgreSQL version and the maximum number of connections.
- Create the instance: Click on the "Create" button to create the instance.
- Access your instance details: Once the instance is created, you will be redirected to the instance details page. Here, you can find important information, including the DATABASE_URL.
- Obtain the DATABASE_URL
- On the instance details page, locate the "Connection" section.
- You will see the DATABASE_URL listed there. It typically follows the format: postgres://username:password@host:port/database. Copy the entire DATABASE_URL.
- Set Environmental Variables:
- Once you have obtained the DATABASE_URL, you need to set them as environmental variables in your development environment.
- Depending on your operating system and development environment, the steps to set environmental variable may vary.
To keep the main repository for this project clean, please fork the repository into your own account. GitHub has forking directions but here's what you might do:
- login to your own gitHub account
- navigate to my repository
- In the top right corner of the page, click fork
- set yourself as the owner
- change the name of the repo if you want
- add a description if you want
- choose what to copy, typically the main branch only
- click the snazzy green button
- To get files to your local environment, you need to clone it: click the code button
- Copy the url as needed (here's gitHub instructions)[https://docs.github.com/en/get-started/quickstart/fork-a-repo#cloning-your-forked-repository}
To get started with local development in GitPod or your preferred IDE, follow these steps:
- Install the GitPod Chrome extension from the Chrome Web Store.
- Once the extension is installed, navigate to your forked repository on GitHub.
- Click on the green "GitPod" button to open the repository in GitPod.
- After the workspace is created, you can start the development process.
- Install the Python packages by running the following command in the terminal:
- pip3 install -r requirements.txt
- Create an 'env.py file in the project's root directory to store your environment variables.
- In the 'env.py file, add the following variables, but make sure not to disclose real values:
- SECRET_KEY=<YOUR_VALUE>
- CLOUDINARY_URL=<YOUR_VALUE>
- DATABASE_URL=<YOUR_VALUE>
- Apply databse migrations to set up the database by running the following command:
- python3 manage.py migrate
- Create a superuser account that allows you add and inspect data via Django admin by running the following command:
- python3 manage.py createsuperuser
- Start the server by running the following command:
- python3 manage.py runserver
- Now you can access the application by opening the provided URL in your browser.
This workout prescription project was created with help, support, and resources from the following:
- Stack Overflow: A valuable resource for finding solutions to coding challenges and getting insights from the developer community.
- Pexels: A platform that provided high-quality royalty-free images used in the project.
- Font Awesome: for the variety of icons available.
- Bootstrap: For the responsive design and also great style.
- MDN Web Docs: Another page for resource for finding solutions to coding challenges and getting insights from the developer community.
- Code Institute: Platform that offered informative content, tutorials, and projects that helped in developing and structuring this workout prescription website.
- Code Institute Template
- Modules and Libraries: Various modules and libraries were utilized throughout the development process, including Django, Mermaid, and more. These modules and libraries greatly contributed to the functionality and aesthetics of the website.
A special thanks to the mentors, tutors and fellow learners at Code Institute for their guidance and support during the project's development.
Pexels - The homepage Image was taken from Pexels. Font Awesome - The icons was taken from Font Awesome.
- Code Institute walkthrough project 'I think Therefore I blog', which was where I had the initial ideas of how to start my project.
- Mentor: Malia - Since the first project, always supporting me in the best way, helping with doubts and showing the best ways to develop the project
- Team of tutors that helped me with the bug that was not deploying to my site on Heroku, they were super helpful and dedicated until we managed to find a solution.
- My friend Gustavo Chahm, who is already a senior software developer, he answered many doubts that I had, he showed me the best ways to develop the site, always explaining everything with clarity and patience