Git Product home page Git Product logo

workout_prescription's Introduction

Workout_Prescription

image (3)

  • 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.

Live Site

Repository

Author

Nara Gurgel

Table of contents

UX

Target Audience

  • 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.

Design Choices

  • 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.

Colours

  • 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.

image

Typography

  • 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.

image

Images

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.

Design Elements

  • desktop navigation
  • mobile navigation
  • footer
  • containers/cards
  • buttons
  • text input
  • textarea inputs
  • modals/layers
  • pagination
  • images
  • icons
  • tables
  • Dropdown

Frameworks

  • 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.

Custom Styles

  • I made some changes to the fonts, font sizes and colours of the fonts and background. It's all in the folder CSS

Custom Javascript

  • I made time duration of the alert message using JavaScript. It's in the folder Base

Wireframes

  • Desktop view unauthenticated user

Desktop Unau

  • Desktop view authenticated user

Desk aut

  • Desktop staff member logged

staff desk

  • Mobile view unauthenticated user

mobile un

  • Mobile view authenticated user

mobile aut

  • Staff member logged

mobile staff

Information Architecture

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

Entity Relationship Diagram

  • User:

image

  • Admin:

image

Database Choice

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.

Data Models

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.

CRUD Diagrams

image

Agile Process

Project Goals

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)

Initial User Stories

  • 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.

Feasibility vs Importance

image

Scope

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.

Agile Tool

User Story Example

image

Epic Stories

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.

image

Features

Home Page (Visitor)

  • 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.

ezgif com-crop

Workout Page (Visitor)

  • There is a section for Workout but to see the workouts, you must be registered.

image

Logged (Staff member)

  • 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.

image

Mobile:

image

Exercise List (Staff member)

  • Where you can find the list of exercises added, which you can delete and update.

Desktop: image

Add Exercise (Staff member)

  • Where you can add an item to the list of exercises.

image

Workout Item List (Staff member)

  • Where you can find the list of exercises added, with details like how many reps and sets, you also can delete and update.

image

Add Item (Staff member)

  • Where you can add details to the exercises added before.

image

Workout List (Staff member)

  • 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)

image

Workout (Registered user)

  • 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.

image

image

Sign in

  • Where the user can be authenticated and have access to their account.

image

Sign out

  • Sign out of the account.

image

Sign up

  • Where the visitor could sign up to get prescriptions.

image

Implemented Features

Header

image

Footer

image

Main

image

404 error page

404

500 error page

500

403 error page

image

Unauthenticated user

image

Superuser authenticated - The admin/superuser have full access to CRUD functionality.

image

Messages Display

Confirmation messages

image

image

image

image

image

validation of form inputs

image

image

image

Sign Out/ Delete confirmations questions

image

image

Future Features

  • 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

Testing

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.

Manual Testing

Unauthenticated User

Footer

Sign Up

Regular User Logged In

Staff User Logged In

Sign out

Exercise list Page

Add Exercise

Workout Item list

Add Exercise

Workout List- admin

Workout List- regular user

Compatibility and Responsive Testing

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

Accessibility Testing

Accessibility Audits

Homepage

image

Workout (user unauthenticated)

image

Login

image

Register

image

User authenticated

image

  • Details: image

Log out

image

Exercise List- Staff member/ Admin

image

Add Exercise - Staff member/ Admin

image

Workout Items List - Staff member/ Admin

image

Add Item - Staff member/ Admin

image

Workout List - Staff member/ Admin

image

Validation Testing

CSS Validation

Style.css

CSS

HTML Validation

Home page

image

Workout page - Visitor

image

Login

image

Register

image

Confirm delete- admin/staff user

image

Exercises- admin/staff user

image

Add Exercise- admin/staff user

image

Workout Item- admin/staff user

image

Add Item- admin/staff user

image

Workout List- admin/staff user

image

Workout Details

image

Sign out

image

Workout -user authenticated logged

image

404

image

403

image

500

image

JavaScript Validation

Home page

JS

Python Validation

Exercise

models exerc

Homepage

models homepage

Workout Item

models workout item

Workout

models workout

Admin

admin py

Apps

apps py

Forms

forms py

Models

models py

URL's

url py

image

Settings

settings py

wsgi

wsgi py

Manage

manage py

Defects

I've made miletones to group all the defects and make them easier to been found.

Defects of Note

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

Outstanding Defects

  • There are no known functional or visual outstanding defects at this time.

Technologies Used

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.

Languages

-HTML, CSS, JAVASCRIPT, PYTHON, DJANGO

Frameworks, Libraries & Programs Used

  • Balsamiq
  • Coolors.co
  • fontawesome
  • gitpod
  • github
  • google fonts
  • font awesome
  • amiresponsive
  • table of contents creator
  • markdown table generator

Deployment

Prerequisites

To run this project, you need a CLOUDINARY_URL:

  1. Cloudinary Account:
  • Create an account on Cloudinary if you don't have one.
  • Access the Cloudinary dashboard.
  1. 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.

image

3. **Set Environmental Variables:** - Once you have obtained the API Key and Secret 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.

You will alsoo need to obtain the DATABASE_URL, to do that follow these steps:

  1. 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.
  1. 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.
  1. 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.
  1. 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.

Fork and Clone the Repository

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:

  1. login to your own gitHub account
  2. navigate to my repository
  3. In the top right corner of the page, click fork

image

  1. set yourself as the owner
  2. change the name of the repo if you want
  3. add a description if you want
  4. choose what to copy, typically the main branch only
  5. click the snazzy green button

image

  1. To get files to your local environment, you need to clone it: click the code button
  2. Copy the url as needed (here's gitHub instructions)[https://docs.github.com/en/get-started/quickstart/fork-a-repo#cloning-your-forked-repository}

Production Deployment

To get started with local development in GitPod or your preferred IDE, follow these steps:

  1. Install the GitPod Chrome extension from the Chrome Web Store.
  1. Once the extension is installed, navigate to your forked repository on GitHub.
  2. Click on the green "GitPod" button to open the repository in GitPod.
  3. After the workspace is created, you can start the development process.
  4. Install the Python packages by running the following command in the terminal:
  • pip3 install -r requirements.txt
  1. Create an 'env.py file in the project's root directory to store your environment variables.
  2. 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>
  1. Apply databse migrations to set up the database by running the following command:
  • python3 manage.py migrate
  1. Create a superuser account that allows you add and inspect data via Django admin by running the following command:
  • python3 manage.py createsuperuser
  1. Start the server by running the following command:
  • python3 manage.py runserver
  1. Now you can access the application by opening the provided URL in your browser.

Credits

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.

Media

Pexels - The homepage Image was taken from Pexels. Font Awesome - The icons was taken from Font Awesome.

Acknowledgments

  • 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

workout_prescription's People

Contributors

naragurgel avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.