• UX
  • Project Goal
  • User Stories
    • User Stories for Customers
    • User Stories for Shop Administrators
  • Data Structure
  • Design
    • Typography
    • Colors
• Features
  • Existing Features
    • Home Page
    • Product Listing
    • Product View
    • Producers Page
    • User Account
    • Shopping Cart
    • Payment
    • Administrator features
  • Features Left to implement
• Testing
• Deployment
  • Local Deployment
  • Deployment to Heroku
• Technologies
• Tools Used
• Credits
  • Media
  • Acknowledgements

Info about the site


The site has been deployed to Heroku and can be viewed [here](heroku link).

This is my fifth and final project during my course at CodeInstitute. The goal was to create an e-commerce site using django framework. Implementing stripe for payments and AWS for file storing. Then deploy it to heroku.

Before starting the development of the application, models and their relationships were planned:

superuser < ProfileModel <> checkoutform > order model > product model ^> Personal Page <

This application was styled using bootstrap for a better responsive design. Colors has been selected carefully to match and make it easy to read.

Two fonts from Google Fonts were used throughout the site:

1. Roboto Slab was used for all the headings

2. Lato was used for all the content with different weights.

A simple color scheme was used to accentuate readability and usability.

• I choose to go with white background except the landing page which I felt need a bit more spice. And to break all the white and black of, I added a colorful header.

• The home page displays a header with different links depeding on if logged in. Also depending on what type of account, for example if superuser or shopper
• The home page also consist of a nice background with two different links to faster access the shop.

The shop offers a number of solutions to make specific products easier to list and find.

• A search function lets users find specific products, searches in name, description and SKU fields
• A product listing can be sorted by price, category, name or rating
• A product listing can be filtered by category | Data Structure

• A user can view the details of a product, which includes the following:
  • Product name
  • Image
  • Make
  • Model
  • Description
  • Rating
  • SKU
  • Price
• Users can choose a quantity and add it to their cart

The creation of an account requires a valid email, a username, and a password. The creation of an account gives access to the following features:

• Update of profile information
• View the account's order history
• Auto population of form fields during checkout

• Items chosen for purchase are placed in the shopping cart
• The shopping cart displays subtotals for items placed in it and a grand total cost
• Quantities for the products can be adjusted from within the shopping cart
• Items can be removed from the shopping cart
• A user can choose to proceed to payment

• The checkout details and delivery information are pre-filled with the information provided in the user's profile, it can however be edited.
• A summary of the order is displayed on the checkout page
• Payment is made by card using Stripe

• On product pages, an administrator has additional links to edit a products information or remove it from the shop

• For more payment options during checkout adding paypal would be great.

• I have tested form submission both from webhooks and directly with javascript. This was tested by commenting out javascript form submission and then checking admin for orders.
• Profile saving was tested by making a purchase then checking admin if profile updated.
• Auto population of checkout fields was tested by making a purchase
• Webhooks have been tested by making purchases with and without form submit active. This to make sure the webhook handles form validation in case of unforseen troubles.
• All views has been tested by visiting every assigned url.
• All links has been tested by clicking, making sure you can flow through the site.

Additionally, all code was validated in the following ways:

HTML - All pages were successfully run through the W3C HTML Validator to ensure compliance with the standards set by the W3C.

CSS - CSS validation with the W3C Jigsaw Validator Other than that, the code complies to the W3C standards.

Python - All Python code was checked with the PEP8 online validator and is PEP8 compliant, aside from line length flags, which were left for code readability.

Before deploying the application, ensure the following are installed:

• Python 3
• Gunicorn
• psycopg2
• Stripe
• Postgres
• Django
• dj-database-url
• PIP
• Git
• Heroku CLI

The application relies on the following services, and accounts will have to be created for them:

• Amazon AWS
• Stripe for payment
• An email account, Gmail for sending and receiving emails.

These are the steps to deploy GamerZDen locally.

1. From the application's repository, click the "code" button and download the zip of the repository.

   Or, you can clone the repository by typing the following line in your terminal:

   git clone https://github.com/Knasten/Project_5.git
   

2. Access the folder in your terminal window and install the application's required modules using the following command:

   pip3 -r requirements.txt
   

3. Create a file containing your environmental variables called env.py at the root level of the application. It will need to contain the following lines and variables:

   import os
   
   os.environ["SECRET_KEY"] = "YOUR_DJANGO_SECRET_KEY"
   
   os.environ["STRIPE_PUBLIC_KEY"] = "YOUR_STRIPE_PUBLIC_KEY"
   os.environ["STRIPE_SECRET_KEY"] = "YOUR_STRIPE_SECRET_KEY"
   os.environ["STRIPE_WH_SECRET"] = "YOUR_STRIPE_WEBHOOK_SECRET"
   
   os.environ["DEVELOPMENT"] = "True"
   

   Please note that you will need to update the SECRET_KEY with your own secret key, as well as the Untappd and strip keys and secret variables with those provided by those applications.

   You can also install theese keys into your workspace variables. Which I much prefer.

   If you plan on pushing this application to a public repository, ensure that env.py is added to your .gitignore file to protect your secrets.

4. The application can now be run locally. In your terminal, type the command python3 manage.py runserver. The application will be available in your browser at the address http://localhost:8000.

To deploy Beer WareHaus to Heroku, use the following steps:

1. In Heroku create a new application.

2. From the heroku dashboard of your application, click on "Deploy", then "Deployment method" and select GitHub to connect the application to your github repository

3. In the Heroku Resources tab, navigate to the Add-Ons section and search for Heroku Postgres. The hobby level can be selected for this application.

4. Click on the "settings" tab and on the button labelled "Reveal Config Vars". The Postgres addon will have created a link to the Postgres database.

5. Add the following configuration variables to the application:

   VARIABLE	VALUE
   DATABASE_URL	Postgres Database url provided by the addon
   STRIPE_PUBLIC_KEY	The public key provided by Stripe
   STRIPE_SECRET_KEY	The secret key provided by Stripe
   STRIPE_WH_SECRET	The webhook secret provided by Stripe
   SECRET_KEY	Your Django secret key

6. In the Heroku dashboard, deploy the application.

7. To view the site, click "View App"

• HTML
• CSS
• JavaScript / jQuery / JSON
• Python
• Django

• Github
• Heroku
• Paint
• Google Fonts
• Font Awesome
• TinyJPG used to compress all images

• Icon for "No photo available" image made in paint.
• Images used in the project comes from BestBuy as law dictates you can use images in educational purposes. As long as they are not used in any way to disrupt the business.
• Home background images was taken from Photo by Sadeq Shahsvan

• This site is meant for educational use.
• Special thanks to my mentor Richard Wells for his support.
• I would also like to thank Björn Nilsson for the cooperation while building our fixtures.
• Checkout html is mostly borrowed from Codeinstitute walkthrough project for E-Commerce, copied and then edited to suit my page better.
• While writing this project code snippets has been borrowed from our walkthrough project along with the allauth templates. So I would also like to extend warm thank you to the lovely folks at CodeInstitute.
• EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
• Restricting of views for super user was done by reading this (https://stackoverflow.com/questions/15998140/how-to-limit-a-view-to-superuser-only/47689629), (https://docs.djangoproject.com/en/3.2/topics/auth/default/#django.contrib.auth.decorators.user_passes_test)

• Media was not showing up when I first started out the project. After reading and checking the code I found it was this line "[BASE_DIR / 'media']". I had to change it to os.path.join(BASE_DIR, 'media) and it started working. Though the static files were still able to use 'BASE_DIR /' syntax
• Products images not showing up in cart: This was beacuse of spelling mistake on the url link, accidently wrote "." instead of "_"
• Lot of problems with my collasible menus OR when they were working my toast didn't work. After alot of thinking I found my toast would work with an older version of bootstrap and I could my collasible working by removing 'bs' from all 'data' arguments in the form.

• When using the keyboard arrows you are able to go beyond the qty limit set, when adding products to the cart.