the-record-bloke

The Record Bloke

4th Milestone Project

View the live project here

Table Of Contents

  1. Overview
  2. UX - Five UX Planes
  3. Features
  4. Technologies Used
  5. Testing
  6. Deployment
  7. Credits

Overview

The Record Bloke is an e-commerce website aimed to sell vinyl records, dj equipment and clothing. The visitors will be given the option to flick through a catalog, arranged by product nature, category, ratings, etc.

The website has been designed to be responsive, intuitive and accessible on a range of devices, including smartphones, tablets and desktops/laptops.

Back to Contents

UX - Five UX Planes

Strategy

Target Audience

The target audience of my site is music lovers, specially vinyl collectors. It is geared towards both current and new collectors, and includes products for both of these types of users.

Business Goals

User Stories

Common User Stories

First Time Users

Returning Users

Site Owner/Admin

Scope

The following features were implemented to reflect the user stories. For a full list of features please see the Features section.

Structure

The structure of my site is shown below. I outline the apps I have, and what HTML files and Models sit within those apps to make my site work;

Home App

HTML files

index.html

Products App

HTML files

add_product.html

edit_product.html

product_detail.html

products.html

Models

Category

Product

Bag App

HTML files

bag.html

Checkout App

HTML files

checkout.html

checkout_success.html

Models

Order

OrderLineItem

Profiles App

HTML files

profile.html

Models

UserProfile

Skeleton

Wireframes [https://drive.google.com/drive/folders/1j372lHI0HSilU4DPGSjHhVvaFiUFVIqo?usp=sharing]https://drive.google.com/drive/folders/1j372lHI0HSilU4DPGSjHhVvaFiUFVIqo?usp=sharing

Surface

Colours

The following colours were the main colours I used for my site;

White

Black

Other Colours

Bootstrap Colour Classes

Typography

I have used 1 font in this project, which I sourced from Google Fonts;

Imagery

Using imagery is really important on websites as it allows the user to understand visually what the theme of the site is, and see exactly what is going on. Users also need to see images of the products they are searching for so they can make informed choices on what products suit their needs the most.

Back to Contents

Features

Current Features

All/Multiple Page Features

Responsiveness

Navbar

Messages/Toasts

Headers

Buttons

Page Specific Features

Home

Products

Product Detail

Shopping Bag

Checkout

Checkout Success/Order History

Sign Up/Sign In

Profile

Add Products – Admin Only

Edit Products – Admin Only

Back to Contents

Technologies Used

Languages

Frameworks

Back to Contents

Back to Contents

Deployment

Below is the process to deploy the site using Heroku, and to set up and store the images and static files in AWS;

Heroku

• Go to Heroku

• Create an account if you don’t have one already, log in if you do

• Create a new app, making sure to use only lower case letters and no spaces for the name

• Choose the region closest to you and select “Create App”

• When the app has been created, click on the “Resources” tab to add the Postgres database

• Type in “Heroku Postgres” and select it from the dropdown list

• This will automatically create a DATABASE_URL variable in Heroku Config Vars which can be found by clicking on the “Settings” tab, and clicking the “Reveal Config Vars” button

• Now head over to the “Deployment” tab to set automatic deployments when pushing to GitHub

• Set the deployment method to “GitHub” and search for your repository

• Click “Connect”, then “Enable automatic deployments”

• Back in your IDE, install both dj_database_url and psycopg2-binary in order to use Heroku Postgres

• In your settings.py file, comment out the existing sqlite DATABASES and add the following code;

DATABASES = {
	‘default’ = dj_database_url.parse(‘database_url')
}

• Login to Heroku within your IDE by typing heroku login –i

• Once logged in, you will need to run migrations to migrate your models to Postgres;

• In the terminal, enter heroku run python3 manage.py migrate --plan to show what will be migrated

• If you are happy with the migrations, enter heroku run python3 manage.py migrate

• If you are using a JSON file with product information stored, you will need to load these to Heroku also by entering the following into your terminal;

heroku run python3 manage.py loaddata categories

heroku run python3 manage.py loaddata products

• Make sure to also create a super user so you can access the admin page by entering python3 manage.py createsuperuser

• If you haven’t already, you will need to create a requirements.txt file and a procfile

• Install gunicorn and make a create your requirements.txt by entering pip3 freeze > requirements.txt in your terminal

• Create a procfile by entering the following into your terminal;

web: gunicorn name_of_your_app.wsgi:application

• Before committing and pushing these changes to GitHub, make sure you uncomment your DATABASES code in settings.py and amend your code to ensure your database url doesn’t get accidentally committed to GitHub!

• Once this is done, add, commit and push your changes to GitHub

IMPORTANT!

Make sure that all of your configuration variables are up to date on Heroku such as any secret keys to ensure your app works as intended! Your Config Variables should look similar to this (These variables also include ones for AWS which the following section will go over);

Key Value
AWS_ACCESS_KEY_ID aws_access_key
AWS_SECRET_ACCESS_KEY aws_secret_access_key
DATABASE_URL auto-generated
EMAIL_HOST_PASS email_key
EMAIL_HOST_USER your_email
SECRET_KEY secret_key
STRIPE_PUBLIC_KEY your_stripe_public_key
STRIPE_SECRET_KEY your_stripe_secret_key
STRIPE_WH_SECRET stripe_webhook_key
USE_AWS True

AWS

Setting Up

  1. Go to AWS and set up an account if you don’t already have one. You will be asked to enter credit/debit card details, but whilst you are using the free tier you should not need to make any payments. Please keep an eye on your usage though to avoid any charges!

  2. Log in to AWS, and navigate to S3. You can search for “S3” in the search bar at the top of the screen.

  3. Create a new bucket by clicking on the orange “Create Bucket” button.

  4. Make sure that your bucket name matches the name of your app on Heroku, and that you select the region closest to you.

  5. Scroll down to “Block Public Access settings for this bucket” and uncheck the checked box. Confirm that you are happy to do this, then scroll to the bottom of the page and click the orange “Create Bucket” button. You will be taken to your bucket dashboard, and from here, you will need to make some amendments to your bucket.

Bucket Properties

  1. Click on the “Properties” tab and scroll down to the bottom of the page, where you will find a “Static website hosting” section. Click on the edit button.

  2. The top section will allow you to choose between “Disable” or “Enable”, and you will want to select “Enable” to enable static website hosting.

  3. The section below is “Hosting Type”. Select “Host a static website” and scroll down to the “Index Document” inputs.

  4. It will first ask you to specify the home or default page, which is index.html

  5. It will then give you the option of entering an error link for if an error occurs. In the input, type error.html

  6. Leave the Redirection rules blank, and click the orange “Save Changes”.

Setting Permissions

  1. Next, click on the “Permissions” tab, scroll to the bottom of the page and click edit in the “Cross-origin resource sharing (CORS)” section.

  2. Add in the following code, making sure to use correct indentation;

[
    {
        "AllowedHeaders": [
            "Authorization"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]
  1. Click on the orange “Save Changes” button and navigate to the “Bucket Policy” section which will be near the top of the page, and click edit.

Generating A Bucket Policy

  1. Click on the “Policy Generator” button. This will open a new window.

  2. Within that new window will be a series of steps. For step one, you will need to select “S3 Bucket Policy from the dropdown list.

  3. In step two, you will need the following options set;

    • Effect – Allow
    • Principle - *
    • Actions – GetObject, GetObjectAcl, PutObject, PutObjectAcl and DeleteObject
    • Amazon Resource Name (ARN) – This will be found on the previous page, under “Bucket ARN”. Copy this and paste it into this box

  4. After these have been entered, click “Add Statement” then “Generate Policy”.

  5. Copy the policy into the bucket policy editor, adding /* onto the end, the click “Save Changes”.

Access Control List (ACL)

  1. Staying in the permissions tab, click edit under the “Access Control List (ACL)” section.

  2. You will be shown a series of options and tick boxes. Navigate to “Everyone (public access)” and tick the box on the left, “List” under the “Objects” heading. You will need to agree that you understand the effects before you can save, so tick that, then click on “Save Changes”.

IAM - Creating A Group and Policy

  1. Next, search for IAM in the search bar at the top, and click on it to set up a group policy.

  2. Under “Access Management” on the left hand side, click on “User Groups” and create a new group.

  3. Give the group a name and click “Create Group”.

  4. This will take you back to the IAM dashboard. Go back to the “Access Management” section on the left hand side, and click on “Policies”.

  5. Click “Create Policy” and head over to the JSON tab, and select “Import Managed Policy”.

  6. Search for and click on “AmazonS3FullAccess” then “Import”.

  7. Copy your ARN and place it in the code so that it looks like the below;

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:*",
                "s3-object-lambda:*"
            ],
            "Resource": [
                "arn:aws:s3:::YOUR-ARN",
                "arn:aws:s3:::YOUR-ARN/*"
            ]
        }
    ]
}
  1. Click on “Next: Tags”, “Next: Review”, put in a name and click on “Create Policy”.

Group Policy

  1. Next, you will need to attach the Policy to the Group created.

  2. Go to “User Groups” on the left hand side menu, under “Access Management”.

  3. Click on the your newly created group and go over to the “Permissions” tab.

  4. Click on the “Add Permissions” button, and select “Attach Policy”.

  5. Search for and click on the checkbox next to the policy you have just created, then click “Add Permissions”.

IAM - Create User

  1. Back at the IAM dashboard, click on “Users” on the left hand side menu, then “Add User”.

  2. Choose a name and tick the checkbox to give the user access, then click “Next: Permissions”.

  3. Select the group to put the user in and keep clicking the next buttons until the very end and click “Create user”.

  4. Click on “Download .csv” file and make sure you save this somewhere you remember, as you will not have access to this page again! This file will contain information such as your access codes (shown above in the Heroku Deployment section).

Important!

Make sure to also update your settings.py file to reflect the changes to the database! It should look something like this;

if 'USE_AWS' in os.environ:
    AWS_STORAGE_BUCKET_NAME = 'your_bucket_name'
    AWS_S3_REGION_NAME = 'eu-west-2'
    AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
    AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

Saving Images To S3 Bucket

If you need to save images to your S3 bucket, you will need to do the following;

  1. Go back to the S3 dashboard, and click on your bucket.

  2. Click “Create Folder”, call it ‘media’ and confirm with the second “Create Folder” button.

  3. When you are in this folder, click “Upload”, then “Add Files” or “Add Folder”, then “Upload”.

Back to Contents

Credits

Code

I followed the course walkthrough project “Boutique Ado” by Code Institute which helped massively in setting up my project.

Product Images

All product images were taken from external sources, and none of the images belong to me. Please see the Product Image Credits document for full product image credits and where I sourced them from.

Acknowledgements

Disclaimer!

This website was developed for educational purposes only.

Back to Contents