Giter Club home page Giter Club logo

project_5-1's Introduction

![GamerZDen](picture in here)

GamerZDen


Info about the site

![GamerZDen Responsiveness ](pic of response)

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

UX

Project Goal

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.

User Stories

User Stories for Customers

As a customer I would like to So that I can
Browse products purchase what I need
Search products find something specific
Filter products by price, name or category compare the prices
Buy a product so that I can upgrade my gear
Pay using a card complete my purchase
Create a profile save my information and review past orders
Update my profile information I can auto-fill my info during checkout
See my shopping cart before paying know the cost and evaluate my added products
Update my shopping cart change products without starting over
See details about a product make an informed decision
View my order history find an order in case of warranty claim
Receive an email confirmation about my order have archived information about it
Contact the shop know about the status of an order
Know the newest arrivals buy the hottest products

User Stories for Shop Administrators

As an administrator I would like to So that I can
Add/Update/Remove a product keep the store up to date

Data Structure

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

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

Design

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

Typography

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.

Colors

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.

Features

Existing Features

Home Page

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

Product Listing

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

Product View

  • 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

User Account

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

Shopping Cart

  • 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

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

Administrator features

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

Features Left to implement

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

Testing

Testing was done manually throughout the development process. Just some of the testing below:

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

Deployment

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:

Local Deployment

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.

Deployment to Heroku

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"

Technologies

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

Tools Used

Credits

Media

  • 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

Acknowledgements

Problems

Solved

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

Not solved

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

project_5-1's People

Contributors

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