search

simonjvardy / Sportswear-Online

Code Institute Milestone 4 Project e-commerce site providing full CRUD functionality. The site features user authentication, Stripe credit card payments and emailed order confirmations. Developed using Python3 and Django framework utilising sqlite3 / PostgreSQL databases and media served from an AWS S3 bucket.
https://sportswear-online.herokuapp.com/
3 stars 4 forks source link
aws-s3 bootstrap4 css3 django-framework e-commerce heroku-deployment herokuapp html5 milestone-4 postgresql-database python3 shopping-cart sqlite3 stripe-checkout

readme

Sportswear Online logo

Sportswear Online is a (fictitious) online retailer providing sports clothing, footwear, equipment and accessories for sale. The idea for this final milestone project is to provide the visitor with a fully functioning, interactive e-commerce website providing easy, familiar navigation and allowing the simulated purchase of items from the store.

The site functionality will allow a common shopping experience for the visitor by providing a shopping cart to save chosen items, a secure checkout / payment facility and order confirmation using both on-screen messages and friendly, personalised emailed message.

Please note: This site is purely for educational purposes only. The credit card payment facility is real but remains in test mode and so no payments will be taken. Please do not enter real credit card details when using this site.

Sportswear Online screenshot

Contents

UX DESIGN

Project Goals

The goal of this project is to build a fully functioning e-commerce website, similar in design to popular UK high street retailers, allowing the user to browse a range of sports related products.

The features of the website will be:

I achieve this by:

User Stories

Viewing and Navigation

  1. As a shopper, I want to be able to view a list of products so that I can choose some items to purchase.
  2. As a shopper, I want to be able to filter products that I am interested in without searching through all the products.
  3. As a shopper, I want to be able to select individual products to see more detailed information and add the item to my shopping cart.
  4. As a shopper, I want to be able to see any product special offers, new arrivals and available deals, taking advantage of any reduced prices shown.
  5. As a shopper, I want to be able to see items I have placed in my shopping cart easily so that I can keep track oof what I am buying
  6. As a shopper, I want to be able to see breadcrumb navigation links to see where I am on the site easily.

Registration and User Accounts

  1. As a site user, I want to be able to register for an account to make future purchases easier
  2. As a site user, I want to be able to easily log in and out of my account so that I can access my personal account information
  3. As a site user, I want to be able to receive and email requireing me to verify my email account to finish account registeration.
  4. As a site user, I want to be able to log in and have a personal profile page containing my delivery details and order history
  5. As a site user, I want to be able to save and update my delivery information on my personal profile page.

Sorting and Searching

  1. As a shopper, I want to be able to sort the available products by price, main category, sub-category or product type
  2. As a shopper, I want to be able to filter and group products for men, women, unisex or kids.
  3. As a shopper, I want to be able to see how many products are available based on the sorting / filtering I have applied
  4. As a shopper, I want to be able to search for a product by name, type or category.

Purchasing and Checkout

  1. As a shopper, I want to be able to easily select the size and qualtity of a product when adding it to the shopping cart
  2. As a shopper, I want to be able to view the items in my shopping cart waiting to be purchased, seeing the sub-total, delivery costs and grand total amounts.
  3. As a shopper, I want to be able to easily update the items in the shopping cart by changing the quantities of products or remove them from the cart.
  4. As a shopper, I want to be able to checkout securely where I can enter my delivery and credit card payment details with confidence.
  5. As a shopper, I want to be able to view an order confirmation page as well as receive and email order confirmation once the transaction has succeeded.

Admin and Store Management

  1. As a store owner, I want to be able to add new products to my store
  2. As a store owner, I want to be able to edit / update the current product details and replace the product image file
  3. As a store owner, I want to be able to delete a product that is no longer for sale.

Back to contents

Design Choices

Colours

I've chosen the colours mostly from the standard Bootstrap Background Colours, applying classes to the template sections, as they conveniently fitted with the bold colours of the contemporary Sportwear Retailer sites this project site was modelled on:

Coolors.co Palette

Wireframes

I designed the site mock-ups using Balsamiq wireframes. I focussed on defining the basic layout structure of the site and identified how displays would change on different screen sizes such as mobile, tablet and desktop for each page.

Technologies

Languages

Database

Libraries / Frameworks

Tools

Back to contents

Features

Features Implemented

The following section describes the site design and page layouts to demonstrate the features implementsed.

Responsive Front-end Design

Back-end Design

User Stories Implemented

User Story ID Features Implemented
1 The Products page shows a full list of products with a product image, name, price and category labels. The products are displayed in a grid format with 4 columns on larger displays and reducing down to 1 column on mobile displays.
2, 4 & 13 The navbar allows users to filter the products by gender, category, sub-category and article type as well as special offers categories. The navbar menus are arranged to provide quick access to defined sorting criteria to assist the user to quickly find the types of products they want.
3 Each product image in the Products page can be clicked to open the item product page selected. The product page includes all the same information as the Products page but includes a quantity selector and a size selector (product category dependant), as well as allowing the user to return to the main products page or add the item to the shopping cart.
5 & 17 The user can click the shopping cart icon in the top right corner of the navbar to be taken to the cart page where each shopping cart item is listed with a product image, product details, unit price, quantity selector and a sub-total column. A toast message pop-up window appears each time the user adds an item to the shopping basket as a secondary way to easily keep track of the items to be purchased. Delivery cost and grand total amounts are also displayed on the shopping cart page.
6 The breadcrumbs navigation links are shown just below the delivery banner in the upper left corner of the main page block. They show the current page and provide navigation links back to the Home page or other related pages.
7 & 9 Users can click the My Account link in the navbar and select Register from the dropdown menu. The user is directed to the Sign-Up page where they must enter their email address, username and a password. An email is sent to the user to verify the account email address before registration is complete.
8 Users can click the My Account link in the navbar and select Log In from the dropdown menu. The user is directed to the Log In page where they must enter their username and a password. Once logged in, users can click the My Account link in the navbar and select Logout from the dropdown menu.
10 & 11 Users who are logged in can click the My Account link in the navbar and select My Profile from the dropdown menu. The user is directed to the My Profile page where they can see their saved delivery details and order history records. Users can update and save their details from the My Profile page.
12 A sorting selector is available on the Products page with a number of sorting options to list the products in both ascending and descending order.
14 The products page displays the total number of products returned by the search query
15 The navbar has a search box visible on larger displays or can be revealed when tapping the search icon on mobile displays. The user can search for a product by name, type or category.
16 Users can select the size (product category dependant) and the quantity from the individual product page when adding the item to the shopping cart.
18 Items in the shopping cart can have their individual quantities updated between 1 and 99 or remove the item if no longer needed.
19 Secure checkout and payment is provided by the integrated Stripe online credit card payment system.
20 Once an order is completed, the user is shown an order confirmation page detailing the oirder information, order details, delivery address and billing information.
21 Logged in store owners (admin / super users) have access to a Product Management page where new products can be added.
22 & 23 Logged in store owners (admin / super users) have access to edit and delete buttons for all products on the site. The edit button opens and edit product page where the store owner can update the product details.

Site Construction

Topology

Topology - User logged out

Topology - User logged out

Topology - User logged out

Database Schema

Entity-Relationship Diagram

Fixtures JSON File creation

The full description of the fixtures JSON files creation process can be found in the FIXTURES.md document.

CRUD Functionality

Site Page Create Read Update Delete
Products All Products
Products Delete Single Product
Product Page Single Product
Product Page Delete Single Product
Add Product Add New Product
Edit Product Single Product
Edit Product Update Single Product
Shopping Cart All Products
Shopping Cart Update Product Quantity (Session)
Shopping Cart Remove Product (Session)
Checkout All Products
Checkout Create Order
Checkout Create Order Line Items
Checkout User Delivery Details
Checkout Update User Details
Checkout Update Product Quantity (Session)
Checkout Remove Product (Session)
Sign Up Add New User
Log In User Details
Profile User Details
Profile User's Orders
Profile Update Delivery Details

Messages

Defensive Programming

Additional Site Features

Future Features

Back to contents

Project Management

GitHub Projects are used to organize the planning and development of the website. Two GitHub projects are used to manage different aspects of the site development:

The Projects are created using the following GitHub templates:

GitHub Projects

Back to contents

Version Control

Version control for this repository is managed within GitHub and Gitpod using separate branches used to work on specific aspects of the project. The following describes the repository branch structure:

Back to contents

Testing

Back to contents

Bugs

To manage bugs and issues tracking, the default GitHub bug_report.md template has been created and activated within the repository settings Features > Issues section. All new bugs and issues are tracked within the GitHub repository Issues section . Open issues are managed within the GitHub Bug Fixes Project

Each branch is then merged into the main branch using a pull request that is linked to the open issue. Once merged, and the bug report closed, the branch is deleted.

Fixed bugs and issues are marked as closed. Full details of all closed issues can be viewed here.

GitHub Issues

GitHub Issues Example

Back to contents

Deployment

The website was developed using both Gitpod and Visual Studio Code and using Git pushed to GitHub, which hosts the repository. I made the following steps to deploy the site using Heroku:

Cloning Sportswear Online from GitHub

Prerequisites

Ensure the following are installed locally on your computer:

Please ensure you have an account created at Stripe in order to use the online payment processing for the checkout app.

Cloning the GitHub repository

Copy the following code and input it into your terminal to clone Sportswear-Online:

git clone https://github.com/simonjvardy/Sportswear-Online.git

Creation of a Python Virtual Environment

Note: The process may be different depending upon your own OS - please follow this Python help guide to understand how to create a virtual environment.

Install the App dependencies and external libraries

pip3 install -r requirements.txt

Create the database in sqlite3

The installaton of the requirements.txt file will initialise the sqlite3 development database locally.

Run the following commands to create the database tables:

python3 manage.py makemigrations --dry-run
python3 manage.py migrate --plan

python3 manage.py migrate

Load the fixtures files into the database in the following order:

python3 manage.py loaddata gender
python3 manage.py loaddata master_category
python3 manage.py loaddata sub_category
python3 manage.py loaddata article_type
python3 manage.py loaddata special_offer
python3 manage.py loaddata products

Create .env file

DEVELOPMENT=True
SECRET_KEY=[YOUR SECRET KEY]
STRIPE_PUBLIC_KEY=[YOUR STRIPE PUBLIC KEY]
STRIPE_SECRET_KEY=[YOUR STRIPE SECRET KEY]
STRIPE_WH_SECRET=[YOUR STRIPE WEBHOOK SECRET KEY]

Run the application locally

python3 manage.py runserver

Deploying Sportswear Online app to Heroku

Creating the Heroku app

Please ensure you have an account created at Heroku in order to deploy the app.

Adding a PostgreSQL database to Heroku

Load the data into PostgreSQL

python3 manage.py migrate
python3 manage.py loaddata gender
python3 manage.py loaddata master_category
python3 manage.py loaddata sub_category
python3 manage.py loaddata article_type
python3 manage.py loaddata special_offer
python3 manage.py loaddata products

Push your repository to GitHub

Key Value
SECRET_KEY [YOUR SECRET KEY]
STRIPE_PUBLIC_KEY [YOUR STRIPE PUBLIC KEY]
STRIPE_SECRET_KEY [YOUR STRIPE SECRET KEY]
STRIPE_WH_SECRET [YOUR STRIPE WEBHOOK SECRET KEY]
DATABASE_URL [YOUR POSTGRESQL DATABASE URL]
EMAIL_HOST_PASS [YOUR GMAIL APP SIGN IN PASSWORD]
EMAIL_HOST_USER [YOUR ORDER CONFIRMATION EMAIL ADDRESS FROM GMAIL]

Launch the app

Note: The static files served from GitHub will be much slower to load than running locally. It is recommended to copy the static files to an online service such as an AWS S3 Bucket and connect this to Heroku.

Back to contents

Credits

Inspiration

The following sportswear online retailers' websites were the basis for the design and layout ideas:

Images

Acknowledgements