Git Fit

Git Fit is a fitness subscription application.

The user's goal is to join a fitness community and purchase exercise plans and merchandise.

The site owner's goal is to build an active community around the product based on subscription and individual payments models, and to sell: exercise plans, nutrition plans, nutrition products and exercise products

Must haves for this project:

• Authentication and authorisation mechanism for users and administrators
• Individual item purchase capability

Nice to have:

• Functionality that allows subscribers to update fellow members on their successes, perhaps a forum?
• User profiles containing information that map to nutrition and/or exercise plans
• Product reviews
• A subscription-based payment model: on offer are 3 subscriptions, based on duration of subscription. Subscriptions get you access to workouts, nutrition plans, the community and a discount on the shop

To see the site in action, visit Git Fit

Initially I wanted to name the project Fit Family, and create a more family oriented webapp, but I didn't like the colour palette and couldn't find suitable images. Leftovers from this are still present in the code, but it doesn't affect the webapp.

UI and UX

User stories

Not all User Stories have been completed. Basic shopping functionality has been completed, but user stories that are about the community side of the project have yet to be resolved.

Viewing and Navigation

Registration and User Accounts

Sorting and Searching

Purchasing and Checkout

Community

Admin and Store Management

Viewing and Navigation - Workouts

Sorting and Searching - Workouts

The 5 Planes of Design

Jesse James Garret's 5 planes of UX design were used to design the site. I started off at the Strategy Plane:

Strategy Plane

The main goal for visitors is to find and join a fitness community they might like.

This means giving visitors a feeling about the kind of community they are joining.

Git Fit sets out to be no nonsense and active, aggressive almost. Git Fit is for goal-oriented people. For now it is just a shop, but by adding subscriptions, we can create a community, with exercise and nutrition plans and a way for subscribers to connect.

So the main page has to have a call to action in the form of a button to take you to subscriptions. We also need a hero image that exemplifies the image of Git Fit. Some brief text to indicate what subscribers gain access to would also be good.

We also indicate that there is a shop, workouts and account option by having options for these in the navbar.

Scope Plane

The functional specifications of the site:

• a responsive website with mobile first design.
• a main page with a hero image, call to action (join our community) and navbar options indicating the shop and user account functionalities.
• a navbar with menus that if a user is logged in or not.
• a footer.
• a profile page, only accessible when logged in. Here members can set up their shopping details, but also personal details which map to exercise and nutrition plans.
• a page where subscribers can share their progress with other subscribers - not yet implemented.
• a shop page, containing items for sale. Signed in users have the option to review items (not yet implemented).
• a page containing exercises, only available for subscribers - not yet implemented.
• a page containing nutrition plans, only available for subscribers - not yet implemented.

Content requirements:

• a hero image evoking the idea of "active, aggressive, simplicity".
• some exercise and nutrition plans - not yet implemented.
• some items for sale.
• some example subscribers - not yet implemented.

Structure Plane

All pages should have the same navigation bar and footer:

• the navigation bar contains links to all the pages, as well as the home page. The content does change depending on login status.
• the footer contains the company logo, icons for various creditcards and links to social media pages.

The Home Page

• a hero image evoking the idea of "active, aggressive, simplicity".
• a call to action to subscribe.
• features that indicate the benefits of subscribing. Admins can change these features using the admin portal.

The Profile Page

• a form where subscribers can fill in their shopping details, but also personal details which map to exercise or nutrition (not yet implemented).

The Community Page - not yet implemented

• inspiring imagery.
• a form where subscribers can share their progress with fellow subscribers.

The Shop Page

• items for sale.
• shop alerts, to make visitors aware of deals for instance. Admins can change these alerts using the admin portal.
• the option to review items for signed in users (not yet implemented).
• search functionality to search for items

The Workouts Page

• exercises for the subscriber to choose from.
• search functionality to search for exercises: not yet implemented.

The Nutrition Page - not yet implemented

• several nutrition plans to choose from.

Skeleton Plane

The navigation bar will be added to the top of every page and will always remain visible. It contains a home link on the left side, a search bar for searching in the store in the middle, an icon containing the workout options, an icon containing the account options - register and login, and if you're logged in a link to your profile, and if you're a superuser, a link to add a product.

There is also a cart icon, which updates when you add items to your cart and which links to the cart page, from where you can do checkouts.

There are links to all pages on this navbar, though some links are only visible if the user has logged in. On the left will be the logo, which when clicked upon will take the visitor back to the home page.

The home page has a hero image, a call to action to register, a button to take you to the shop and features of subscriptions.

The shopping page has cards for the products. You can choose different categories of products, sort by price and category and rating and click on a product to get more information and add it to your cart.

The cart page keeps track of the items you've added to your cart, giving you a running total and the option to check out.

The checkout page allows you to fill in shipping details and a creditcard for payment.

The checkout success page contains a summary of your order and order details.

The profile page contains a form to fill in delivery details or show prefilled delivery details, and has links to the order history for registered users.

The workouts page has cards for different workouts. You can choose workouts by body part they target, equipment needed or specific muscle groups they target. You can click on a workout to get more information about it.

At the bottom of every page will be the same footer, containing the brand, icons of various payment methods and links to various social media sites.

Surface Plane

We use icons from Font Awesome to add some visual interest but also visual cues to indicate functionality.

We use Bootstrap as a basis, but add our own style. Git Fit needs to look no-nonsense, active, almost aggressive. To create a bold, active, almost aggressive look we use a black, red and white color scheme, similar to Netflix.

The header font is also chosen to reflect this: a slab serif font that is bold and in your face.

Buttons have no rounded borders, to create a sleek design. Red is mainly used as an accent color, to draw attention to elements on the page.

Wireframes

These wireframes were used as a basis to design the actual webapp. However, sometimes the actual project deviates from the wireframes, because the endresult looked better or was more easily achieved than the wireframe.

• Home
• Home - tablet
• Home - mobile
• Shop
• Shop - tablet
• Shop - mobile
• Product
• Product - tablet
• Product - mobile

The layout of the workouts section is very similar to the shop and product pages, just with some slight change in details.

• Product: add to cart
• Cart
• Cart - tablet
• Cart - mobile
• Checkout
• Checkout - tablet
• Checkout - mobile
• Checkout success
• Checkout success - tablet
• Checkout success - mobile
• Email confirmation
• Profile
• Profile - tablet
• Profile - mobile
• Login
• Login - tablet
• Login - mobile
• Forgot password
• Forgot password - tablet
• Forgot password - mobile
• Register
• Register - tablet
• Register - mobile
• Admin portal

Database Design

The database design can be found here There are 11 models:

1. Profiles
2. Orders
3. Order Line Items
4. Products
5. Product Categories (only editable via admin portal)
6. Workouts
7. BodyParts (linked to Workouts, only editable via admin portal)
8. Equipment (linked to Workouts, only editable via admin portal)
9. Targets (linked to Workouts, only editable via admin portal)
10. Features (only editable via admin portal)
11. ShopAlerts (only editable via admin portal)

The Profiles model is linked to the allauth User model, but I don't know how this model is constructed.

Features

Existing Features

• the home page, with hero image, call to action and features
• the navbar, with links to login and register hidden behind the "My Account" menu, a search bar, and various shopping links. Also has an icon representing the visitor's shopping cart, which updates when items are added.
• a shop page, where the user can sort products by for instance price and category, and can select products from different categories.
• each product on the shop page links to a product details page, where users can find out more about the product, select a quantity and add it to their cart. This page also contains a breadcrumb and a category label, to allow quick navigation in the shop.
• a cart, accessible by clicking on the cart icon, where users can see the products in their cart, adjust the quantity, inspect a product's details and actually purchase the items
• a checkout page, where users can fill in their shipping details and creditcard information
• a checkout success page, where users get a confirmation of their order
• various user authentication pages: login, register and forget password. Also includes a profile page, where users can view and edit their delivery details and see their orders.
• a workout page, where the user can sort workouts by for instance rating and category, and can select workouts from different categories.
• each workout on the workouts page links to a workout details page, where users can find out more about the workout. This page also contains a breadcrumb and a category label, to allow quick navigation in the workouts page.

Features Left to Implement

• newsletter functionality, where visitors can sign up for the newsletter.
• giving customers the ability to choose the size of an item, where applicable
• related products functionality, showing related products when looking at product details
• subscriptions: giving registered users the option to sign up for, change and end their subscriptions
• the subscriber section, where subscribed users get access to exercises, nutrition plans and the community
• the option for subscribers to review products
• allowing subscribers to favorite workouts

Technologies Used

• HTML5: provides the content and structure of the site.
• CSS3: provides the formatting, layout and styling of the site.
• Bootstrap: provides a popular CSS framework with many custom elements to quickly bootstrap a site. I've used Bootstrap 4.6.
• Python3: the backend of the webapp.
• Selenium: software for automating and testing browser interactions. Used in this project to test functions of the webapp.
• FontAwesome: provides several icons I've used on the site.
• Visual Studio Code: a free IDE with enough features to be useful but not so many features as to confuse you.
• GitHub: for hosting the git repository.
• git: as one of the most popular source code management tools.
• Heroku: a Platform as a Service, for hosting the webapp.
• Balsamiq: for creating wireframes of all the pages.
• Chrome Developer Tools: for quick debugging and testing of HTML and CSS.
• Am I Responsive?: to generate screenshots of the site at various viewpoints, indicating responsiveness.
• Prettier VS Code plugin: a code formatter that helps with code formatting, which is good for creating a consistent style.
• Markdown link check: an automated tool to check for dead links in Markdown files.
• Todo Tree: to keep track of todos, bugs, things that need to be fixed and such in my project.
• autopep8: a Python package that helps with formatting Python code according to PEP8.
• dbdiagram.io: an online tool to create a relational database schema.
• Chromedriver: for doing Chrome browser based automated tests
• Django: the Python framework that helped to quickly bootstrap the project.
• black: a Python package that helps with formatting Python code according to PEP8.

Responsiveness of Pages

These screenshots indicate the responsiveness of the pages on various screens. Pages that require a login are not included, as are checkout and checkout success, as these require adding items to the cart.

• Home
• Products
• Product Details
• Cart
• Login
• Register
• Forgot Password

Testing

Tests for Readme.md:

• ✔️ A Github Action Workflow checks all the links in markdown files. There are some errors in here, but these are acceptable: 1 is for the locally running server, the other two are for websites that have received too many requests from this Github Action Workflow

Automated tests

There are some automated tests using Django's own testing capabilities. python manage.py test --verbosity=2

Output:

test_get_cart (cart.tests.TestViews)
When browsing to /cart/ we get ... ok
test_blank_feature (home.tests.TestModels)
When a feature is created with no ... ok
test_max_length_name_feature (home.tests.TestModels)
When a feature is created with a header longer than ... ok
test_get_home (home.tests.TestViews)
When browsing to / we get a 200 code, ... ok
test_get_login (home.tests.TestViews)
When browsing to /accounts/login we ... ok
test_get_password_reset (home.tests.TestViews)
When browsing to /accounts/password/reset ... ok
test_get_signup (home.tests.TestViews)
When browsing to /accounts/signup we ... ok
test_all_blank_product_category (products.tests.TestModels)
When a category is created with no ... ok
test_blank_description_product (products.tests.TestModels)
When a product is created with no description, ... ok
test_blank_fields_product (products.tests.TestModels)
When a product is created, category, sku, ... ok
test_blank_name_product (products.tests.TestModels)
When a product is created with no name, ... ok
test_blank_price_product (products.tests.TestModels)
When a product is created with no price, ... ok
test_blank_shopalert (products.tests.TestModels)
When a shopalert is created with no ... ok
test_friendly_name_blank_product_category (products.tests.TestModels)
When a category is created, friendly name is blank ... ok
test_max_length_image_url_product (products.tests.TestModels)
When a product is created with an image_url ... ok
test_max_length_name_product (products.tests.TestModels)
When a product is created with a name ... ok
test_max_length_name_product_category (products.tests.TestModels)
When a category is created with a name longer than ... ok
test_max_length_name_shopalert (products.tests.TestModels)
When a shopalert is created with a name longer than ... ok
test_max_length_sku_product (products.tests.TestModels)
When a product is created with a sku ... ok
test_delete_category_of_product (products.tests.TestViews)
When a category is deleted for a product, ... ok
test_all_blank_bodypart (workouts.tests.TestModels)
When a bodypart is created with no ... ok
test_all_blank_equipment (workouts.tests.TestModels)
When a equipment is created with no ... ok
test_all_blank_target (workouts.tests.TestModels)
When a target is created with no ... ok
test_blank_description_workout (workouts.tests.TestModels)
When a workout is created with no description, ... ok
test_blank_fields_workout (workouts.tests.TestModels)
When a workout is created, bodypart, equipment, ... ok
test_blank_image_workout (workouts.tests.TestModels)
When a workout is created with no image, ... ok
test_blank_name_workout (workouts.tests.TestModels)
When a workout is created with no name, ... ok
test_delete_fields_of_workout (workouts.tests.TestModels)
When the bodypart, equipment and target objects are deleted for a workout, ... ok
test_friendly_name_blank_bodypart (workouts.tests.TestModels)
When a bodypart is created, friendly name is blank ... ok
test_friendly_name_blank_equipment (workouts.tests.TestModels)
When a equipment is created, friendly name is blank ... ok
test_friendly_name_blank_target (workouts.tests.TestModels)
When a target is created, friendly name is blank ... ok
test_max_length_name_bodypart (workouts.tests.TestModels)
When a bodypart is created with a name longer than ... ok
test_max_length_name_equipment (workouts.tests.TestModels)
When a equipment is created with a name longer than ... ok
test_max_length_name_target (workouts.tests.TestModels)
When a target is created with a name longer than ... ok
test_max_length_name_workout (workouts.tests.TestModels)
When a workout is created with a name ... ok
test_get_workouts (workouts.tests.TestViews)
When browsing to /workouts/ we get a 302 code, ... ok

Coverage report: coverage run --source='.' manage.py test Name Stmts Miss Cover

cart_init_.py 0 0 100% cart\apps.py 4 0 100% cart\contexts.py 24 7 71% cart\migrations_init_.py 0 0 100% cart\templatetags_init_.py 0 0 100% cart\templatetags\cart_tools.py 5 1 80% cart\tests.py 6 0 100% cart\urls.py 3 0 100% cart\views.py 40 31 22% checkout_init_.py 1 0 100% checkout\admin.py 12 0 100% checkout\apps.py 6 0 100% checkout\forms.py 18 11 39% checkout\migrations\0001_initial.py 7 0 100% checkout\migrations_init_.py 0 0 100% checkout\models.py 51 14 73% checkout\signals.py 9 2 78% checkout\urls.py 4 0 100% checkout\views.py 86 70 19% checkout\webhook_handler.py 71 56 21% checkout\webhooks.py 28 19 32% custom_storages.py 6 6 0% env.py 6 0 100% fit_family_init_.py 0 0 100% fit_family\asgi.py 4 4 0% fit_family\settings.py 68 20 71% fit_family\urls.py 5 0 100% fit_family\wsgi.py 4 4 0% home_init_.py 0 0 100% home\admin.py 6 0 100% home\apps.py 4 0 100% home\migrations\0001_initial.py 5 0 100% home\migrations_init_.py 0 0 100% home\models.py 4 0 100% home\tests.py 31 0 100% home\urls.py 3 0 100% home\views.py 6 0 100% manage.py 12 2 83% products_init_.py 0 0 100% products\admin.py 14 0 100% products\apps.py 4 0 100% products\forms.py 15 6 60% products\migrations\0001_initial.py 6 0 100% products\migrations\0002_shopalert.py 4 0 100% products\migrations_init_.py 0 0 100% products\models.py 26 3 88% products\tests.py 70 1 99% products\urls.py 3 0 100% products\views.py 92 77 16% products\widgets.py 7 0 100% profiles_init_.py 0 0 100% profiles\apps.py 4 0 100% profiles\forms.py 18 11 39% profiles\migrations\0001_initial.py 8 0 100% profiles\migrations_init_.py 0 0 100% profiles\models.py 21 4 81% profiles\urls.py 3 0 100% profiles\views.py 26 17 35% workouts_init_.py 0 0 100% workouts\admin.py 18 0 100% workouts\apps.py 4 0 100% workouts\forms.py 25 16 36% workouts\migrations\0001_initial.py 6 0 100% workouts\migrations_init_.py 0 0 100% workouts\models.py 37 7 81% workouts\tests.py 86 0 100% workouts\urls.py 3 0 100% workouts\views.py 95 79 17% workouts\widgets.py 7 0 100%

TOTAL 1141 468 59%

Manual tests The webapp has been tested with Google Chrome, Firefox and Microsoft Edge, and on a Huawei P smart+ 2019 Android smartphone and found to be working fine. Below are more elaborate tests:

Viewing and Navigation

Registration and User Accounts

Sorting and Searching

Purchasing and Checkout

Admin and Store Management

Code validation:

1. HTML validation

• https://code-institute-ms4.herokuapp.com/
  1. First check: 5 errors, 4 warnings
  2. Second check: 2 error, 4 warnings. The errors I ignore: the duplicate ID is no problem, as one is used on mobile screens, the other on desktop screens. Removing the stray actually breaks the footer container, so it has to stay. https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fcode-institute-ms4.herokuapp.com%2F
• https://code-institute-ms4.herokuapp.com/products/
  1. First check: 1 error, 4 warnings, same as home page: https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fcode-institute-ms4.herokuapp.com%2Fproducts%2F#l248c81
• https://code-institute-ms4.herokuapp.com/products/1/
  1. First check: 1 error, 3 warnings, same as home page: https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fcode-institute-ms4.herokuapp.com%2Fproducts%2F1%2F#l248c81
• https://code-institute-ms4.herokuapp.com/accounts/signup/
  1. First check: 1 error, 2 warnings, same as home page: https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fcode-institute-ms4.herokuapp.com%2Faccounts%2Fsignup%2F#l248c81
• https://code-institute-ms4.herokuapp.com/accounts/login/
  1. First check: 1 error, 2 warnings, same as home page: https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fcode-institute-ms4.herokuapp.com%2Faccounts%2Flogin%2F#l248c81
• https://code-institute-ms4.herokuapp.com/accounts/password/reset/
  1. First check: 1 error, 2 warnings, same as home page: https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fcode-institute-ms4.herokuapp.com%2Faccounts%2Fpassword%2Freset%2F#l248c81
• https://code-institute-ms4.herokuapp.com/cart/
  1. First check: 1 error, 3 warnings, same as home page: https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fcode-institute-ms4.herokuapp.com%2Fcart%2F#l248c81
• https://code-institute-ms4.herokuapp.com/checkout/
  1. First check: 1 error, 3 warnings, same as home page: https://validator.w3.org/nu/?showsource=yes&doc=https%3A%2F%2Fcode-institute-ms4.herokuapp.com%2Fcheckout%2F#l248c81

I tried fixing the stray error, but doing so results in breaking the DOM flow, causing the footer to be part of the container.

1. CSS validation

• https://code-institute-ms4.herokuapp.com/ Validation: https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fcode-institute-ms4.herokuapp.com%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en 1 warning in base.css, which is on purpose. Then there's a whole bunch of warnings in Bootstrap.css, which I'm not going to fix.
• profile.css: no errors.
• checkout.css: no errors.

1. [Python Validation]
2. Run python3 -m flake8 and fix problems:

• Lots of messages about line too long, whitespace, no newline. Installed autopep8 pip install -U autopep8 and ran it to fix many of the problems autopep8 --in-place --recursive .
• Installed black: pip install black
• Ran black: black .
• Ignoring all the migrations files
• Ignoring env.py, as it is only a local file and used for development
• Ignoring tests.py, as these are not production code
• .\fit_family\settings.py:17:5: F401 'env' imported but unused --> env is used
• .\fit_family\settings.py:145:80: E501 line too long (91 > 79 characters) --> acceptable, as it belongs to the Django framework. I also don't know how to adjust the layout --> # noqa
• .\fit_family\settings.py:148:80: E501 line too long (81 > 79 characters) --> acceptable, as it belongs to the Django framework. I also don't know how to adjust the layout --> # noqa
• .\fit_family\settings.py:151:80: E501 line too long (82 > 79 characters) --> acceptable, as it belongs to the Django framework. I also don't know how to adjust the layout --> # noqa
• .\fit_family\settings.py:154:80: E501 line too long (83 > 79 characters) --> acceptable, as it belongs to the Django framework. I also don't know how to adjust the layout --> # noqa
• .\checkout\apps.py:9:9: F401 'checkout.signals' imported but unused --> used in another file
• .\checkout\views.py:1:80: E501 line too long (87 > 79 characters) --> no easy way to reformat --> # noqa
• .\checkout\webhook_handler.py:71:80: E501 line too long (80 > 79 characters) --> no easy way to reformat --> # noqa
• .\checkout\webhook_handler.py:72:80: E501 line too long (80 > 79 characters) --> no easy way to reformat --> # noqa
• .\checkout\webhooks.py:43:80: E501 line too long (86 > 79 characters) --> no easy way to reformat --> # noqa
• .\profiles\forms.py:33:80: E501 line too long (85 > 79 characters) --> no easy way to reformat --> # noqa
• .\products\widgets.py:9:80: E501 line too long (87 > 79 characters) --> no easy way to reformat --> # noqa
• .\products\views.py:62:80: E501 line too long (80 > 79 characters) --> no easy way to reformat --> # noqa
• .\products\urls.py:9:80: E501 line too long (82 > 79 characters) --> no easy way to reformat --> # noqa
• .\checkout\models.py:63:80: E501 line too long (87 > 79 characters) --> no easy way to reformat --> # noqa
• .\checkout\urls.py:12:80: E501 line too long (88 > 79 characters) --> no easy way to reformat --> # noqa
• .\profiles\urls.py:6:80: E501 line too long (84 > 79 characters) --> no easy way to reformat --> # noqa
• .\workouts\urls.py:11:80: E501 line too long (82 > 79 characters) --> no easy way to reformat --> # noqa

Notable Bugs

One big bug was with the checkout process not working: after clicking on the checkout button, the loading spinner would appear, but would never progress to the checkout success page. To try and fix this bug I took the following steps:

1. Check if all the Stripe keys and secrets were correct.
2. Check if the environment vars were using the correct Stripe information.
3. Go through the code for the checkout app: changed some variable names and fixed a typo where a dash was used instead of an underscore.
4. urls.py was missing the / after checkout_success/<order_number>, fixed that.
5. After changing variable names, I had to do another database migration.
6. After this, when trying to checkout, I could an error about adding a float and decimal together: fixed this as well.
7. It still wasn't working, and I found out the problem was within stripe_elements.js: when I changed code in there, checkout would work.
8. I was about to start working through the code using console.log when I noticed an error in the log: it couldn't parse $post. This piece of code should have been $.post, missing a period. After adding that, the code worked.

Another bug I discovered was that updating the quantity in the cart didn't always work. Troubleshooting steps:

1. Checking the browser console for errors
2. Adding debugging statements to the code for updating the quantity, both the jQuery that triggers the form submit as the actual Python code for the view.
3. I discovered that sometimes the Python code would not run, while the jQuery code would always run.
4. I also noticed that in the VS Code console there would be an error if the Python code did run: Broken pipe from ('127.0.0.1', 62554)
5. While troubleshooting, I realized that the product_details page handled submitting the form differently: on this page it was just a button to submit the form. Adding this to cart.html worked all the time, while using jQuery did not.
6. I replaced the with a submit button, applied some CSS and adjusting the quantity in the cart now works.

Problems

The only real problem was the implementation of Stripe. Getting this up and running took a lot of time, which meant I did not have time to implement other features. Right now, the project is a basic webshop, but not yet the community it sets out to be.

Deployment

The project has been deployed to Heroku, with static files hosted on AWS S3. If you want to do the same:

1. Fork the repository to your own GitHub: https://github.com/RicardoAzuul/code-institute-ms4-fullstack.
2. Log in to Heroku (www.heroku.com) - or register if you don't have an account yet.
3. In the Heroku dashboard, click the New button in the top right corner and create a new app.
4. Give your new app a name and choose a region. The name has to be unique within Heroku.
5. On the page for your new Heroku app, go to Deployment method and choose "Connect to GitHub". If you haven't connected your GitHub account to Heroku yet, you will be able to do so now.
6. Choose the forked repository of this project from your own GitHub account.
7. If you want, you can enable Automatic Deploys here: whenever you perform a push to your GitHub repository, the Heroku app can redeploy. Otherwise you can deploy manually. Heroku will use the PROCFILE and requirements.txt to install dependencies and build the app.
8. You will also have to create an S3 bucket on AWS, one that is publicly accessible.
9. And you will have to set up a Stripe webhook, using a public key, secret key and webhook secret.
10. You will also have to set some Config Vars in the Settings section of your Heroku app. These are the Config Vars:
    • AWS_ACCESS_KEY_ID: the id for your AWS S3 container
    • AWS_SECRET_ACCESS_KEY: the secret key for your AWS S3 container
    • DATABASE_URL: the url to the postgress database on Heroku
    • EMAIL_HOST_PASS: the password or application key for the email account you use for emailing. This project uses Gmail
    • EMAIL_HOST_USER: the emailadress
    • SECRET_KEY: the Django secret key
    • STRIPE_PUBLIC_KEY: Your Stripe public key
    • STRIPE_SECRET_KEY: Your stripe secret key
    • STRIPE_WH_SECRET: Your Stripe webhook secret
    • USE_AWS: Set to true to tell Django to use the other AWS settings

Run locally

If you want to run the project locally:

1. First, fork the repository to your own GitHub: https://github.com/RicardoAzuul/code-institute-ms4-fullstack.

2. Clone the forked repository to your own machine.

3. Install Python 3.8.12, as this is what the project was built with: https://www.python.org/downloads/release/python-3812/ (though if you're running Windows, install 3.8.10)

4. From the terminal, run the below to install required modules:

   pip3 install -r requirements.txt

5. You will need to create an env.py file for running the app locally. The content of this file:

import os

os.environ.setdefault("SECRET_KEY", [django secret key])
os.environ.setdefault("DEVELOPMENT", "True")
os.environ.setdefault("STRIPE_PUBLIC_KEY", "[stripe public key]") 
os.environ.setdefault("STRIPE_SECRET_KEY", "[stripe secret key]") 
os.environ.setdefault("STRIPE_WH_SECRET ", "[stripe webhook key]") 

1. To run the app:

   python manage.py startserver

2. This will run the app locally, you can then browse to http://192.168.1.68:5000/ to interact with the app.

Credits

Inspiration

The color scheme, black with accents of white and red, was inspired by Netflix: it looks bold. For the font I did some research into bold aggressive font types and came upon slab serif fonts. I picked Kelly Slab, as it was available via Google Fonts. Initially I wanted to do something different and go for warm and friendly, but I did not like the color scheme and couldn't find suitable images.

Content

Product images, prices, descriptions and ratings: www.decathon.nl Workout information: from a dataset on Kaggle: https://www.kaggle.com/datasets/edoardoba/fitness-exercises-with-animations The descriptions of workouts came from: https://www.bodybuilding.com/

Media

Main page: https://www.pexels.com/photo/woman-doing-exercise-414029/ No image available file: https://commons.wikimedia.org/wiki/File:No_Image_Available.jpg

Code

I've used some code from Bootstrap, as indicated by comments, and I found a nice way to do a back to top button that only appeared when scrolling down and slowly scrolls you back on Stackoverflow, as indicated by comments.

Acknowledgements

• I received help and support from my mentor at Code Institute, Jack Wachira.
• I would also like to thank to all the people at Code Institute for providing the Diploma in Software Development course and giving me the tools and guidance to create this app.
• I also received help from the Code Institute Slack Community when I had to resubmit my project, so thanks to the community as well.
• And also thanks to Bootstrap for helping with implementing their Bootstrap stylings, Django for their documentation and Stackoverflow for helping with finding solutions to coding problems.
• My wife, Elizabeth Lane, for supporting me during this coding course.