Milestone Project

Full Stack Framework With Django

Code Institute

DevMuscles

An online commerce site where users can buy items relating to fitness(fitnesswear, equipment, plans etc). The project has a couple of pages:

1:A homepage that allows users to search for items relating to fitness, and view the products in detail.

2:A login page where users can either login or register for an account.

3:Profile page where the user can update their delivery details and see the orders they have made on the site.

4:Page where the admin can edit/delete products that were created on the site.

5:Page where the admin of the site can add or edit categories.

Link to website here to see the website.

• UX
• User Stories
• Strategy
• Scope
• Technologies Used
• Libraries
• Version Control
• Other
• Testing
• Deployment
• Credits
• Acknowledgments

As a User/Admin:

"I want to see all the products on the site"

As a User:

"I want to be able to signin into the site using an account i created"

"I want to be able to signout of the site"

"I want to be able to add a product i would like to buy on the site to a shopping bag"

"I want to be able to search for a product on the site"

"I want to be able to go to my profile and update my delivery details and see any orders i have made"

"I want to see a product in more detail"

"I want to be able to edit my shopping bag before it goes to checkout"

"I want to look for products in certain areas instead of having to look at all of them"

As an Admin:

"I want to be able to delete products from the site"

"I want to be able to edit products on the site"

I wanted to create a user friendly website that would have Create,Update,Read and Delete (CRUD) functionality as well as site that would accept payments.

I created a database for the products and categories,see below schemas

HTML Used to create the structure of the web site.

CSS Used to style the website.

Python Used to create the CRUD functionality.

Bootstrap Used to design the site for mobile users and for other features.

Stripe Used to handle credit card payments on the site

Heroku Used to host the site.

Django Used for the main development of the site.

WhiteNoise Used for the collecting and storing of staticfiles.

Github - Used to store the code and use of Github Pages to deploy the website.

Gitpod - Used as the primary version control IDE for development to further push and commit code to Gihub.

Code Institute Course Content - Primary source of learning code.

W3Schools - used as a general resource for CSS and coding tips.

StackOverFlow - used as a general resource for layout tips or questions.

Manual Testing of the site

It was also tested on 3 web browsers: Google Chrome, Mozilla Firefox and Microsoft Edge.

HTML Validation

HTML - W3C - Markup Validation.

CSS Validation

CSS - W3C - CSS Validation.

Validation Result

I did the following to deploy my site:

Removed all my hard-coded environment variables.

These were placed in the Heroku Config Vars for production.

Ensured the applications requirements.txt is up-to-date with all the latest packages installed for my app being noted on this file.

The command to update requirements is pip3 freeze > requirements.txt

Ran the command python manage.py loaddata for the categories and products files in the fixtures folder to add them to the Django database

Ran the command python manage.py collectstatic in order to collect all the images, JavaScript and CSS files in the project and place them into the static files to be used for Heroku

Set up the Procfile - A Procfile is required by Heroku in order to tell the service worker what command to run for my application to start.

Set Django's debugging to False.

Pushed all my latest production ready code to GitHub ready for deployment via Heroku's GitHub function where you can deploy from GitHub the production ready app.

Upon successful deployment Heroku will give you the URL that is hosted your app

If you want to create a copy of this site on GitHub,do the following:

To access the code, it can be run locally by either selecting "clone" which provides an URL one can use on their local machine or "download" which is where one can download the zip file on to their machine.

Install the projects requirements.txt using pip3 install -r requirements.txt

You will need to update a few environment variables before you can run the app.

os.environ.setdefault("DATABASE_URL", "")

os.environ.setdefault("EMAIL_HOST_PASS", "")

os.environ.setdefault("EMAIL_HOST_USER", "")

os.environ.setdefault("SECRET_KEY", "")

os.environ.setdefault("STRIPE_PUBLIC_KEY", "")

os.environ.setdefault("STRIPE_SECRET_KEY", "")

Once the above steps are complete you can try run the application using python3 main.py

All text content in this website was written by me.

The photos used in this site were obtained from:

Homepage background gotten here

Xenios USA Fitness Dumbbells gotten here

Water Bottle gotten here

Skipping Rope gotten here

Arrival 5 Shorts gottenhere

Fit Seamless Shorts gotten here

Sports Bra gotten here

30 Day Strength Traning gotten here

Warrior Workout gotten here

Cardio HIIT gotten here

30 Day Meal Plan gotten here

Vegan bodybuilding gotten here

Lean Muscle diet plan gotten here

I received inspiration from an Bootstrap mini project that was taught to us as part of our course.