Skip to content

Latest commit

 

History

History
1352 lines (970 loc) · 66.1 KB

README.md

File metadata and controls

1352 lines (970 loc) · 66.1 KB

Elite Rides

Elite Rides is an E-commerce store that specialises in die-cast models of luxury, high-end cars. As a Customer you are able to purchase a product and set up and online account. Guest checkout is also available. As the Store Admin, you can login from the store-front and edit the product details, and delele products too. Elite Rides is responsive which makes shopping possible on mobile and table devices.

Visit the website

image


Contents

User Experience Design

I used the 5 Planes of UX to provide a conceptual framework.

Strategy Plane

Target Audience

  • User - Customers Hobby enthusiasts, mainly adults who can make purchases online.
  • Admin E-Commerce Managers.
  • Super Admin Store Owner, E-Commerce Managers.

Mission Objectives:

  • To develop an mvp (minimum viable product) that allows Users to navigate an online store and purchase a product.
  • The shopping experiecne must be simple in design and navigation.
  • Admins will have a store-front login to manage product cataloge.
  • Super Admins can access the Django back-end to view and manages Order and Customer data.

The Why

  • As a high-end car aficionado and collector, it's hard to find a site online that deals with only stylish, luxury models. Also, existing competitors don't stand out in the market and it's hard to find them online.
  • I want to promote an exlusive presence and target a younger and modern audience.
  • Make die-cast models attractive again. Not focusing on racing and classic cars.

Ideas and Inspiration Mind Map

image

Content Strategy

  • Keep content simple and easy to digest.
  • Let the imagery and branding become more engaging.

Typography

https://fonts.google.com/ Jura was used due to it's luxury, modern look and feel. It's easy to read. image

Back to contents

Scope Plane

Functional Requirements for an MPV

  1. Checkout functionality
  2. Account Profile and User Authentication
  3. CRUD Functionality
  4. Site Navigation
  5. Newsletter SignUp
  6. Stripe 3rd Party Payment Integration
  7. Search Functionality
  8. Order Confirmation Email
  9. SEO Optimisation
  10. Company Information Pages
  11. Accessibilty
  12. Product Detail Page
  13. Product Listing Page
  14. Triggered Customer Messaging
  15. Taxonomy: Category Tree
  16. Standard E-commerce store layout (Header, Footer, Homepage)
  17. Error Handling
  18. 404 Error Page
  19. Shipping Rate Logic
  20. Product Reviews

Back to contents

Content Requirements

  • Customer Homepage with hero text and a hero banner.
  • Customer Category Pages.
  • Customer Contact Us Form.
  • Customer Company Information Pages (About, T&Cs, Privacy Policy, Cookie Policy).
  • Customer Footer to include Social Media Links, Links to Company Info and Newsletter signup.
  • Customer Account Related Pages: Login, Register.
  • Admin Access to manage products with CRUD functionality.

Back to contents

Interaction Design

  • All CTA (Call to Action) buttons will change colour to let the customers know that the buttons are clickable.
  • The Customer and Admin are notified for changes and major actions.
  • The Customer recieves an order email confirmation when checkout has successfully completed.

Back to contents

Scope of MVP

Using the MoSCoW prioritisation method to outline the importance of each requirement and what needs to be delivered in the MVP.

Requirements Must Have Should Have Could Have Won't Have
USP (Unique Selling Point) Carousel on Homepage Y - - -
Checkout functionality Y - - -
Role-Based Login and Registration Y - - -
Restrict User access to Admin area Y - - -
Admin CRUD Functionality Y - - -
Site Navigation Y - - -
Newsletter SignUp Y - - -
Stripe 3rd Party Payment Integration Y - - -
Search Functionality Y - - -
Order Confirmation Email Y - - -
SEO Optimisation Y - - -
Company Information Pages Y - - -
Accessibilty Y - - -
Product Detail Page Y - - -
Product Listing Page Y - - -
Triggered Customer Messaging Y - - -
Taxonomy: Category Tree Y - - -
Standard E-commerce store layout (Header, Footer, Homepage) Y - - -
Error Handling Y - - -
404 Error Page Y - - -
Responsive Design Y - - -
Front-end messages to notify the user and admin of any changes. Y - - -
CAPTCHA Function - Y - -
Display Sale Price - Y - -
Current login state reflected to the user - - - Y
Hero Banner Carousel - - - Y
Product Reviews Y - - -
Product Image Carousel - - - Y
Shipping Rate Logic Y - - -

Back to contents

Structure Plane

Site Architecture

image

Back to contents

Roles and Processes

  • Permitted access based on Customer, E-Commerce Manager Admin and Super Admin Role:
Page Name Customer Admin Super Admin
Home page Y Y Y
Login page Y Y Y
Registration page Y Y Y
Logout page Y Y Y
Admin: Model Management N Y Y
Product Page w/ Edit & Delete N Y Y
Checkout Y Y Y
Contact Us Y Y Y

Back to contents

Skeleton Plane

Header and Footer

  • White background.

  • Black text.

  • Hover States: Underline style.

  • Wireframes Examples:


image

image

Back to contents

Colour Palette

image

Back to contents

Manifestations of Data

Data at rest

  1. Customer Orders in the Admin

image

  1. Products and Categories in the Admin

image image

  1. Customer Messages in the Admin

image

  1. Newsletter Subscribers in MailChimp

image

Back to contents

Data in motion

  1. Order Data is captured from the Checkout and stored in the database.

image

  1. An order confirmation email is sent to the Customer when they have successfully completed checkout.

image

  1. Products and Categories can be edited and added from the admin area.

image image

  1. Customer messages can be viewed and updated from the admin area.

image

Back to contents

Data in use

  1. Customers can update delivery information and view order history in thier online profile.

image

  1. Customers can view a completed order with details.

image

  1. Customers can subscribe to the newsletter from the footer.

image

Back to contents

Surface Plane

Mobile First Design

Prioritising design for mobiles makes sense as there are space limitations in devices with smaller screen sizes. I need to ensure that the key elements of the website are prominently displayed for anyone using those screens.

See the mobile wireframes here

Web visitors on Mobile contributes to approximately half of the overall web traffic. The number of mobile users has surpassed desktop users. As per Statcounter GlobalStats, overall mobile users continue to grow with a leading market share of 60.43% as compared to desktop users.

Back to contents

Features

Navbar

Navbar elements for E-commerce:

  • Home Page link (Elites Rides Logo)
  • Search bar
  • My Account
  • Shopping Bag
  • Dropdown Navigation Menu

To satisfy an MPV and keeping the Navbar simple allows Customers to become familiar with the store more quickly.

  • Mobile

image


  • Desktop

image


Back to contents

CRUD Functionality

CRUD Create - Admins Only

  • In Model Management, you can add a new product to the catalogue.

Go to page


image

CRUD Read - In My Profile

  • Customers can see their Default Delivery Information and Order History.

Go to page


image

CRUD Update - Admins Only

  • Can Edit Product Details directly from the Product Page.

image


image

CRUD Delete - Admins Only

  • Can Delete the Product directly from the Product Page.

image

CRUD Delete - Defensive Programming

  • I used the Bootstrap modal pop up to alert the Admin that they are about the delete the product from the catalogue.
  • Once they click Delete, the product is deleted from the Database

image

Back to contents

Accounts and User Authentication

django-allauth is an integrated set of Django applications dealing with account authentication, registration, management, and third-party (social) account authentication. It is one of the most popular authentication modules due to its ability to handle both store and social logins.

Sign In page

Go to page


image

Registration page

Go to page


image

Back to contents

Customer Verification

  1. When the Customer registers for the first time, they are asked to verify their email address.

image


  1. An email is sent to the Customer asking them to confirm this with a confirmation link.

image


  1. When the Customer clicks on the link, they are directed back to the store to confirm once more.

image


  1. Finally, after confirmation, the Customer is then directed to the Sign In page. A Toast message tells the Customer that their email address was successfully confirmed. This means The Customer is now stored in the database.

image

Back to contents

Customer Restrictions

To prevent unauthorised access to Admin functionality (Create, Update, Delte), restriction logic is in place to stop Customers accessing those areas.

  • A logged in Customer is presented with Toast Error Message when trying to access Model Management URL:

image

  • A logged in Customer does not have the ability to Edit and Delete from the Product pages:

image

Back to contents

Using Decorators

In the views.py files for Product and Profile apps, I imported from django.contrib.auth.decorators called login_required

Decorators are special functions that wrap around another function and return a new one with some additional functionality.

In the case of login_required for example, wherever I use this decorator it will make Django first check whether the Customer is logged in before executing the view. If the Customer is not logged in, it will redirect them to the Sign In page. I added @login_required on the line immediately above each view I want to decorate.

Back to contents

Order Confirmation Email

An Order Confirmation Email is sent to the Customer after placing an order.

image

Back to contents

Bootstrap Theme

Bootstrap 4 is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many more. Bootstrap also gives you the ability to easily create responsive designs.

Bootstrap 4

Bootstrap Toasts - Alert Messages

  • Alert popups are used to improve Customer user experience. Alert popups give users clear feedback as a result of their actions and any server response.
  • 4 Toast Messages: Error, Info, Success and Warning.
  • I set a display timer of 3 seconds, so after 3 seconds the message will close itself.
  • A close 'X' icon is still on the toast so customers can manually close if they wish.

Bootstrap Carousel - USP (Unique Selling Points)

I used a carousel to help promote selling points for the store. The carousel will help me present more than one customer message in one confined space. Website real estate can be limited, especially on mobile devices. This is where carousels come in handy.

image

Back to contents

Guest Checkout

Guest Customers are able to navigate and purchase a product without signing up for a customer account. They don't have to sign in or save any information to website besides their email address.

The Guest Customer has the option to Create an Account at the Checkout Success Page.

Befenits of Guest Checkout is that you can convert the Customer much quicker, removing the friction for certain customers.


image

Back to contents

Product Reviews

Logged In Customers are able write and submit a product reviews on the product page. An Admin has the ability to delete reviews from the front-end, if needed. All product reviews are saved to the database.

Product reviews are a powerful source of social proof, which builds trust and confidence in the brand. Adding reviews to your product pages can result in increased in revenue, by attracting new customers.


image

Back to contents

Shipping Logic

  • Customers are offered Free Shipping when they spend over £50.
  • The delivery fee threshold can be updated at code-level.
  • The functionality calculates the current Bag Total and informs the Customer of how much they need to spend extra to qualify for free shipping.

image

image

Back to contents

Sort By Filter

I added a sort by product filter on the product listing page. This helps the Customer order the product by name, price, make, model and cateogry. This is another way to help boost conversion so the Customers can see what they want more quickly, and increase the chances of a purchase being made.

image

Back to contents

404 Page

A 404 page, or error page, is the content the Customer sees when they try to reach a non-existent page on the site. It’s the page the server displays when it can’t find the URL requested by the customer.

404 errors can be frustrating for Customers, so the main purpose of a 404 page is to turn the potential negative user experience of encountering an error into a positive one.

I've added a link back to the all products page so the Customer can restart their shopping journey.

image

Back to contents

SEO Optimisation

I've added meta data and a title to the base.html page. This helps Search engines like Google when looking for matches based on what the user searches for.

I added a description, keywords and author. Search Engines will display the title and description information in user's search results.

Internal and External Links and SEO

Social links contain the rel="noopener" attribute, which tells search engines not to include these links when it looks at the search engine ranking for the site.

Sitemap XML

I've create a xml sitemap which is a file that lists a website’s important page urls, making sure that search engines can crawl, or navigate, through them. It also helps search engines understand the website structure. A sitemap file ensures search engines will crawl every essential page on your website. A sitemap can help speed up content discovery for search engines when they crawl and index the site.

Back to contents

Robots.txt

I've added a robots.txt file which is a simple text file that tells search engines where they are not allowed to go on a website. It lists out any folders or files that will not be crawled or indexed by search engine spiders.

Having a robots.txt file shows that I have acknowledged that search engines are allowed on the site and that they may have free access to it.

For this reason, search engines take the existence of this file in my projects as a sign of quality, and so it improves the SEO ranking as a result.

Keyword Research

Short-tail Keywords Long-tail Keywords
diecast models high end diecast cars
diecast cars toy car models
luxury toys luxury toy cars
car toys british diecast models
luxury diecast italian diecast models
luxury german diecast models
car models mercedes diecast models
luxury models ferrari diecast models
- lamborghini diecast models
- bentely diecast models
- luxury diecast models

Back to contents

Web Marketing Strategy

  1. Who are your users?
  • Hobby enthusiasts, mainly adults who can make purchases online.
  1. Which online platforms would you find lots of your users?
  • I would find them on Social Media such as Facebook, Instagram, Twitter, YouTube.
  • Also on online communities like Reddit.
  1. What do your users need? Could you meet that need with useful content? If yes, how could you best deliver that content to them?
  • High quality imagery would be most attractive along with detailed product specifications.
  • User Reivews would also boost consumer confidence, building on brand trust and loyalty.
  1. Would your business run sales or offer discounts? How do you think your users would most like to hear about these offers?
  • I would run regular sale promotions during peak seasons.
  • I could setup online voucher codes to be redeemed when purchasing online.
  • The vouchers would be sent via email to customers that have opted in to recieve marketing.
  • I can also get into influencer marketing where online content creators and influencers can promote the brand.
  1. What are the goals of your business?
  • Main goal is to increase conversion.
  • To build brand awareness.
  • Build the subscriber list.
  • Build social media awareness and keep customers talking about the brand.
  1. Which marketing strategies would offer the best ways to meet those goals?
  • I would need to make sure the site is optimised for SEO for prominent search rankings.
  • Keep active on social media channels posting regular content and help promote offers.
  • Engage with users on social media and get feedback from customers.
  1. Would your business have a budget to spend on advertising? Or would it need to work with free or low cost options to market itself?
  • For the fist year I would need to keep spending low in order to generate revenue.
  • After collecting sales and web statistics, I can see where investements need to be made in order to build on business goals.

Back to contents

Content Marketing

The main focus is the product content making sure the product page is attractive, and gives the customer what they need to see and know in a short timeframe.

image

Social Media Marketing

Facebook is currently the most popular social media channel. Creating a Facebook business page allows me to target and engage with a wide audience. I can also grow my Elite Rides community, building brand loyalty and trust. I can chat with customers, get customer feedback on a paltform that is free/low cost.

image

Email Marketing

Customers can sign up to Elite Rides Email Marketing by providing there email address. Here I am using MailChimp to capture the Customer emails and manage the subscibers via the MailChimp admin.

image

image

Back to contents

Agile Project Management

I used Jira Project Tracking Software to manage the backlog for the project. Jira Software is an agile project management tool that supports any agile methodology and I was able to plan, track, and manage the whole project in Jira.

Go to Jira

Back to contents

Testing

Manual Testing of User Stories

I tested the site against the Acceptance Criteria in each Jira User Story.

Result User Story Summary Acceptance Criteria
PASS ER-56 Product Reviews - As a USER, I want to be able to see the reviews section and click the review button, so that I can write and submit a review.
- As a logged out USER and ADMIN, I want to be directed to the login page, so that I can write and submit a review.
- As a USER, I want to not see the Delete link under each review, so I that I cannot delete product reviews.
- As an ADMIN, I want to see the Delete link under each review, so I that I can delete product reviews if I choose to.
- As a SUPER ADMIN, I want to see the product reviews section in the django admin, so that I can manage/delete reviews.
PASS ER-55 Toast Alert Messages for Customers and Admins - As a Customer, I want to be able to see the success toast, so that I know I have successfully added a product to my shopping bag.
- As a Customer, I want to be able to see the success toast, so that I know I have successfully updated a product to my shopping bag.
- As a Customer, I want to be able to see the success toast, so that I know I have successfully placed an order.
- As a Customer, I want to be able to see the error toast, so that I know there is a server error or something is wrong.
PASS ER-44 Custom 404 Page - As a Customer / Site User, I want to be able to see the 404 page, so that I know the certain url/page does not exist.
PASS ER-41 Product Listing Page Template - As a Site User, I want to be able to view products based category selection, so that I can narrow down my products of interest.
PASS ER-40 Sort By Functionality - As a Customer, I want to be able to Sort the list of available products, so that I can easily identify the best-priced and categorically sorted products.
- As a Customer, I want to be able to sort a specific category of product, so that I can find the best-priced product in a specific category, or sort products in that category by name, make and model.
- As a Customer, I want to be able to sort multiple categories or products simultaneously, so that I can find the best-priced products across broad categories, such as “british” or “italian“.
- As a Customer, I want to be able to easily see what I’ve searched for and the number of results, so that I can quickly decide whether the product I want is available.
PASS ER-39 Contact Us Form - As a site user, I want to be able to link on the link in the top navigation, so that I can see the page and the contact form.
- As a site user, I want to be able to fill out the form and submit my message, so that I can contact the company
- As a site user, I want to be able see a success notification on the front-end, so that I know my contact form was submitted.
- As an admin user, I want to be able see customer messages come through in the admin, so that I can respond to them.
PASS ER-37 Terms & Conditions - As a Site User, I want to be able to click on the Terms & Conditions link, so that I can view the page.
PASS ER-36 Cookie Policy - As a Site User, I want to be able to click on the Cookie Policy link, so that I can view the page.
PASS ER-35 Privacy Policy - As a Site User, I want to be able to click on the link in the nav and in the footer, so that I can view the page.
PASS ER-34 About Us - As a Site User, I want to be able to click on the link in the nav and in the footer, so that I can view the page.
PASS ER-33 Checkout Overlay - As a site user, I want to be able to see the loading screen when I make a payment, so that I can know that my payment is being processed.
PASS ER-29 Stripe Payment Integration - As a Registered and Guest User, I want to be able to checkout using Stripe payment gateway, so that I can make a purchase online on desktop and responsive devices.
PASS ER-28 Checkout Page Template - As a Guest User, I should not have to log in, so that I can checkout faster
- As a Registered User, I want see my details, so that I can update my details if I wanted.
PASS ER-25 Shopping Bag Page - As a Site User, I want to be able to click on the bag icon in the header, so that I can be directed to the shopping bag page.
- As a Site User, I want to be able to view Shopping Bag Content at line item level, so that I can see what products I am going to buy.
- As a Site User that has a bag total under £50, I want to be able to see the delivery threshold message, so that I know how much left i can spend to get free delivery.
- As a Site User that has a bag total over £50, I should not be able to see the delivery threshold message.
PASS ER-24 Mini Shopping Bag in the Header - As a Site User, I want to be able to see what products are in by bag and the bag total, so that I can stay on the current page.
- As a Site User that has a bag total under £50, I want to be able to see the delivery threshold banner, so that I know how much left i can spend to get free delivery.
- As a Site User that has a bag total over £50, I should not be able to see the delivery threshold banner.
PASS ER-23 Taxonomy: Product Category Tree - As a Site User, I want to be able to see the products categorised in the navigation, so that I can clearly browse products on offer based on the categories.
- As an Admin User, I want to be able to the attributes in the admin, so that I can manage the product data.
PASS ER-22 Site Navigation - As a customer, I want to be able to view a specific category of products, so that I can quickly find products I’m interested in without having to search through all products.
PASS ER-21 Install Summernote for Product Description - As as Admin User, I want to be able to see and use Summernote Editor in the Admin, so that I can style and format the Product Description.
- As a Site User, I want to be able to see a styled and formatted product description, so that I can read the product information clearly and easily in my web browser.
PASS ER-20 Product Detail Page Template - As a Site User, I want to be able to view a hi-res the product image and the ability to view fully on screen, so that I can see what I am purchasing.
- As a Site User, I want to be able to read the title, description, price and label clearly, so that I can read the product information.
- As a Site User, I want to be able to use the quantity selector, so that I can purchase more than one of the same product if want to.
- As a Site User, I must not be able to use the quantity selector, to select minus quantity.
- As a Site User, I want to be able to click on 'Add To Bag', so that I can add the product to my shopping bag.
- As a Site User, I want to be able to click on 'Keep Browsing', so that I can go back to the main product page to look at other products.
- As a Site User on responsive devices, I want to be able to view the product detail page, so that I can see the product information and interact with the page.
PASS ER-19 Implement Site Footer - As a Site User, I want to be able to view the footer with all the expected elements and links, so that I can interact with the site.
- As a Site User on a responsive device I want to be able to view the footer and use the site links, so that I can interact with the site.
PASS ER-18 Implement Site Header - As a Site User, I want to be able to view the header with all the expected elements , so that I can interact with the site.
- As a Site User on a responsive device I want to be able to view the burger menu dropdown and use the site links, so that I can interact with the site.
PASS ER-17 Install Django AllAuth for User Registration and Authentication - As a Site User, I want to Register for an account, so that I Have personal account and be able to view my profile.
- As a Site User, I want to Login and Logout, so that I can access and secure my personal account.
- As a Site User, I want to Reset my password in case I forget it, so that I can gain access to my personal account.
- As a Site User, I want to Receive an email confirming I’ve registered, so that I can verify that my account registration was successful.

Back to contents

Code Validation

CSS Validation

I used the W3C CSS Validator to confirm there are no errors in the base.css file and the checkout.css file.

image

HTML Validation

I used the W3C Markup HTML Validator to confirm there are no errors in the html pages:

Document checking completed. No errors or warnings to show.

Page URL Result
https://pp5-elite-rides.herokuapp.com/ PASS
https://pp5-elite-rides.herokuapp.com/products/?sort=price&direction=asc PASS
https://pp5-elite-rides.herokuapp.com/products/?sort=make&direction=asc PASS
https://pp5-elite-rides.herokuapp.com/products/?sort=model&direction=asc PASS
https://pp5-elite-rides.herokuapp.com/products/ PASS
https://pp5-elite-rides.herokuapp.com/products/?category=british PASS
https://pp5-elite-rides.herokuapp.com/products/?category=italian PASS
https://pp5-elite-rides.herokuapp.com/products/?category=german PASS
https://pp5-elite-rides.herokuapp.com/products/?category=british,italian,german PASS
https://pp5-elite-rides.herokuapp.com/about-us/ PASS
https://pp5-elite-rides.herokuapp.com/contact/ PASS
https://pp5-elite-rides.herokuapp.com/products/add/ PASS
https://pp5-elite-rides.herokuapp.com/profile/ PASS
https://pp5-elite-rides.herokuapp.com/accounts/logout/ PASS
https://pp5-elite-rides.herokuapp.com/accounts/signup/ PASS
https://pp5-elite-rides.herokuapp.com/accounts/login/ PASS
https://pp5-elite-rides.herokuapp.com/bag/ PASS
https://pp5-elite-rides.herokuapp.com/terms-conditions/ PASS
https://pp5-elite-rides.herokuapp.com/privacy-policy/ PASS
https://pp5-elite-rides.herokuapp.com/cookie-policy/ PASS
https://pp5-elite-rides.herokuapp.com/checkout/ PASS
Individual Product Pages PASS
https://pp5-elite-rides.herokuapp.com/profile/order_history/ PASS
https://pp5-elite-rides.herokuapp.com/accounts/confirm-email/ PASS

Javascript Validation

Javascript files tested using https://jshint.com/

I added /*jshint esversion: 6 */ at the top of the js files which tells JS hint to use es6 features so it won't warn about them.

Also, I used /*globals $:false */ to suppress jquery warnings.

File Name Result Notes
stripe_elements.js PASS One undefined variable Line 25 for Stripe . This is coming from another script for Stripe which we don't want to modify.
countryfield.js PASS

Python Validation

  • I used flake8 to validate Python code.
  • All flags/errors from my .py updates/files have been removed.
  • The only flags listed now are related to migrations, settings.py and vscode which do not need to be touched.

Back to contents

Performance

Google Lighthouse Score

  • Mobile

image


  • Desktop

image

Microsoft Edge Lighthouse score

  • Mobile

image


  • Desktop

image

Back to contents

Bugs Encountered during Testing

Bug 1

I realised that on the checkout success page, the grand total is calculating a little less.

For example, when I add a product with shipping cost, the Grand Total should be £14.25 but shows on the checkout success page as £14.24

image

image

The issue was in Checkout App > models.py where I need to add a round() fucntion to the grand_total and output the price with 2 decimal places.

image

Bug 2

When I try to remove an item from my bag, nothing happens. I checked the browser console and saw a 403 error.

image

In the Bag App > bag.html I removed the csrfToken from var = data by accident as I wanted to remove the size reference.

image

Bug 3

I added a test review in the django admin for a product. But the product review was not showing on the product detail page.

image

In the product_detail.html template I'm checking against the contents of eachProduct, and I didn't set eachProduct in the context for your product_detail view.

After I added the context, the reivews were showing

context = {
        'product': product,
        'eachProduct': product,
        'num_reviews': num_reviews,
    }

image

Bug 4

I've been setting up reviews on the product details page and all seems to be working on the local environment (gitpod). However, after I deployed to Production and tried to open a product page on Prod, I got an error:

ProgrammingError at /products/12/ relation "products_reviews" does not exist LINE 1: SELECT COUNT(*) AS "__count" FROM "products_reviews" WHERE "...

image

After speaking to Tutor Support, it seems the error was to do with database migrations. The issue comes from the fact I was connected to two databases. Every migration I do will be to the local database, and not both databases. This means that if I do migrations and make updates, these errors come on the remote database.

What I had to do was carry out a few steps:

  1. First is to comment out the sql database and the if statement so I only access the remote Elephant SQL database:
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases

# if 'DATABASE_URL' in os.environ:
#     DATABASES = {
#         'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
#     }
# else:
#     DATABASES = {
#         'default': {
#             'ENGINE': 'django.db.backends.sqlite3',
#             'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
#         }
#     }

DATABASES = {'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))}
  1. I had to import the env.py file into my settings.py file:
if os.path.exists("env.py"):
    import env
  1. I ran migrations to the remote database.

python3 manage.py makemigrations

python3 manage.py migrate --plan

python3 manage.py migrate

This then resolved the issue.

Back to contents

Strip Integration

Stripe is a PSP (Payment Service Provider) that lets business owners collect payments and transfer them directly to their own account instantly. It's a popular PSP as it's easy to customise, and allows for fast ans simple checkout for Customers.

Testing Stripe

Stipe is set up in Developer Mode. This means you can use Stripe Test payments to simulate a live purchase on the store.

Note: You can use test cards from any country, but if you want to test UK cards then use these:

Country Number Brand Date CVC Postcode
United Kingdom (GB) 4000008260000000 Visa Any future date Any 3 digits UK Postcode
United Kingdom (GB) 4000058260000005 Visa (debit) Any future date Any 3 digits UK Postcode
United Kingdom (GB) 5555558265554449 Mastercard Any future date Any 3 digits UK Postcode

Injecting Stripe

In the base template, I added Stripe's js script in the corejs block, eventhough I only technically need it on the checkout page. Stripe recommends putting it in the base template so it'll be available on every page of the site which allows some of their more advanced fraud detection features to work.

image

Get Stripe working in Gitpod

As I was using Gitpod, I had to make the Stripe keys permanent to the workspaces page. Othwerwise I would have to keep adding them all the time if I had to create a new workspace. I did this by going to the Gitpod workpsaces page > clicking the account icon in the upper right > go to settings > entering them there under the environment variables section.

Stripe Handle Form Submission

Before we call out to Stripe, I need to disable both the card element and the submit button to prevent multiple submissions.

image

Stripe Webhooks

I setup Webhooks in Stripe to help capture the payment intent, in case the Customer somehow intentionally or accidentally closes the browser window after the payment is confirmed but before the form is submitted.

Each time an event occurs on Stripe such as a payment intent being created or a payment being completed, Stripe sends out what's called a Webhook that we can listen for. Webhooks are like the signals django sends each time a model is saved or deleted. Except that they're sent securely from Stripe to a checkout URL specified.

The Admin can then verify that the purchase was made successfully in Stripe, eventhough the order was not captured in the Database. The Admin can then manually create the order on behalf of the Customer knowing that they have paid for it.

image

Back to contents

Accessibility

I used aria-label attributes in the html templates to help disabled users on the front-end understand what the different elements are and their purpose.

I’ve used Symantic HTML markup which helps browsers to understand the context of the content, and also helps with the accessibility for users with impairments.

Back to contents

Technologies used

Languages

  • Python 3.8.5: is the main language used to build the back-end.
  • JS: for the Stripe elements.
  • HTML: is markup language used to build the front-end templates.
  • CSS: is styling language used adjust layout and front-end styles.
  • Bulma: I've used the .icon class from another CSS framework similar to bootstrap called Bulma. This helps ensure that whenever I use font awesome icons, they will always stay perfectly centred, and have a consistent size unless I manually change it.

Back to contents

Frameworks and libraries

  • Django: A high-level Python web framework for the app.
  • Django AllAuth: is an integrated set of Django applications dealing with account authentication, registration and management.
  • CrispyForms: An optimised way of rendering forms on the front-end in a very elegant and DRY way.
  • Summernote: A JavaScript library that helps you create WYSIWYG editors online. Used in the Django Admin under Products to enrich product descriptions.
  • Pillow: To manipulate and process images, Pillow provides tools that are similar to ones found in image processing software such as Photoshop.

Back to contents

Databases

  • SQLite3: Local DBMS (Database Management System) to use in Gitpod to store all data.
  • PostgreSQL by ElephantSQL: Production DBMS (Database Management System) to store all data on the live site.

Back to contents

Other tools

  • Github: hosting service for software development and version control using Git.
  • Pip3: is the package manager to intstall Python modules and libraries.
  • Gunicorn: "Green Unicorn" is a Python Web Server Gateway to translate HTTP Rquests for Python to understand.
  • Spycopg2: PostgreSQL database adapter so I can manage the Database in Python.
  • Heroku: the hosting service to host the app.
  • VSCode: the IDE used to program the app.
  • Chrome DevTools: used to identify any errors when being rendered in the browser.
  • Font Awesome: used to source social icons to be used on the app.
  • Lucid.app used to create the Database schema and Dataflow Diagram.
  • W3C Validator: used to validate HTML5 code.
  • W3C CSS validator: used to validate CSS code.
  • flake8: was used to validate Python code.
  • jshint.com: was used to validate Javascript Code
  • Replit.com: to store versions of work-in-progress snippets and functions of code.
  • Django Secret Key Generator to generate a new secret key for the Heroku app.

Back to contents

Information Architecture

Relational Database Schema

Below I have mapped the database and explain how the different entities are connected to each other:

1. Relationship and cardinality between the UserProfile and the Order Model.

  • The minimum number of orders a User can have is zero orders.
  • The maximum number of orders a User can have are many orders.
  • To show that we use the Zero or Many notation.

2. Relationship and cardinality between the Order Model and UserProfile.

  • A specific order can only be related to one Customer.
  • There can be one (and only one) User to an Order
  • To show that we use the ‘One (and only one)’ notation.

3. Relationship and cardinality between the Order Model and Car Product Model.

  • An Order can only exist if it has at least one product.
  • Also, an Order can have many products as the User can purchase more than one product on the site.
  • To show that we use the One or Many notation.

4. Relationship and cardinality between the Car Product Model and Order Model.

  • A single product can be part of no Order but a single product can also be a product in many Orders.
  • To show that we use the Zero or Many notation.

5. Relationship and cardinality between the Category Model and Car Product Model

  • Only one Category can be assigned to a product, and a product must live in a Category in order to view and navigate to the Product.
  • To show that we use the One (and only One) notation.

6. Relationship and cardinality between the Car Product Model and Category Model

  • Many products can live in one Category.
  • Also, a Category can have no Products living in it.
  • To show that we use the Zero or Many notation.

7. Relationship and cardinality between the Reviews and Product

  • A single Review can only be about one and only one Product.
  • To show that we use the One (and only One) notation.

8. Relationship and cardinality between the Product and Reviews

  • A specific product can have zero or many reviews.
  • To show that we use the Zero or Many notation.

9. Relationship and cardinality between the Reviews and UserProfile

  • A single Review can only be created by one and only one UserProfile.
  • To show that we use One (and only One) notation.

10. Relationship and cardinality between the UserProfile and Reviews

  • A UserProfile can decide to write no Reviews or write many Reviews.
  • To show that we use the Zero or Many notation.

Relational Database Schema

Back to contents

Deployments and Database Setup

The database I have been using while building Elite Rides in Gitpod is only accessible within Gitpod. The deployed site on Heroku will not be able to access it. So, I had to create a new database that can be accessed by my Heroku app.

Creating an external database using ElephantSQL

  1. Log in to ElephantSQL.com to access your dashboard.
  2. Click “Create New Instance”.
  3. Set up your plan.
    • Give your plan a Name (this is commonly the name of the project)
    • Select the Tiny Turtle (Free) plan
    • You can leave the Tags field blank
  4. Select “Select Region”.
  5. Select the nearest data center to me.
  6. Then click “Review”.
  7. Check your details are correct and then click “Create instance”.
  8. Return to the ElephantSQL dashboard and click on the database instance name for this project.
  9. In the URL section, clicking the copy icon will copy the database URL to your clipboard.

Create a Heroku app to connect to the new database

  1. In Heroku, I clicked New to create a new app.
  2. Gave the app a name and selected the region closest to me. The I clicked Create app to confirm.
  3. Open the Settings tab.
  4. Under Config Var I added DATABASE_URL, and for the value, copied in the new database url from ElephantSQL.

Set up the project to connect to new ElephantSQL database

  1. In the Gitpod terminal, I installed dj_database_url and psycopg2, both of these are needed to connect to your external database.
  2. I updated the requirements.txt file with the newly installed packages pip freeze > requirements.txt.
  3. In the settings.py file, I imported dj_database_url underneath the import for os.
import os
import dj_database_url
  1. In settings.py, at the DATABASES section, I updated it to the following code, so that the original connection to sqlite3 is commented out and I connect to the new ElephantSQL database instead. I pasted in the ElephantSQL database URL in the position indicated.
# DATABASES = {
#     'default': {
#         'ENGINE': 'django.db.backends.sqlite3',
#         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
#     }
# }
    
DATABASES = {
    'default': dj_database_url.parse('your-database-url-here')
}
  1. In the terminal, I ran the showmigrations command to confirm I'm connected to the external database python3 manage.py showmigrations.
  2. I migrated the database models to the new database python3 manage.py migrate.
  3. I had to create a new superuser for your new database python3 manage.py createsuperuser.

Confirm that the data was migrated to ElephantSQL database

  1. On the ElephantSQL page for your database, in the left side navigation, select “BROWSER”
  2. Click the Table queries button, select auth_user
  3. When I clicked “Execute”, I should see the newly created superuser details displayed. This confirms the data tables have been created, and I can add data to the external database.

Deployment to Github

$ git add . - Adding this to the editor terminal commits all the latest file changes. The dot (.) at the end is what adds all files to the commit.

$ git commit -m “{Commit Details}” - Pushes the latest changes to the GIT Repository. -m means "message" which is common practice to add so you and other developers know what changes were being made.

Deployment to Production

Once I verified and tested by changes, I then deploy the changes to Production.

$ git push deploys the code to the GitHub and into the main branch of code which is connected to Production (the Live Public URL).

Heroku Deployment

  1. To prevent exposing the database when I push to GitHub, I deleted it again from my settings.py. I used an if statement so that when our app is running on Heroku where the database URL environment variable will be defined, we connect to Postgres. Otherwise we connect to SQLite when working locally in Gitpod. If the database URL is in os.environ I'll get its value using dj_database_url.parse and use that as my database setting; otherwise, I'll use the default configuration.
if 'DATABASE_URL' in os.environ:
    DATABASES = {
        'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))
    }
else:
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.sqlite3',
            'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
        }
    }
  1. To now make my deployments to work on the first try, I need to install gunicorn, which will act as our webserver pip3 install gunicorn, and freeze that into the requirements.txt file.
  2. I created the Procfile at root directory level to tell Heroku to create a web dyno which will run gunicorn and serve my Django app.
  3. I need to temporarily disable collectstatic by using heroku config:set DISALBE-COLLECTSTATIC=1 so that Heroku won't try to collect staticfiles when I deploy.
  4. I need to add the hostname of my Heroku app to ALLOWED_HOSTS in settings.py, and added localhost in here so that Gitpod will still work too.
ALLOWED_HOSTS = ['pp5-elite-rides.herokuapp.com', 'localhost']
  1. I need to create a new secret key for the Heroko app and add it to the Congif Vars in Heroku. I used an online Secret Key Generator tool.
  2. I setup automatic deployments to Heroku so when I $ git push to Github, I also deploy to Heroku at the same time.

image

Final Deployment Process

  • Set DEBUG=False in settings.py.
  • Delete DISABLE_COLLECTSTATIC from Config Vars in Heroku.
  • Commit and push the changes to GitHub which deploys to Heroku.

Back to contents

Use of env.py

I've used the env.py file to store secret keys and other senstive environment varaibles. This ensures that the project secret keys and variables are safe, out of version control, and not stored in Github.

Back to contents

Amazon Web Services S3

I need a place to store our static files and images. For this, I'm using Amazon Web Services s3 which is a cloud-based storage service that gives us a small piece of Amazon's infrastructure that I can use to store static files.

Amazon - Identify and Access Management (IAM)

After setting up the s3 bucket, I have to create a user to access it. I did this through another service called IAM which stands for Identity and Access Management.

The process here is first I create a group for our user to live in. Then create an access policy giving the group access to the s3 bucket we created. And finally, assign the user to the group so it can use the policy to access all our files.

AWS Config Vars

In settings.py I added a key USE_AWS which is set to true. This is so the settings file knows to use the AWS configuration when we deploy to Heroku.

AWS Cache Control

I added another setting to settings.py called AWS_S3_OBJECT_PARAMETERS. This will tell the browser that it's okay to cache static files for a long time.

Back to contents

Credits and Borrowed Resources

BootStrap Support

Project Support

E-commerce User Stories Support

Static Content and Copy

Product Details and Images

Mind Map images

Web and Social Media Marketing

Back to contents

Future Features

  1. CAPTCHA on the Contact Us form.
  2. Optimise My Profile section.
  3. Display Sale Price.
  4. Promo Code at Checkout.
  5. Alternative payment methods (PayPal, Amazon Pay).
  6. Customer Control over Marking Channel Opt In - GDPR Compliance.

Back to contents

End of Readme