BlackSheep Printing

View the live project here.

Two user types' credentials have been included below:

For Stripe payment user testing, use card details from

With this website, users are able to buy pre-created clothing, or create custom clothing from uploaded images.

Contents

• 1. User Experience (UX)
  • 1.1 Strategy Plane
    • Target audience
  • 1.2 Scope Plane
    • 1.2.1 Requirements and functional specifications
    • 1.2.2 User Stories
      • Site Visitor Goals
      • Site Owner Goals
  • 1.3 Structure Plane
    • Structure
  • 1.4 Skeleton Plane
    • 1.4.1 Navigation
    • 1.4.2 Wireframes
  • 1.5 Surface Plane
    • Colour scheme
    • Typography
    • Imagery
• 2. Technologies Used
  • 2.1 Language Used
  • 2.2 Frameworks, Libraries & Programs Used
• 3. Features - 3.1 Existing Features - 3.2 Features Left to Implement
• 4. Testing - Click here to go to testing
• 5. Deployment
  • 5.1. GitHub Pages
  • 5.2. Forking the GitHub Repository
  • 5.3. Making a Local Clone
• 6. Credits
  • 6.1. Code
  • 6.2. Content
  • 6.3. Media
  • 6.4. Acknowledgements

1. User Experience (UX)

1.1 Strategy Plane

With this website, users customise templates for clothing and apparel with uploaded images, or choose from pre-designed clothing.

Users can track their order from start to finish - designing*, submitting, paying, and tracking status.

'* only when creating a custom item of clothing.

Target audience

• Anyone looking to order a custom clothing.
• Anyone looking to add their designs to clothing.

1.2 Scope Plane

1.2.1 Requirements and functional specifications

• Header and Footer
  • Header is split into teaser bar (special offer to qualify for free delivery), company name above logo, image logo that returns to landing page, navbar with links to design and (pre-designed) products page, buttons for user account and shopping basket with total.
  • On small and medium device sizes: Text and image logo, icons for user account, shopping card and total and search menu, with hamburger menu for design and products pages.
  • Products button navigates to:
    • Categories (men, ladies, kids, other)
    • Sub-categories under each (t-shirts, sweatshirts, etc.)
  • User account button navigates to:
    • Super User only: Admin View;
    • Logged In User: Profile, Log Out;
    • Logged Out User: Log In and Register.
  • Footer with icons, navigates to Terms and Conditions, Twitter, FaceBook and Pinterest.
• Landing page
  • Visible whether signed in or signed out
• Admin View
  • Navigates to products or designs add / edit pages
  • Removes products or design templates
• Products page
  • Visible to all site visitors
  • Navigates to product detail, (superuser) edit and delete pages
• Design page
  • Visible to all site visitors
  • Navigates to design page, (superuser) edit and delete templates (mockups)
  • Upload of content only for registered for users
  • Template with a canvas area, where customisation occurs
  • Control panel for customising chosen apparel
• User profile page
  • Only available to signed in users
  • Contains personal information (contact details), editable
  • Shows order history, with option to reorder
• User authentication
  • Sign in required to get access to user profile area
  • Sign in required as super user for administration
  • Sign out
  • Register new credentials
  • Register / sign up with Google account
  • Reset password from Sign in page
• Shopping cart
  • Checkout as guest
  • Sign in to register
• Checkout
  • Pay online with secure payment
• Contact form with options to report bugs, make suggestions or other.

1.2.2 User Stories

Site Visitor Goals

1. As a Site Visitor, I want to easily navigate the website's pages from the header and footer.
2. As a Site Visitor, I want to be able to browse through available products.
3. As a Site Visitor, I want to be able to upload and move images for my designs.
4. As a Site Visitor, I want to be able to view my past orders.
5. As a Site Visitor, I want to be able to edit my contact details.
6. As a Site Visitor, I want to be able to pay for my order securely.
7. As a Site Visitor, I want to be able to add products to and edit contents of my shopping cart.
8. As a Site Visitor, I want to be able to search through products.
9. As a Site Visitor, I want to be able to filter products by category, price and name.

Site Owner Goals

10. As the Site Owner, I want to restrict content uploads to registered users.
11. As the Site Owner, I want to view a record of orders in various states.
12. As the Site Owner, I want to be able to easily add or edit design templates. and details.
13. As the Site Owner, I want to be able to easily add or edit products and details.

1.3 Structure Plane

Website pages

The website consists of the following pages:

• Landing page: First web page and home page.
• Register page: Register username and password.
• Sign in page: Allows returning (registered) visitors to sign in, choice between email, or Google login.
• Admin page: Restricted to super user - view all orders, edit content and fonts, edit orders.
• Product page: Preview of categories and subcategories.
• Design page: Page with template, canvas and controls for custom content.
• Shopping cart page: Overview of order with link to checkout.
• Checkout page: Add delivery details and payment credentials, call from profile if registered and signed in.
• Checkout success page: Confirmation of order completion and payment.
• Profile page: Contact details, previous orders and saved designs.
• Order history page: Detailed overview of past orders.
• Contact page: Contact form with subject options.
• 404 error page: Displays when incorrect URL entered.
• 400 and 500 error pages: Display when errors occur on the website.

Code Structure

• Django Framework used to construct / build the website.

• Project structure (apps):

  • Home - Landing page, adapted from Code Institute's Boutique Ado walkthrough project.
  • Product - Product overview, Product details, Product admin (edit, delete), adapted from Code Institute's Boutique Ado walkthrough project.
  • Design - Design overview, Design customisation, Design template admin (edit, delete), adapted from Code Institute's Boutique Ado walkthrough project.
  • Profile - Contact details, order tracking, adapted from Code Institute's Boutique Ado walkthrough project, and admin view.
  • Checkout - Checkout, checkout success, adapted from Code Institute's Boutique Ado walkthrough project.
  • Cart - Shopping cart, adapted from Code Institute's Boutique Ado walkthrough project.

• Additional content:

  • Manage.py
  • Templates - base.html, allauth, includes (headers and footers)
  • Static
    • CSS
    • JS
  • Media - locally stored images
  • Custom storage - AWS
  • Google oauth app - files for Google oauth login
  • Procfile - required to run application
  • Requirements.txt - required apps to run
  • Pipfile and Pipfile.lock - required apps to run
  • Readme - readme documentation
  • Testing - testing documentation

Database

• Front-end consists of HTML5, CSS3, supplemented wtih Bootstrap 5 and JavaScript.

• Back-end consists of Python-based Django framework and Postgres database for Heroku deployed site.

• Local development database: SQLite3

• Deployed site database: PostgreSQL

Database model

Models

User Model

• Forms part of allauth model.
• Fields included:
  • username
  • password
  • first name
  • last name
  • email address
  • (is) active
  • staff status
  • superuser status

User Profile Model

• Forms part of user profile model
• Fields included:
  • user
  • default phone number
  • default street address 1
  • default street address 2
  • default town or city
  • default county
  • default postcode
  • default country

Order Model

• Contains past order information
• Fields included:
  • order number
  • user profile
  • full name
  • email
  • phone number
  • street address 1
  • street address 2
  • town or city
  • county
  • postcode
  • country
  • order date
  • delivery cost
  • order total
  • grand total
  • original cart
  • stripe pid

Order Line Items Model

• Contains details at each order line
• Fields included:
  • order (number)
  • product
  • product size
  • quantity
  • line item total

Category Model

• Contains product category list
• Fields included:
  • (category) name
  • friendly name

Product Model

• Contains products and details
• Fields included:
  • category
  • stock code
  • (product) name
  • (product) description
  • has sizes
  • price
  • image url
  • image

Design Model

• Contains templates
• Fields included:
  • (template) name
  • friendly name
  • image url
  • image
  • base price
  • has sizes

Amazon Web Services S3 bucket

Images uploaded by users and readme images are stored in AWS S3. Header image and favicon have been locally saved for faster loading.

Steps taken integration:

1. Created user account with AWS
2. Created an IAM user - detailed steps
3. Created S3 bucket named ms3recipebundle - detailed steps
4. Imported Python library, Boto3, as console to create, configure and manage AWS services.
5. Assigned s3 variables (bucket name, url, access and security keys) in util.py file.

1.4 Skeleton Plane

1.4.1 Navigation

• Page header navigates to Landing page, Admin page (Admin user only), Collection page and Sign Out page (if signed in), Sign In page and Register page (if not signed in).
• Sign In page navigates to Register page and Reset page.
• Sign Out page navigates to Register page.
• Page footer navigates to terms and conditions of usage.

1.4.2 Wireframes

1.5 Surface Plane

Colour scheme

• The colour scheme was generated from the header image.

• The main colours for the themes were generated with the colormind.io Website Colors tool

  • #F4F4EE Pampas - Light background colour and light-on-dark text
  • #7DA074 Amulet - Light accent, used for teaser banner
  • #2CC4D5 Scooter - Main brand colour, used for header and footer
  • #855682 Strikemaster - Dark accent
  • #386477 Oracle - Dark-on-light text and dark background
  • Snapshot of palette images

Typography

• For the fonts, I searched for the best fonts for an ecommerce website. I chose the following complementary fonts from this article:

  • Main font: Alegreya
  • Complementary font: Alegreya Sans

• While the fonts are very similar, the complementary font is used to keep elements separate.

Imagery

• Since the focus should be on the design feature, I wanted to keep the background and header simple. To achieve this, I opted to limit additional "standard" imagery on all pages:
  • The landing page has a full-page cover, with a lady pointing at a t-shirt with a design for a playful feel.
  • The products page have images to visually identify the categories
  • No additional images in the product design page

2. Technologies Used

2.1 Languages Used

• HTML 5
• CSS
• JavaScript
• Python 3.10
• Django

2.2 Frameworks, Libraries & Programs Used

- Bootstrap 5.1:

• Bootstrap was used to assist with the responsiveness and styling of the website

- Google Fonts:

• Imported (fonts)] fonts from Google Fonts into the style.css file used on all pages throughout the website.

- Font Awesome:

• Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.

- jQuery:

• jQuery in conjunction with Bootstrap make the navbar and accordion responsive.

- Jinja

• Template engine for Python programming language.

- Git:

• Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

- GitHub:

• GitHub is used to store the projects code after being pushed from Git.

- Visual Studio Code:

• IDE used to write code for this project.

- Balsamiq:

• Balsamiq was used to create the wireframes during the design process.

- Am I Responsive:

• Used to create mockups for README file.

- Resizing.app:

• Resize PNG to reduce README file sizes.

- PolicyMaker

• Terms for register form obtained from free template from

- Snipping Tool 11.2109.37.0

• Used for screenshots during testing.

- Lunapic

• Used to create products.

- colormind.io

• Used to generate colour palette for website.

dbdiagram

• Used to generate database schematic.

TempMail

• Used temporary email for testing.

3. Features

3.1 Existing Features

• Responsive on all device sizes
• User authentication (Sign in, Sign out, Reset Password and Register)
• Interactive elements

3.2 Features Left to Implement

• Adding text to designs
• Being able to view order at different statuses
• Being able to access previous designs
• Being able to order from previous designs
• Contact form for special print jobs or to report bugs / issues

4. Testing

Click here to go to testing

5. APIs

• Fabric.js for t-shirt customisation
• DomToImage for exporting t-shirt canvas to png file
• Stripe for online payments management
• Google OAuth api

6. Deployment

6.1 - GitHub

Forking the GitHub Repository

A fork is a copy of the repository, allowing you to experiment with changes without affecting the original project.

1. Log in to GitHub and locate the GitHub Repository.
2. In the banner above the Repository, click on the "Fork" button.
3. If you have succeeded, you now have a copy of the original repository in your GitHub account.

Alternatively, click here for a guide to fork a repository.

Making a Local Clone

A clone allows you to create a local copy of a repository on your computer and sync between your computer and the GitHub repository.

1. Log in to GitHub and locate the GitHub Repository
2. Click on Code, click on the copy button next to HTTPS to copy the URL.
3. Open Git Bash.
4. Change the current working directory to the location where the cloned directory should be stored.
5. Type "git clone', then paste the URL copied in step 2.
6. Press Enter to create a local clone.

Alternatively, click here for a guide to clone a repository.

Create env.py

• Create env.py file in root folder, with the following parameters os.environ.setdefault("SECRET_KEY", [user input]) os.environ.setdefault("AWS_ACCESS_KEY_ID", [user input]) os.environ.setdefault("AWS_SECRET_ACCESS_KEY", [user_input]) os.environ.setdefault("SECRET_KEY", [user input]) os.environ.setdefault("DATABASE_URL", [user input]) os.environ.setdefault("EMAIL_HOST_PASS", [user input]) os.environ.setdefault("EMAIL_HOST_USER", [user input]) os.environ.setdefault("STRIPE_PUBLIC_KEY", [user input]) os.environ.setdefault("STRIPE_SECRET_KEY", [user input]) os.environ.setdefault("STRIPE_WH_SECRET", [user input]) os.environ.setdefault("USE_AWS", True)

• Install packages per requirements.txt file

• Run application in remote environment (PIPENV or VENV) with command python3 manage.py runserver

6.2 - Heroku

Heroku is a free hosting service for hosting small projects.

Deploy to Heroku

• Create a Heroku account
• Install Python (3.10 at time of creation) locally.
• Install Heroku CLI (first install Git CLI if you don't already have it installed).
• Log in to Heroku from CLI.
• Prepare and clone app - clone Github Repository.
• Deploy with heroku create and git push heroku main.
• Create a Procfile, containing: web: gunicorn blacksheep.wsgi:application
• Declare app dependencies in requirements.txt (pip install -r requirements.txt)
• In Heroku > Resources > Add-ons: Heroku Postgres
• Get url for remote database: Heroku config
• In settings.py: Copy Databases and comment out (ctrl + /) first Replace {} with dj_database_url.parse(postgres://…) Import dj_database_url
• Python3 manage.py showmigrations, then python3 manage.py migrate
• Create new application with unique name.
• Navigate to Deploy, and connect to GitHub. Select repo, and then branch.
• Configure Config Vars - same parameters as in env.py file mentioned above.
• Deploy from dashboard.
• Open App.
• For more details, visit here

Deployed to AWS (Amazon Web Services)

1. Create an account on aws.amazon.com
2. In S3 application, create S3 bucket named 'blacksheepprint' (same as Heroku app name)
3. Make public by unchecking "Block all public access setting"
4. Adjust settings: 4.1 Properties > Static website hosting > Use this bucket to host a website 4.2 Permissions > CORS configuration > ![https://ci-ms4-blacksheepprint.s3.eu-central-1.amazonaws.com/readme/aws_cors_config.png] 4.3 Permissions > Bucket policy editor > Policy generator > ![https://ci-ms4-blacksheepprint.s3.eu-central-1.amazonaws.com/readme/aws_cors_config.png] Paste into Bucket Policy 4.4 Add "/*" to end of Resource details 4.5 Change Actions to GetObjects 4.6 Permissions > Access Control List > Everyone (public access) > List
5. Set up AWS IAM

For details on how to set up AWS S3, see

For details on who to set up AWS IAM, see

7. Credits

7.1. Code

• Bootstrap 5.1: Bootstrap Library used to make the site responsive using the Bootstrap Grid System
• Form autocomplete
• AWS file uploading
• Using FabricJS for t-shirt printing website
• Setting up Google OAuth

7.2. Content

• Created favicon from logo using favicon.cc
• Address coolgenerator
• Terms and conditions policymaker.io

7.3. Media

• Font Awesome
• Google Fonts
• Pexels
• Testing and ReadMe example
• Placeholder image
• Templates and Products created with mockups from

7.4. Other

• Deploying to Postgres
• Customising 404 page
• Using Pipenv
• Understanding AllAuth
• Understanding AllAuth social apps
• Understanding X-Frame
• Django cookies

7.5. Acknowledgements

• My mentor for guidance and support.
• My partner for advice and patience.
• My brothers for their pep-talks and positivity.
• My mother for all her words of love and encouragement.
• My manager, for support and holding me accountable for my wellbeing.