Fitness Home

Full Stack Frameworks with Django Milestone Project-4

Description

Fitness Home is designed and developed to create online presence of a fitness center, so that the fitness community can purchase exercise plans, nutrition plans and merchandise online. Users can create an account and save profile information. Users can also make secure payments, write reviews and see their order history.

UX

Target Audience

The target audience of this web-application is the fitness community and health conscious people as well as the people who want to bring change in their life style.

Target Audience Goals

Able to browse the website easily.
Get information about the product and services.
Make secure payment.
Able to purchase anonymously.
Able to create account, save profile information and track order history.

Site Owner's Goals

Site owner's main goal is to create online presence, create brand awareness and attract more customers to sell them online through a secure payment method.

Project Suitability

This project is suitable to make purchases online;

Users have the ability to search for merchandise in the the store.
Users have the ability to create an account and save their profile information.
Users have the ability to purchase merchandise, exercise plan or nutrition plans and make secure payments.
Users can view their order history.

User Stories

As a store owner:

As a store owner, I want a simple responsive user friendly website.
As a store owner, I want to add new products/services in the store.
As a store owner, I want to update existing products/services in the store.
As a store owner, I want to delete a product/service from the store.

As a site user:

As a user, I expect the website is easy to navigate from one page to another page.
As a user, I expect the website to be responsive so I can use it form any device for example mobile, tablet or laptop.
As a user, I want to be able to search the items in the store.
As a user, I want to be able to see the detailed information about the products and services.
As a user, I want to be able to create an account.
As a user, I want to be able to add items in the shopping cart and adjust the shopping cart.
As a user, I want to be able to save delivery information to my profile.
As a user, I want to be able to make secure payments.
As a user, I want to be able to make purchases anonymously.
As a user, I want to be able to see the order history.
As a user, I want to be able to update the profile information.
As a user, I want to receive a confirmation email after the checkout.
As a user, I want to get in touch with the store owner.
As a user, I want to be able to add a review.
As a user, I want to be able edit or delete my review.

Design

The website design is simple and responsive which allows the user to navigate easily through the website form mobile, tablet or laptop and make purchases. The design inspiration is taken from the Code Institute's Boutique Ado Project.

Fonts

Google fonts Do Hyeon is used in navbar and in headings.
Where as google fonts Ubunto is used in rest of the text.

Icons

To make design appealing font awesome icons are widely used in the website.

Attribute

The target_blank value is given to the social links in the footer so that they will open in a new tab / window on click.

Colors

The color scheme of the website is kept fairly simple to make it attractive and appealing for the users.

Dark blue color #12375a is used for headings, text and button background in the website.
Light grey color #f8f9fa is used as a background color of navbar and footer to make navigation links and buttons prominenet.
White color #fafafa is used as a background color of the rest of the page so that products and the information can be displayed clearly.
Red color #e84610 is used in the breadcrum on landing page, in the delete button and in hover effect.

Animation

Animate in scroll library is also used to give nice effect on merchandise, exercise plans and nutrition plans.

Hover Effect

Background color changes to red color #e84610 when hover over the buttons.
The color of the nav links and social media links also changes to red color #e84610 when hovering over them.
Cursor also changes to hand pointer when hover over buttons.
Hovering over the free membership breadcrum on landing page, cursor changes to no-drop.

Wireframes

Wireframes for this project were created by using Balsamiq. It includes wireframes for dektop, tablet and mobile screen size.

Database & Data Models

SQLite3 databse is used in the development which is pre-installed by Django.
PostgreSQL databse is used in the production.
Fitness Home Data Models in PDF

Features

Existing Features

Navbar - Navbar is fixed at the top all the time so user can easily navigate through the website. Logo is fixed at the top left corner. Navbar also contains links, Merchandise, Fitness and Nutrition as well as search bar, My Account and Shopping Cart. On screen size less than 992 px navbar design changes as it appears a burger button on the top left corner which contians the logo Fitness Home, Merchandise, Fitness and Nutrition links. Search bar input field will disappear and rest will stay the same. By clicking on search bar the search bar input will appear at the bottom of the navbar. On large screens a gap appears between Search bar and My Account, this is by design.
Log In/Sign Up - User can easily log in if already have an account to access the extra features otherwise user has the option to create an accout. User will get an email to verify the account when an account is created on fitness home. User can can also recover an account if user has forgotten the password.
Admin - For website management the store owner will have extra links in my account dropdown when owner is logged in as a super user.
Customer Reviews - When a user land on the home page, user can read the customer reviews by clicking on Customer Reviews button.
Search - User can search for merchandise in the database either way, without logging in or after logging in the website. Fitness and Nutrition links will also appear when user performs search.
Logout/Sign Out - Logout allows a user to end the session but user has to confirm it by clicking on Sign Out which will bring the user to the home page.
Add to Cart - User can add the merchandise, exercise plan or nutrition plan to the shopping cart with Add to Cart button.
Disable Add to Cart Button - If a user has already added an exercise plan in the shopping cart and try to add another exercise plan. Then user will see an info toast message and the Add to cart buttons will be disabled.
Shopping Cart Adjustment - User can update the quantity of merchandise or delete merchandise, exercise plan or nutrition plan from the shopping cart.
Checkout - User can checkout and pay by filling out the order form.
Order Summary - On checkout page user will be shown the order Summary and button to adjust the shopping cart.
Profile - Logged in user can save the delivery information in his/her profile.
Profile Update - Logged in user can aslo update his/her delivery information saved in profile.
Autofill - If user has saved his/her delivery information then the order form will be prefilled on next purchase.
Order History & Order Details Logged in user can see his/her order history and details of particular order by going into the profile page.
Add/Update/Delete Review - Logged in user can also add, update or delete a review if user has purchased something.
Deletion Confirmation- If a user click on delete button, then a modal will pop up to confirm if user is sure to delete the review or not.
Add/Update/Delete Product/Plans - Update and delete buttons will only show up to the Super User (Store Owner). Super User can add new items, update existing items and delete the items from the website.
Deletion Confirmation for super user- If super user click on delete button, then a modal will pop up to confirm if super user is sure to delete the product/plan or not.
Contact - If user need any information, user has the possibility to contact the store owner by filling contact us form.
Thank You - If a user sends an enquiry, a thank you message will be shown to the user afterwards.
When a user clicks on social media links, user will be redirected to my social media profiles except youtube.

Features Left to Implement

Search - At the moment search is performed only on the merchandise-product because the exercise plans and nutrition plans are less in number. But for good user experience, when user performs seach Fitness and Nutrition links appear. Thus as exercise plans and nutrition plans will grow in future, the search functionality will also be added in these sections.
Social Media Log In - Log In through social media functionality will also be added in the future.
Coaching Sessions - A system to book session with the coach/trainer will also be added in future.
Merchandise Size - At the moment the merchandise products have only one-size available. The option to purchase different sizes of the merchandise products will also be added in the future.

Technologies Used

HTML5 - HTML5 is used to create the the structure of the website.
CSS3 - CSS3 is used for custom styling the HTML5 elements.
JavaScript/JQuery - is used to make the website interactive.
Bootstrap Framework - Front-end framework is used to make website responsive.
Python - Python is used as the back-end programming language.
pip - Used to install python packages.
Django - Python Web framework that encourages rapid development is used to create this project.
Django-crispy-forms - Django crispy forms are used to control the rendering behavior of Django forms.
Jinja - Jinja templating language is used with Django in the HTML5 code.
Balsamiq - Balsamiq is used to create wireframes for this project.
Google Fonts - Google fonts Do Hyeon and Ubunto are used in this project.
Git - Used as a distributed version control system.
Gitpod - Used as a online IDE.
Github - Used as a remote repository.
Heroku - It is used as hosting platform to deploy this project.
Stripe - Used to add secure payment feature in this project.
HTML Formatter - Used to format and beautify my code.
Animate On Scroll - Used to make website visually appealing.
AWS - Used to store static files.
Am I Responsive - Used to create a responsive image on different screens.
Gunicorn - It is a Python Web Server Gateway Interface HTTP server used in deploying the project to Heroku.
Psycopg2 - Used to setup PostgreSQL database.
Boto3 - Used to create, configure, and manage AWS services, such as S3.
Django Secret Key Generator - Used to create secret key.
Temp Mail - Used to get temporary mail address to test login functionality.

Testing

Google developers tool has been used from the beginning to see the the result after adding a feature or after making changes, how do they look like on different screen sizes. Further I used print statement to debug the issues. I created my own account and tested all the functions to make sure they work properly. In addition, I aslo asked my family and friends to test the project and give their feedback.

User Stories

User stories from the UX section were tested to see if they all work as intended.

As a store owner

As a store owner, I want a simple responsive user friendly website.

A simple minimalist design is created.
Go to the Home Page and browse through the website to experience the design.
Right click and go to inspect and choose mobile, tablet or desktop screen size to test the page responsiveness.

As a store owner, I want to add new products/services in the store.

Go to the Home Page.
Log In as a super user and click on My Account, a dropdown will open.
Go to Merchandise Admin, Exercise Admin or Nutrition Admin.
Fill out the relevant form and click on Add.
Item will be added in the store.

As a store owner, I want to update existing products/services in the store.

Go to the Home Page and log in as a super user.
Go to Merchandise, Exercise or Nutrition.
Under each product/service Edit button will show up.
Click on Edit button, make changes and click on Update button to make updates.

As a store owner, I want to delete a product/service from the store.

Go to the Home Page and log in as a super user.
Go to Merchandise, Exercise or Nutrition.
Under each product/service Delete button will show up.
Click on Delete button, a modal will appear to confirm the deletion.
Click on Yes, item will be deleted.

As a site user

As a user, I expect the website is easy to navigate from one page to another page.

Go to the Home Page.
Navbar stays at the top all the time and contains the main navigation links like Merchandise, Exercise and Nutrition as well as a Search bar, My Account button and Shopping Cart.
Home button is also added in different placed in the website to bring user back to home page. Thus user can easily navigate through the website.

As a user, I expect the website to be responsive so I can use it form any device for example mobile, tablet or laptop.

Go to the Home right click and go to inspect.
Choose mobile, tablet or desktop screen size you want to test the page responsiveness.

As a user, I want to be able to search the items in the store.

Go to the Search input box in the navbar.
Add any search key word and click on search icon.

As a user, I want to be able to see the detailed information about the products and services.

Go to the Home Page.
For Merchandise item's detail, go to Merchandise and click on Detials button.
A new window will open which contains the item detail.
For Exercise Plans detail, click on Exercise.
A new window will open which contains the Exercise Plans and their detail.
For Nutrition Plans detail, click on Nutrition.
A new window will open which contains the Nutrition Plans and their detail.

As a user, I want to be able to create an account.

Go to the Home Page and click on My Account.
From the dropdown select Register.
Fill in the form and click on Sign Up.
Verification email will be sent to provided email address.
Verify your email addess, your account is created.

As a user, I want to be able to add items in the shopping cart and adjust the shopping cart.

Go to the Home Page.
To add Merchandise items , go to Merchandise and click on Detials button.
A new window will open which contains the item detail and Add to Cart button.
Click on Add to Cart button to add item in the Shopping Cart.
To add Exercise Plans, click on Exercise.
A new window will open which contains the Exercise Plans.
Click on Add to Cart button to add the Exercise Plan in the Shopping Cart.
To add Nutrition Plans, click on Nutrition.
A new window will open which contains the Nutrition Plans.
Click on Add to Cart button to add the Nutrition Plan in the Shopping Cart.
To adjust the Shopping Cart, click on the Shopping Cart.
A new window will open which contain the Shopping Cart items.
To update the quantity of the merchandise item change the quantity in the input box.
Clik the Update button to adjust the Shopping Cart.
To delete any item from the Shopping Cart click on Delete button.

As a user, I want to be able to save delivery information to my profile.

Go to the Home page and log in.
Add Merchandise, Exercise Plan or Nutrition Plan to Shopping Cart.
Click on Shopping Cart to view the items and then click on the Checkout button.
Fill in the order complete form and check Save this delivery information to my profile box.

As a user, I want to be able to make secure payments.

Go to the Home page and log in.
Add Merchandise, Exercise Plan or Nutrition Plan to Shopping Cart.
Click on Shopping Cart to view the items and then click on the Checkout button.
Fill in the order complete form.
Add credit card number, expiry date, cvc, zip and click on Complete Order button.

As a user, I want to be able to make purchases anonymously.

Go to the Home page.
Add Merchandise, Exercise Plan or Nutrition Plan to Shopping Cart.
Click on Shopping Cart to view the items and then click on the Checkout button.
Fill in the order complete form.
Add credit card number, expiry date, cvc, zip and click on Complete Order button.

As a user, I want to be able to see the order history.

Go to the Home page and log in.
Click on My Account and select My Profile from the dropdown.
If user has already purchased something then in User Info section My Orders button will appear.
Click on My Orders button to view the order history.

As a user, I want to be able to update the profile information.

Go to the Home page and log in.
Click on My Account and select My Profile from the dropdown.
A new window will open, which contains the delivery information.
Change any information and click on Update button.

As a user, I want to receive a confirmation email after the checkout.

Go to the Home page and log in.
Add Merchandise, Exercise Plan or Nutrition Plan to Shopping Cart.
Click on Shopping Cart to view the items and then click on the Checkout button.
Fill in the order complete form.
Add credit card information and clik on Complete Order button.
An order confirmation email has sent to the user.

As a user, I want to get in touch with the store owner.

Click on contact icon in the footer.
A new window will open which contains Contact Us form.
Fill in the form and clik on Send button.

As a user, I want to be able to add a review.

Go to the Home page and log in.
Click on My Account and select My Profile from the dropdown.
If user has already purchased something then in User Info section Add Review button will appear.
Click on Add Review button, a new window will open which contains Add Review form.
Fill in the form and click Add button.

As a user, I want to be able edit or delete my review.

Go to the Home page and click on Customer Reviews.
A new window will open which contains all the reviews.
Edit and Delete buttons will appear under your added review.
Click on Edit button, a new window will open to edit the review.
Make the changes and click on Update button.
To delete the review, click on Delete button, a modal will appear to confirm the deletion.
Click on Yes to delete the review.

Responsiveness on different browsers & Mobiles

The website is tested on following browsers and mobiles, it looks fine and work properly on them.

Google Chrome
Microsoft Edge
Firefox
Opera
iPhone 6
Huawei P30 lite

Code Validation

The code has been validated by using;

Interesting Bugs / Issue

Modal was not working properly - I added a modal to make sure that super user really wants to delete the produsts / services, it's not just accessdently Delete button got clicked. But I encountered a problem that when I was deleting an item, an other item was deleted from the store even though I was using {{ item.id }} as an id and data-target. Some how the it was not working with numbers so with the help of tutor support, a solution was found. Used {{ item.sku }} as an id and data-target and it solved the issue.
Modal stopped working - To delete products / services from store super user has to confirm the deletion, as by clicking on Delete button a modal pops up but I realized that this modal stopped working. I found out later that it happened after I added animate on scroll feature. To over come this issue I excluded the Delete button from AOS div and everything start working fine.
Image was not showing up - If a product / service does not have an image associated with it, then a no image shall show up but it was not happening. I made sure that media_url is added in the settings.py and urls.py but I was not getting the desired output. Later I found out that I forgot to add noimage.png in the media folder that is why there was no image to show if an item did not have an image. So I added noimage.png in the media folder and it solved the problem.
Local variable 'intent' referenced before assignment - When I completed checkout/views.py and created an order I start getting this error. The initial thought was that it is happening because the form is not valid and it is triggering the else block. But I tested this with print statement and I could see the intent was created in the terminal. The issue was actually I was not returning anything if the form was valid. I was missing the redirect to checkout_success page which I had not created till this point. So I created checkout success page and redirected to checkout_success page and got rid of this error. Credit to Chris Zielinski who helped me to identify this issue.
Total was not counted - I encountered with this issue of total not being counted when I add, delete or save line item. The reason found, that was causing this problem was I did not include default_app_config = 'checkout.apps.CheckoutConfig' in checkout/init.py. adding this in checkout/init.py solved the problem.
User Sign UP Error - To avoid the line too long error in settings.py in AUTH_PASSWORD_VALIDATORS section I added a back slash and moved the rest of the line to next page. It removed the line too long error but during user registration a new error occured. The reason was back slash.Later I found out the solution which is, instead of back slash I should use quotation makrks to break the line to get rid of line too long error.
Exercise Plans - The way add_cart function was written initially a user could add all the exercise plan in the shopping cart whereas a user need only one exercise plan. Thus I updated add_cart function and also contexts.py-product_type == 'excercise_plans_dic' section. Now user can add only on exercise plan in the shopping cart.
Disable Add to Cart Button - Initially I did not had a function to disable the Add to Cart buttons in Exercise Plans page. I was just showing a toast message to the user if an exercise plan is already in the shopping cart and user try to add another exercise plan. But then Stephen Seagrave suggested that I should also disable the Add to Cart buttons, as it will enhance the user experience. Thus I added button disable function, now user will see a info toast message and the Add to cart buttons will be disabled if user clicks on Add to Cart button if an exercise plan is already in the shopping cart.
JS/JQuery which is related to the Stripe is kept in a separate file. But there is also some JS/JQuery which is specific to these pages shopping_cart.html, exercise_plans.html, index.html and products.html, a separate file is not created for it and is kept in these pages. Further the amout of JS/JQuery in base.html is not much that is why it is also kept in base.html instead in a separate file.
Test webhook error: 500 - A very interesting issue is when I send a payment_intent.succeeded test webhook from Strip I get Response Test webhook error: 500 on Strip and in terminal I get AttributeError: cart. But when I create real order and complete payment then there is no issue in payment and on Strip I get Response Webhook received: payment_intent.succeeded as well as HTTP status code 200 (OK). Further I can also see in metadata cart is added ;
```
"metadata": {"cart": "{\"merchandise_dic\": {\"7\": 1}, 
                       \"excercise_plans_dic\": {\"2\": 1}, 
                       \"nutrition_plans_dic\": {\"3\": 1}}"
```
If remove the code logic from def handle_payment_intent_succeeded(self, event): then payment_intent.succeeded test webhook works fine. I discussed this issue with tutor support and been advised that I should not worry about this issue as in craeting order and payment process everything works fine as intented.
Email Address not showing - Another very interesting issue is when user send a query using Contact Us form, I (Store Owner) does not get user's email address. When I check my emails, I can see from and to both contains my email address. To get user's email address I have added user's email address in the subject so store owner can answer user's query. I am using gmail to accomplish this functionality and according to the tutor support this issue is because of gmail's strict security policy.

Deployment

The deployed project and project's github repository can be viewed on following links. To test card payments use Stripe test payments card number 4242 4242 4242 4242, expiry 0424, CVC 424 and zip any five digits.

Fitness Home Live Page
Fitness Home Github Repository

Deployment to Heroku

Login to Heroku account.
Click on New at the right top corner and click on Create new app.
Choose App name and a region. Then click on Create app.
Go to Resources, then to Add-ons and choose Heroku Postgres.
Choose Hobby Dev - Free plan and click on Submit Order Form.
Go to terminal and install dj_database_url and psycopg2-binary using commands pip3 install dj_database_url and pip3 install psycopg2-binary.
Then freeze the requirements with command pip3 freeze > requirements.txt.
Import dj_databse_url in settings.py, setup the database, run migrations, loaddata and create super user.
Install gunicorn with command pip3 install gunicorn and freeze the requirements with command pip3 freeze > requirements.txt.
Create Procfile and tell Heroku to create web dyno with command web: gunicorn fitness_home.wsgi:application.
Log In to Heroku and disable temporarily collectstatic with command heroku config:set DISABLE_COLLECTSTATIC=1.
Add host name of heroku app in allowed hosts in settings.py. Then git commit and git push heroku master.
For automatic deploys to Heroku go to Deploy tab and click on Github. Choose your app and connect then click on Enable Automatic Deploys.
Login to AWS account, go to S3 - create a bucket and make it public.
Open the bucket, go to properties and enable Static website hosting.
Go to Properties, add CORS configration. Then go to Bucket Policy and Generate Policy.
Go to Access Control List and set the list objects permission for everyone.
Create a user to access S3 bucket. Go to Services menu and open IAM.
Go to Groups and create a new group and then to Policies and create policy.
Now go to the groups and click on the group created, click attach policy then seach for policy just created, select it and click on Attach Policy
Now create a user to put in the group. Go to Users, click on Add User, give a user name and check Programatic Access box.
Then to add user to the group, check the group and attach policy box. Click next and click on Create User.
Now connect Django to S3 Bucket. Install boto3 and django-storages with commands pip3 install boto3 and pip3 install django-storages.
Freeze the requirements with command pip3 freeze > requirements.txt and add storages in installed apps in settings.py.

Now add following settings in settings.py to tell Django which bucket it should be communicating with.

AWS_STORAGE_BUCKET_NAME = 'mss-fitness-home'
AWS_S3_REGION_NAME = 'eu-north-1'
AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')

To tell django where our static files will be coming from in production add following code line under above settings.
```
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
```
Create a file called custom_storages.py and create custom classes called StaticStorage and MediaStorage.

Go to settings.py and tell django that for static and media file storage we want to use following storage class.

STATICFILES_STORAGE = 'custom_storages.StaticStorage'
STATICFILES_LOCATION = 'static'
DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
MEDIAFILES_LOCATION = 'media'

Now go to Heroku and add following Config vars.

AWS_ACCESS_KEY_ID: <ID from CSV file downloaded from AWS>
AWS_SECRET_ACCESS_KEY: <Secret key from CSV file downloaded from AWS>
DATABASE_URL: <your database url>
EMAIL_HOST_PASS: <Your Password>
EMAIL_HOST_USER: <Your Email>
SECRET_KEY: <Your Secret Key>
STRIPE_PUBLIC_KEY: <Your Stripe Public Key>
STRIPE_SECRET_KEY: <Your Stripe Secret Key>
STRIPE_WH_SECRET_fitness: <Your Stripe Webhook Secret Key>
USE_AWS: <True>

Now issue a git push and go to Heroku then Activity menu and to View build log.
It will take a little while and when build log has finished. A link will be released with message Deployed to Heroku
Congratulations! Click on the link to launch your deployed app.
Finally to add media files, go to S3 Bucket and click on Create folder.
Name this folder media and add the images in this folder and you are done.

Local Deployment

To run Fitness Home locally please install following:

VS Code
GIT
PIP
Python3 You also need accounts on following:
Stripe
Gmail - Enable two-step authentication.

Go to Fitness Home Github Repository
Click on Code beside Gitpod.
A drop down menu will open then copy the link as HTTPS.
Open VS Code and in terminal enter command git clone https://github.com/sohailshams/fitness-home.git to clone the project.
It is recommended to create a virtual environment to prevent dependencies from being installed globally on your system.
To create virtual environment, go to the terminal and in the project's root directory enter command python -m venv venv. Here venv is virtual environment name.
Then activate the virtual environment with command venv\Scripts\activate. After that environment appears on the left side in terminal, and notice the "(venv)" indicator that tells you that you're using a virtual environment.
Now install the required dependencies with command pip3 install -r requirements.txt.
Next in the root directory of the project where the manage.py file is located, create a file named env.py.
Now list this file env.py immediately in .gitignore file to prevent SECRET_KEYS and Passwords from being committed to github.

Inside env.py file add following settings with your values:

import os
os.environ["DEVELOPMENT"] = "True"
os.environ["LOCALHOST"] = "127.0.0.1"
os.environ["EMAIL_HOST_PASS"] = "<Your Password>"
os.environ["EMAIL_HOST_USER"] = "<Your Email>"
os.environ["STRIPE_PUBLIC_KEY"] = "<Your Stripe Public Key>"
os.environ["SECRET_KEY"] = "<Your Stripe Secret Key>"
os.environ["STRIPE_WH_SECRET_fitness"] = "<Your Stripe Webhook Secret Key>"

I created this project using Gitpod so I had to adjust some settings in settings.py when I was runnng project locally. Please add following settings if needed for you in settings.py.
```
if os.path.exists("env.py"):
import env

localhost = os.environ.get("LOCALHOST")
ALLOWED_HOSTS = ['mss-fitness-home.herokuapp.com', localhost]
```
Go to terminal and run command python manage.py makemigrations to create the migrations for your Django database.
Then run command python manage.py migrate to apply the migrations to the database.
Now create Super User with command python manage.py createsuperuser.
Add email, password and repeat password to create Super User.
To run project use command python manage.py runserver.
Congratulations your project is running locally.

Credits

Media

All pictures are taken from Google

Acknowledgements

Code Institute's Boutique Ado Project was great source of inspiration. I followed it to design and develop my Fitness Home website.
Code for bottom to top button is taken from w3schools.com
Code Institute's tutor support has been a great help during the whole project, a very special thanks to tutor support team.
Bootstrap Framework is used in this project.
A very special thanks to Chris Zielinski for his support and help to accomplish this project.
I would like to thank my mentor Owonikoko Oluwaseun for his valuable feedback during mentoring sessions.
Stack overflow was great source of help.
I would like thank my lovely wife Ayesha, my sons Ibrahim and Ismail for their support and motivation.
Used favicon Icons made by Freepik from www.flaticon.com
Django Docs
Thanks to Stephen Seagrave for his valuable feedback.

Disclaimer

This project is for educational purposes only.

Name		Name	Last commit message	Last commit date
Latest commit History 571 Commits
.theia		.theia
cart		cart
checkout		checkout
contact		contact
exercise		exercise
fitness_home		fitness_home
home		home
media		media
merchandise		merchandise
nutrition		nutrition
profiles		profiles
review		review
static		static
templates		templates
.gitignore		.gitignore
.gitpod.dockerfile		.gitpod.dockerfile
.gitpod.yml		.gitpod.yml
Procfile		Procfile
README.md		README.md
build.sh		build.sh
custom_storages.py		custom_storages.py
manage.py		manage.py
requirements.txt		requirements.txt

sohailshams/fitness-home

Folders and files

Latest commit

History

Repository files navigation

Fitness Home

Full Stack Frameworks with Django Milestone Project-4

Table of Contents

Description

UX

Target Audience

Target Audience Goals

Site Owner's Goals

Project Suitability

User Stories

Design

Fonts

Icons

Attribute

Colors

Animation

Hover Effect

Wireframes

Database & Data Models

Features

Existing Features

Features Left to Implement

Technologies Used

Testing

User Stories

As a store owner

As a site user

Responsiveness on different browsers & Mobiles

Code Validation

Interesting Bugs / Issue

Deployment

Deployment to Heroku

Local Deployment

Credits

Media

Acknowledgements

Disclaimer

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages