Milestone Project 4

Fancy Shoes | Your Online Shop for Shoes

By: Marina Christen, October 2021
This webpage is the last Milestone Project which is a part of the Full Stack Web Development Program of Code Institute.

Live Project

View the live project here

Screenshot

All screenshots created using Am I responsive.

Table of Contents

• Project
  • Project Description
  • Project Requirements
  • Project Goals
  • Website Description
  • Website Owner's Goals
• UX Design
  • User Stories
    • Viewing and Navigation
    • Registration and User Accounts
    • Sorting and Searching
    • Purchasing and Checkout
    • Admin and Store Management
• Design
  • Colours
  • Wireframes
  • Responsive Front-end Design
  • Back-end Design
  • Site Construction
    • Topology
  • Database Schema
    • Fixtures JSON File creation
• Technologies
  • Languages
  • Database
  • Libraries
  • Tools
• Features
  • User Stories Implemented
  • CRUD Functionality
  • Messages
  • Defensive Programming
  • Additional Site Features
  • Future Features
• Testing
• Bugs
• Deployment
  • Cloning Milestone Project 4 from GitHub
    • Prerequisites
    • Cloning the GitHub repository
    • Creation of a Python Virtual Environment
    • Install the App dependencies and external libraries
    • Create the database in sqlite3
    • Create .env file
    • Run the application locally
  • Deploying Milestone Project 4 app to Heroku
    • Creating the Heroku app
    • Adding a PostgreSQL database to Heroku
    • Load the data into PostgreSQL
    • Push your repository to GitHub
    • Launch the app
• Credits
  • Images
  • Acknowledgements

Project

Project Description

The goal of this project is to build a full-stack site based around business logic used to control a centrally-owned dataset and to showcase the knowledge of HTML, CSS, JavaScript and Python+Django I gained so far in this course.

To set up an authentication mechanism and provide paid access to the site's data and/or other activities based on the dataset, such as the purchase of a product/service.

Project Requirements

• HTML
• CSS
• JavaScript
• Python+Django
• Relational database (recommending MySQL or Postgres)
• Stripe payments
• Additional libraries and APIs

Project Goals

• To build something awesome to be proud of
• To make effective use of course knowledge and fulfill all given requirements
• To make a project with a great looking layout, that works and that is practical
• To create a web application that makes the user want to stay and use with pleasure

Website Description

Fancy Shoes is a (fictitious) online retailer providing footwear for sale. The idea for this final 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.

Website Owner's Goals

• To build awareness of the brand
• To increase traffic to the site
• To provide a simple and easy shopping experience
• To provide easy and simple to understandable information
• To be visually striking to catch attention and provoke curiosity to explore the page
• To encourage advertisers to place their ads on the page

Back to Table of contents

UX DESIGN

User Stories

Viewing and Navigation

As a shopper,

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

Registration and User Accounts

As a shopper,

8. I want to be able to register for an account to make future purchases easier.
9. I want to be able to easily log in and out of my account so that I can access my personal account information.
10. I want to be able to receive and email requireing me to verify my email account to finish account registeration.
11. I want to be able to log in and have a personal profile page containing my delivery details and order history.
12. I want to be able to save and update my delivery information on my personal profile page.
13. I want to be able to leave a review of the company and the recived product.

Sorting and Searching

As a shopper,

14. I want to be able to sort the available products by name, price, sub-category or product type.
15. I want to be able to filter and group products for men and women.
16. I want to be able to see how many products are available based on the sorting / filtering I have applied.
17. I want to be able to search for a product by name, type or sub-category.

Purchasing and Checkout

As a shopper,

18. I want to be able to easily select the size and quantity of a product when adding it to the shopping cart.
19. 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.
20. 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.
21. I want to be able to checkout securely where I can enter my delivery and credit card payment details with confidence.
22. 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

As a store owner,

23. I want to be able to add new products to my store.
24. I want to be able to edit / update the current product details and replace the product image file.
25. I want to be able to delete a product that is no longer for sale.

Back to Table of contents

Design

Colours

I chose the colours mainly from the standard Bootstrap Colours and applied classes to the template sections as they go comfortably with the light colors of the contemporary ones Websites of shoe retailers based on this project website. The colour schemes is created by using Coolors.

• text (#343A40) - Gunmetal
• bg-blue (#6DB1BF) - Maximum Blue
• hover effects and buttons (#6DB1BF) - Blue Crayola
• bg-success and buttons (#28A745) - Green Pantone
• bg-warning and buttons (#FFC107) - Mikado Yellow
• text and buttons (#DC3545) - Rusty Red

Wireframes

I designed the site mock-ups using Balsamiq wireframes.

• Home Page
• User Registration
• User Log In
• My Profile
• Products
• Product
• Admin Product Management - Add a Product
• Admin Product Management - Edit a product
• Shopping Cart
• Checkout
• Checkout Success

Responsive Front-end Design

• Responsive mobile first design using a Bootstrap v4.6 framework
• Django Template language is used to create the site's front-end dynamic content.

Back-end Design

• The app is created using Python3 and Django framework to create an application structured using the Model-View-Controller (MVC) pattern.
• The site is deployed via a Heroku app linked to a GitHub repository.
• The dynamic content is served utilising a PostgreSQL relational database with static files and media stored on an AWS S3 bucket.

Site Construction

Topology

• User Logged Out

• User Logged In

• Admin / Super User Logged In

Database Schema

Fixtures JSON File creation

The data set for this project was sourced from the Fashion Product Images from www.kaggle.com.

The images needed to be curated down and were manually sorted through to a manageable number for this project and were copied into a separate folder.

The .csv file were converted into a JSON file and the products needed some manually customizing and addition information like price, discount_price, sku, size and special_offer.

Back to Table of contents

Technologies

Languages

• HTML5
  • Used as the main markup language for the website content.
• CSS3
  • Used to style the individual webpages.
• JavaScript
  • Used to create the interactive functionality of the website
• Python3
  • Used to create the main application functionality

Database

• PostgreSQL
  • A powerful, open-source object-relational database.
• sqlite3
  • Default database created with Django used for app development on localhost.

Libraries / Frameworks

• Bootstrap5
  • Used to design a mobile-first responsive website layout.
• Django
  • A high-level Python Web framework.
• Django-Allauth
  • Python user authentication and login plugin for Django.
• Stripe
  • Online payments platform used for the shopping basket functionality.
• Green Unicorn (gunicorn)
  • Python WSGI HTTP Server for Unix used on the Heroku deployment.
• psycopg2-binary
  • PostgreSQL database adapter for Python.
• Pillow
  • Python Image Library image processing capabilities.
• sqlparse
  • sqlparse is a non-validating SQL parser for Python. It provides support for parsing, splitting and formatting SQL statements.
• Boto3
  • AWS SDK for Python (Boto3) used to create, configure, and manage AWS S3 services.
• jQuery
  • Used for the initialisation of the Bootstrap components functionality and enhance the shopping bag functionality.
• Django Template Language
  • Templating language for Python.

Tools

• Git
  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
• GitHub
  • Used to store, host and deploy the project files and source code after being pushed from Git.
• Gitpod
  • An online IDE linked to the GitHub repository used for the majority of the code development.
• Font-Awesome
  • Used for icons to enhance headings and add emphasis to text.
• Google fonts
  • Used for the website fonts.
• Heroku
  • Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
• AWS S3
  • Amazon Simple Storage Service (Amazon S3) is an object storage service used to store the site static files
• convertcsv
  • Online CSV to JSON conversion tool
• Django Secret Key Generator
  • The Django Secret Key Generator is used to generate a new SECRET_KEY for environment variables.
• Balsamiq wireframes
  • An online tool to designed the site mock-ups.
• Coolors
  • An online tool used to choose the website colour scheme.
• paint.net
  • Used to create the Icon, Favicon and Logo/Brand of the webpage and the database entity-relationship diagram.
• favicon.io
  • Used to create the website favicons
• Am I Responsive?
  • A tool for taking a quick snapshot of the responsive breakpoints of the website to visualize how the site will look on different device screen sizes in one place. The resulting screenshot is also used as the README.md logo image.

Back to contents

Features

User Stories Implemented

CRUD Functionality

Messages

• Bootstrap Toasts are used with customised templates to show:
  • Errors - Django messages are displayed within the Toast body section with a red coloured top border of the header
  • Info - Django messages are displayed within the Toast body section with a teal coloured top border of the header
  • Success - Django messages are displayed within the Toast body section with a green coloured top border of the header
    • If the shopping cart grand total is greater than zero, the success toast also shows the user their current shopping cart contents with sub-total, delivery and grand total amounts.

Defensive Programming

• In order to try to maintain the site security, defensive programming to prevent "brute force" loading of restricted pages was introduced.
  • At its simplest level, certain pages are removed from view unless a user is authenticated by being logged in or not.
  • Where appropriate, Python views functions are also modified by Django @login_required decorators to restrict user access to inappropriate pages.
  • Editing of products is restricted to super-users or admins using if...else conditions to check user authentication.

Additional Site Features

• A set of friendly HTTP Error landing pages for site visitors to see if a requested page is unavailable or cannot be accessed.
  • The pages provide a message to the user and a button to click to return the visitor to the homepage.
  • HTTP 404, 500 & 503 errors are handled with custom templates to cover the most common events.

Future Features

• Django Pagination to allow limiting the number of products per page to vastly improve the site performance while allowing full product inventory to be displayed across multiple pages.

• performance improvements with product image loading by replacing .jpg image media files with .webp versions to reduce the network payload by around 50% for mobile devices.

• Account user registration using social media accounts such as Google, Facebook or LinkedIn.

• Additional tables for stock inventory control to create dynamic updates of the available sizes, stock quantities and In Stock / Out of Stock indicators.

• Discount codes functionality within the checkout app with a database table codes and validity from / to date ranges.

• More product categories like cleaning and care products or accessories for shoes

Back to Table of contents

Testing

• Testing information can be found in a separate TESTING.md file.

Back to Table of contents

Bugs

• Bug informations can be found in a separate TESTING.md file.

Back to Table of contents

Deployment

The website was developed using Gitpod and using Git pushed to GitHub, which hosts the repository.

Cloning Milestone Project 4 from GitHub

Prerequisites

Ensure the following are installed locally on your computer:

• Python 3.6 or higher
• PIP3 Python package installer
• Git Version Control

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

• navigate to Puksrevolution/milestone-project-4 GitHub repository.
• Click the Code button
• Copy the clone url in the dropdown menu
• Using your favourite IDE open up your preferred terminal.
• Navigate to your desired file location.

Copy the following code and input it into your terminal to clone milestone-project-4:

git clone https://github.com/Puksrevolution/milestone-project-4.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

• In your IDE terminal window, install the dependencies from the requirements.txt file with the following command:

pip3 install -r requirements.txt

Create the database in sqlite3

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

Run the following commands to create the database tables:

• Check there are no changes to the models already configured.

python3 manage.py makemigrations --dry-run

• Check which migrations will be applied.

python3 manage.py migrate --plan

• Apply the migrations.

python3 manage.py migrate

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

python3 manage.py loaddata gender
python3 manage.py loaddata 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

• Import and initialise environ in settings.py.
  • A helpful guide can be found here
• The .env file should contain at least the following information:

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]

• Please ensure you add in your own SECRET_KEY, STRIPE_PUBLIC_KEY, STRIPE_SECRET_KEY and STRIPE_WH_SECRET values.
• The Stripe keys can be found in the Developers section under API Keys and Webhooks of your Stripe Account
• Important: Add the .env file to your .gitignore file before pushing your files to any public git repository.

Run the application locally

• To run the application, enter the following command into the terminal window:

python3 manage.py runserver

Deploying milestone-project-4 app to Heroku

Creating the Heroku app

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

• Log in to your Heroku account dashboard and create a new app.
• Enter the App name.
  • This needs to be unique.
• Choose a geographical region closest to where you live.
  • Options available on a free account are United States or Europe

Adding a PostgreSQL database to Heroku

• Select the Resources tab on your Heroku app dashboard
• Select Heroku Postgres as a new add-on with a Plan name of Hobby Dev - Free
• Heroku will build the PostgresQL database instance and add a config variable automatically.

Load the data into PostgreSQL

• Add the following variable to the .env file:

DATABASE_URL=[YOUR POSTGRESQL DATABASE URL FROM HEROKU CONFIG VARS]

• Apply the migrations to the Heroku PostgreSQl database tables.

python3 manage.py migrate

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

python3 manage.py loaddata gender
python3 manage.py loaddata 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

• In the Heroku App Settings page, open the section Config Vars
• Add all the environmant variables from your local .env file into the Heroku Config Vars:

• In the Heroku App Deploy page:
  • Select GitHub from the Deployment Method options.
  • Select Connect to GitHub.
  • Log in to your GitHub account from Heroku to link the App to GitHub.
  • Search for and select the repository to be linked in GitHub.
  • Select Connect.
  • Select Enable Automatic Deployment from the GitHub Master / Main branch.

Launch the app

• Click Open App in Heroku to launch the App in a new browser window.

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 Table of contents

Credits

Images

• Product Images

  • Dataset: E-commerce Product Images
    • Credit: vikashrajluhaniwal @ www.kaggle.com
    • The dataset consists of 2906 images and associated one .csv data files containing the product information.

• Home Page

  • All homepage images were source as free to use from pixabay.com under their license agreement
  • Woman Fashion - Photo by smilenesita on Pixabay
  • Brown Shoes - Photo by Free-Photos on Pixabay
  • Shoes - Photo by TJFREE on Pixabay

• Favicon

  • The Favicon image were source as free to use from pixabay.com under their license agreement
  • Shoe Prints - Photo by OpenClipart-Vectors on Pixabay

Back to Table of contents

Acknowledgements

• Code Institute Course material - in particular the Boutique Ado Django mini project
• Simon Vardy for code snippets and README.md content.
• Brian Whelan Dublin for code snippets.
• auxfuse for code snippets.
• Bootstrap v4.6 Documentation and code snippets used to build most of the templates

Back to Table of contents