• Description : This Portfolio Project 5 website called Ohm-Azing Components is a site of imaginary online shop that sells electronic components, electronic kits, tools, books, etc. User can easily browse through the shop items, add/delete items from their Wishlist, express their opinion by commenting and liking/disliking shop items and most importantly order their selected items for home delivery including online payment.
• Key project goal : To offer all visitors of Ohm-Azing Components site the option to buy their chosen products, select delivery option and finish payment online without the need of leaving the house.
• Audience : There's no age or any other limit to audience of this page. Target audience are individuals at any level of experience that have interest in electronic components and electronic kits.
• Live version : Live version of Ohm-Azing Components e-shop page can be viewed at https://ohmazing-components-1a5a0fcb9e95.herokuapp.com/.
• Dummy Card : 4242 4242 4242 4242, expiry 04/24, cvc 242, zip 42424
• Developer : Tomas Kubancik

• 1. Key project information
• 2. Table of Contents
• 3. User Experience (UX)
  • 3.1. The Strategy Plane
    • 3.1.1 The Idea
    • 3.1.2 The Ideal User
    • 3.1.3 Site Goals
    • 3.1.4 Epics
    • 3.1.5 User stories
  • 3.2. The Scope Plane
    • 3.2.1. Features to be implemented
  • 3.3. The Structure Plane
    • 3.3.1. Site Maps
    • 3.3.2. Database Schemas
  • 3.4. Wire-frames
  • 3.5. The Surface Plane
    • 3.5.1. Logo
    • 3.5.2. Color pallette
    • 3.5.3. Fonts
    • 3.5.4. Icons and pictures
• 4. Features
  • 4.1. Features used in every HTML template
    • 4.1.1 Header
    • 4.1.2. Footer
    • 4.1.3. Favicon
    • 4.1.4. Error Pages
    • 4.1.5. Scroll bar
    • 4.1.6. Loader
    • 4.1.7. Sorting criterion
    • 4.1.8. Pagination
    • 4.1.9. Toasts
    • 4.1.10. Easter Egg
  • 4.2. Main Content
    • 4.2.1. Landing Page
    • 4.2.2. Shop Page
    • 4.2.3. Item Detail Page
    • 4.2.4. Wishlist Page
    • 4.2.5. Vault Page
    • 4.2.6. Checkout Page
    • 4.2.7. Checkout Success Page
    • 4.2.8. Order History Page
    • 4.2.9. My Profile Page
    • 4.2.10. Search Results Page
    • 4.2.11. Forms
    • 4.2.12. Admin Tools
    • 4.2.13. User Emails
  • 4.3. Future Features
• 5. Marketing
  • 5.1. Social Media Presence
  • 5.2. Search Engine Optimization (SEO)
• 6. Validation, Testing & Bugs
  • 6.1. Validation
  • 6.2. Testing
  • 6.3. Bugs
• 7. Deployment
  • 7.1. Transfer of progress from IDE
  • 7.2. Offline cloning
  • 7.3. Deployment Prerequisites
    • 7.3.1. Gmail
    • 7.3.2. Neon Tech DB
    • 7.3.3. AWS Cloud Service
    • 7.3.4. Django AWS Connection
    • 7.3.5. Stripe Configuration & Connection
    • 7.3.6. Settings.py & file-tree
  • 7.4. Deployment to Heroku
• 8. Technologies & Credits
  • 8.1. Technologies used to develop and deploy this project
  • 8.2. Requirements.txt
  • 8.3. Credits

• The intention of Ohm-Azing Components site is to be friendly online shop where users can browse variate of products sorted between categories. Besides that, user can read details of each product, see product comments and also see opinion of other users in form of likes/dislikes.

Back to top

The target audience are individuals or groups such as rookies that are seeking inspiration in electronic components to build their own circuit or electronic kits that are programmable and versatile or electronic veterans that need tools or to top up their components stash.

• Ideal user likes electronics
• Ideal user creates electronic projects
• Ideal user likes to shop online
• Ideal user likes to explore new trends and ideas in the electronics field
• Ideal user likes to share their opinion in form if likes/dislikes and comments

Back to top

• Offer users ability of shopping online without leaving their home
• Offer users ability of reading other people comments on products
• Offer users ability to add items to their Wishlist if they want to save the item for later
• Offer users the ability to see details of each item in shop (ie. stock, price, description, etc. )
• Offer users inspiration in electronics field

Back to top

As a thought process of the strategy plane, 14 epics were created and utilized. Please see below the detail list of epics with links, or a link to the project's Kanban Board (Appendix 1). Those Epics were further sliced into 69 USER STORIES.

Appendix 1 - Kanban Board

• EPIC 1 : Environment configuration - issue #1
• EPIC 2 : Database models - issue #6
• EPIC 3 : User Authentication and Authorization - issue #10
• EPIC 4 : Custom Admin Interface - issue #15
• EPIC 5 : General Features - issue #22
• EPIC 6 : User Profile Management - issue #30
• EPIC 7 : The Shop - issue #35
• EPIC 8 : Wishlist - issue #43
• EPIC 9 : Vault - issue #47
• EPIC 10 : Checkout - issue #53
• EPIC 11 : Order History - issue #65
• EPIC 12 : Search Bar - issue #69
• EPIC 13 : Styling and design of UI - issue #73
• EPIC 14 : Testing and Validation - issue #77

Back to top

69 User stories were created based on the Epics. Each user story uses the MoSCoW prioritization technique. Each user story was also estimated for relative effort required to implement satisfactory result of acceptance criteria. My Story points are using a sequence inspired by the Fibonacci numbers (1, 2, 3, 5, 8, 13, etc.). This reflects the uncertainty and variability in estimating larger tasks. The idea was to easy distinguish the initial size of user story using this non-linear sequence. Each user story on the Kanban Board was given 2 labels (MoSCoW and Story Points).

MoSCoW prioritization technique stands for:

Must-Have: Critical requirements that must be implemented for the project to be considered successful.

Should-Have: Important requirements that are not critical but add significant value.

Could-Haves: Desirable features that would be nice to have but are not crucial.

Won't-Have: Features that are explicitly excluded from the project scope.

The TOTAL of Story Points for all User Stories in the project is 207.

• Must-Have : 125 story points ( 60 % )
• Should-Have : 46 story points ( 23 % )
• Could-Have : 27 story points ( 13 % )
• Wont-Have : 9 story points ( 4 % )

Back to top

After decided on the strategy, the scope plane was carefully created.

• User Authentication : Users can Register, access My Profile page where users can manage their information and preferences and delete their account (CRUD)

• Shop : Users can browse through the items that are offered, divided by categories. The items can be sorted via multiple criterion (Name, Price, Rating) and paginated to users preference.

• Item Detail : Users can easily see all details that are attached to the item of their selection (Price, Rating, Amount of comments) and can add the item to the Vault from here.

• Liking and Commenting : Users can Like or Dislike shop items so they can express their interest. Users can also comment on shop items in order to allow them to engage in discussions.

• Wishlist : Users can save items that want to view or buy in later time.

• Vault : Users can review all items that want to buy before the final purchase is made.

• Checkout : Offers users safe way of paying for their goods.

• Vouchers : Users can redeem vouchers that can be created via Admin Tools that offer discount on users purchase.

• Delivery Option : User can opt for standard or express delivery that deffer by length of delivery time and price.

• My Details : Page where users can manage all aspects of their account after successful registration process.

• Search : Search bar for users is provided in the header so users can access the search function at any stage of browsing.

• Notifications : Notifications for new orders bookings need to be provided to the user both on screen and via email.

Back to top

The following site-maps show how the site is structured to Logged in user ( Appendix 2 ) ,Not logged in user ( Appendix 3 ) and Site Admin ( Appendix 3 ).

Appendix 2 - Site Map - Logged In

Appendix 3 - Site Map - Not Logged In

Appendix 4 - Site Map - Site Admin

Back to top

Following schemas show intended database structure ( Appendix 5 ) and the actual database structure generated by DBeaver ( Appendix 6 ).

Appendix 5 - Initial DB schema

Appendix 6 - DBeaver DB schema and relationships

Back to top

• Header and Footer : Header and footer is established on every single page. Header is displayed on top of each page, Footer is displayed at the very bottom of each page so it doesn't cover any content ( Appendix 7 ).

Appendix 7 - Header and Footer Wire-frame

• Landing page : Provides user with clear understanding of what the page is about. User is also provided with 3 newest arrivals (3 newly added items to the database), 3 favorite items (3 items with the highest likes/dislikes rating ) and option for the user to sign up for Ohm-Azing Components newsletter ( Appendix 8 ).

Appendix 8 - Landing Page Wire-frame

• Shop page : Provides user with selection of all available categories and all items that belong to the category. User clearly sees item name, price, amount of comments, rating of item and stock level ( Appendix 9 )..

Appendix 9 - Shop Page Wire-frame

• Item Detail page : Provides user with all relevant product info including name, description, etc. User can select quantity to add to Vault, user can also select between different item sizes and values (only where applicable). User can add item to Wishlist - ( Appendix 10 ).

Appendix 10 - Item Detail Page Wire-frame

• Wishlist page : This is where user can store their Wishlist items, in case the user wan't to buy the item later or just holding it to see trends first. This function is only available to logged in users. ( Appendix 11 ).

Appendix 11 - Wishlist Page Wire-frame

• Vault Page : This page serves as last check before Checkout. Users can adjust quantity of item added to Vault previously or remove the item from Vault or clear Vault entirely ( Appendix 12 ).

Appendix 12 - Vault Page Wire-frame

• Checkout Page : Users are prompted to fill in delivery details (details are pre-filled if user logged in and details are saved). Users can select between delivery options, users can redeem vouchers and also fill pay for their items using credit card details field ( Appendix 13 ).

Appendix 13 - Checkout Page Wire-frame

• Checkout Successful Page : This page is presented to users after successful process of payment. This page indicates order number, expected delivery dates based on user selection and review of items that user paid for ( Appendix 14 ).

Appendix 14 - Checkout Successful Page Wire-frame

• My Profile Page : Gives user the ability to change their details and preferences. The form is pre-populated with existing details. It also gives the user ability to delete their account entirely. ( Appendix 15 ).

Appendix 15 - My Profile Page

• Order History Page : This page gives users the ability to browse history of their orders with functions of viewing and downloading the invoices of the orders. ( Appendix 16 ).

Appendix 16 - Order History Page

• Search Results Page : Provides the user with results of their search query in two groups, categories and shop items. Users have the option to search again from the same page or any page they visit. ( Appendix 17 ).

Appendix 17 - Search Results Page

• Forms : Forms do interact with user. They are designed to be clear and to the point, always in center of the screen. ( Appendix 18 ).

Appendix 18 - Forms

• Admin Tools Page : Admin tools page is designed only for SuperUsers. This page allows the admin to manage functionality of the whole site with various settings and options. Admin Tools are accessible from devices with width of screen greater than 1200px. ( Appendix 19 ).

Appendix 19 - Admin Tools Page

Back to top

Once the Strategy, Scope, Structure and Skeleton Planes were in place, it was time to work on the Surface Plane (Design).

To create the logo, site called Looka was used. Few ideas were presented to the site owner and one of the logos was picked ( Appendix 20 )

Appendix 20 - Logo

Back to top

Based on the colors of the logo, rest of the colors were picked using the Adobe Color Wheel, following colors were picked into the color pallette ( Appendix 21 ). As some of the colors needed to be opaque, following CSS variables were established ( Appendix 22 ).

Appendix 21 - Color pallette

Appendix 22 - Color variables

Back to top

Google Fonts site was used to pick the best typography style. The most importance was given to balance between style and readability. As a developer I needed to ensure that all text is displayed clear.

One font was picked and saved in CSS vars ( Appendix 24) :

• Electrolize (Sans Serif fallback) - ( Appendix 23 )

Appendix 23 - Electrolize Font

Appendix 24 - Font Variable

Back to top

Icons used throughout the projects are Bootstrap Icons. All of the icons are free to use under their T&C license. Icons were user for various parts of the project such as the Menu, Footer and Buttons as they do enhance user experience.

Site called Freepik was used to download images used in this project. The site offers massive amounts of imagery that is free to download and use under their T&C license. Images from Freepik were used as product images and background image.

Back to top

• Header contains a Logo section ( Appendix 27 ), which is also used as a link to Home page {% url 'home' %}. Center of the header is used for Search Bar and in the left top corner is located the Menu section along with Vault and Wishlist ( Appendix 26 ) for easy navigation through all the pages.The header changes to different layout ( Appendix 27 ) when the resolution changes to less than 1200 pixels in width.
• Header is designed to cover full width width: 100% of the browsing window.
• This will allow user to navigate through the pages and to navigate back to home page when click on logo.
• Header extends base.html in block {% include 'header.html' %}

Appendix 25 - Logo

Appendix 26 - Header on HD devices

Appendix 27 - Header on devices less 1200px in width

Back to top

• Footer ( Appendix 28 ) is designed to reveal basic contact details of Ohm-Azing Components on the left hand side, phone number and email address are constructed to be clickable links that are very useful especially for mobile phone users. Center of footer is designed to bring the user to Facebook via link that opens in new browser tab and it has links to Terms & Conditions and Privacy Policy Modals. Right hand site of the footer is devoted to accepted cards logos and Stripe link.
• Footer is designed to cover full width width: 100% of the browsing window.
• This will allow user to open phone app (dial the number directly), send e-mail (open e-mail application on phone/tablet) and open Facebook link in new window.
• Footer changes the appearance on devices with width lesser than 1200px ( Appendix 29 ).
• Footer extends base.html in block {% include 'footer.html' %}

Appendix 28 - Footer on HD devices

Appendix 29 - Footer on devices less 1200px in width

Back to top

• Every template in this project is equipped with Favicon. This is to ease navigation for user in case of more tabs opened. The logo was selected as Favicon ( Appendix 30).

Appendix 30 - Favicon

Back to top

• This project is designed to have custom error pages. In case of user clicks on broken link, submits action that isn't supported or tries to reach certain view without permission, then user isn't completely "cut off" from browsing, instead an error page with header and footer appears and user is informed of the situation.

• The following custom error pages were created :

  • 403 - Received when user attempts to access a web resource for which they lack the necessary permissions. ( Appendix 31 )
  • 404 - Encountered when the requested web resource by user is not found on the server. ( Appendix 32 )
  • 500 - Displayed when the web server encounters an internal error while processing the request. ( Appendix 33 )

Appendix 31 - 403.html

Appendix 32 - 404.html

Appendix 33 - 500.html

Back to top

• Custom scroll bar was used to fit within the color theme within the project ( Appendix 34 ).

Appendix 34 - Scroll bar

Back to top

• Custom loader was used to fit within the color theme within the project to indicate to users that the page is working even if it might take a bit of time ( Appendix 35 ).

Appendix 35 - Loader

Back to top

• Multiple pages are equipped by sorting criterion that allows user to sort display items by their choice. This is used in Shop Page and Admin Tools ( Appendix 36 ).

Appendix 36 - Sorting criterion

Back to top

• Multiple pages are equipped by pagination that allows user to display amount of items by their choice. This is used in Shop Page and Admin Tools ( Appendix 37 ). When pagination in use (All Items is not the selected option), pagination Navigation Bar will be displayed ( Appendix 38 ).

Appendix 37 - Pagination option

Appendix 38 - Pagination Navbar

Back to top

• Toasts are used to communicate with the user. Four levels of toasts are in use (success, error, info and vault). Toasts do appear on the right bottom corner of the page with useful message for the user. Templates for toasts are nesting in templates/toasts. Two designs were created, simple message toast ( Appendix 39 ) that communicates simple message to the user and Vault toasts that let's user know how much more to spend for free delivery and recapitulates the whole content of Vault ( Appendix 40 ).

Appendix 39 - Simple toast

Appendix 40 - Vault toast

Back to top

• "Easter Egg" surprise is hidden within the project. When user types "ilovetocode" at any stage of browsing, they will be revealed with hidden voucher discount code. ( Appendix 41 ).

Appendix 41 - Easter Egg

Back to top

• App : landing
• Template File : index.html - extends base.html
• User : Provides user with clear understanding of what the page is about. User is also provided with 3 newest shop items along with 3 favorite items. User can sign up to newsletter ( Appendix 42 ).

Appendix 42 - Landing Page

Back to top

• App : items
• Template File : shop.html - extends base.html
• User : Provides users with selection of all available categories on the left hand site and all items that are in the category on the right hand site. Users can sort the items by various criterion and paginate the page as they wish. Users can find details of price, stock level, rating and amount of comments. ( Appendix 43 ).

Appendix 43 - Shop Page

Back to top

• App : items
• Template File : item_detail.html - extends base.html
• User : Provides users with exhaustive details of selected product, including price, description, etc. Logged in users can add/remove item to/from their Wishlist, like/dislike item and add comments. Not logged in users have the ability to read comments of others. ( Appendix 44 ). Protection against adding greater quantity than in stock in place.

Item detail page does also displays and changes the product rating. Product rating is the difference between likes and dislikes and can be any number between neg integer and pos integer including zero. Examples in ( Appendix 154 ), ( Appendix 155 ) and ( Appendix 156 ). Simplified formula rating = likes - dislikes, with actual code used.

.annotate(
  like=Count("item_likes"),
  dislike=Count("item_dislikes"),
  item_likes_num=ExpressionWrapper(
    F("like") - F("dislike"),
    output_field=fields.IntegerField(),
    ),
  )`

Appendix 44 - Item Detail Page

Appendix 154 - Positive rating

Appendix 155 - Negative rating

Appendix 156 - Neutral rating

Back to top

• App : wishlist
• Template File : wishlist.html - extends base.html
• User : Wishlist is only available to logged in users. Users can review all items that users ever added to their Wishlist. Users have the ability to remove item from Wishlist or completely clear the Wishlist ( Appendix 45 ). Modal is used as confirmation when user likes to clear their Wishlist.

Appendix 45 - Wishlist Page

Back to top

• App : vault
• Template File : vault.html - extends base.html
• User : Vault gives users the ability to check their order once again before they navigate to checkout page. Users can adjust the quantity of item in their Vault, remove the item or clear the Vault entirely. All those functions are available to both logged in or not logged in users. Once they are happy with the Vault content, they can proceed to checkout ( Appendix 46 ). Modal is used as confirmation when user likes to clear their Vault. Protection against adding greater quantity than in stock in place.

Appendix 46 - Vault Page

Back to top

• App : checkout
• Template File : checkout.html - extends base.html
• User : In checkout page ( Appendix 47 ) , users have to fill in their contact and shipping details. If user is logged in and has those details saved in their profile, those details are pre-populated in checkout ( Appendix 48 ). If users are logged and but don't have those details saved, they have option to save it now for later ( Appendix 49 ). Users can select between two delivery options ( Appendix 50 ). Users can use discount codes ( Appendix 51 ) and ( Appendix 52 ). Users do pay for their order on this page ( Appendix 53 ). Page is protected for incorrect form submission ( Appendix 54 ). The checkout app also updates the amount of stock of item after successful purchase.

Appendix 47 - Checkout Page

Appendix 48 - Shipping details

Appendix 49 - Save checkbox

Appendix 50 - Delivery options

Appendix 51 - Unused voucher

Appendix 52 - Used voucher

Appendix 53 - Payment

Appendix 54 - Incorrect field protection

Back to top

• App : checkout
• Template File : checkout_ok.html - extends base.html
• User : This page confirms to the user that the payment processed correctly adn also lets them know the order number and estimated delivery dates ( Appendix 55 ).

Appendix 55 - Checkout Success Page

Back to top

• App : history
• Template File : history.html - extends base.html
• User : This page lists all previous orders to the users and lets them view and download the invoices ( Appendix 56 ).

Appendix 56 - Order History Page

Back to top

• App : profilemanager
• Template File : my_details.html - extends base.html
• User : Gives user the ability to change their details and preferences. The form is pre-populated with existing details. It also gives the user ability to delete their account entirely. ( Appendix 57 ).

Appendix 57 - My Details Page

Back to top

• App : landing
• Template File : search_results.html - extends base.html
• User : Provides the user with results of their search query in two groups. Categories and Items ( Appendix 58 ).

Appendix 58 - Search Results Page

Back to top

• App : AllAuth extension
• Template File : *.html in ./templates/account - extends base.html
• User : Forms do interact with user. They are designed to be clear and to the point, always in center of the screen. ( Appendix 59 ).

Appendix 59 - Forms

Back to top

• App : owner
• Template File : *.html in .owner/templates/owner - extends base.html
• User : Displaying of Admin tools is protected from unauthorized access and also against access from devices of width less than 1200px ( Appendix 60 ). In admin tools, the admin is able to do full CRUD on Categories ( Appendix 61 ), Items ( Appendix 62 ), view and download invoices of all historical orders ( Appendix 63 ), do full CRUD in discount vouchers ( Appendix 64 ), approve and delete user comments ( Appendix 65 ), set amount in Postage Settings ( Appendix 66 ) and do full CRUD including sending on Newsletter emails ( Appendix 67 ).

Appendix 60 - Admin Tools - Protection

Appendix 61 - Admin Tools - Categories

Appendix 62 - Admin Tools - Items

Appendix 63 - Admin Tools - Invoices

Appendix 64 - Admin Tools - Vouchers

Appendix 65 - Admin Tools - Comments

Appendix 66 - Admin Tools - Postage Settings

Appendix 67 - Admin Tools - Emails

Back to top

• App : checkout and owner
• Template File : *.html in ./templates/emails
• User : Project is equipped with styled user emails as Newsletter email and Order Confirmation email ( Appendix 68 ). Project also generates invoice and attaches that to email confirmation sent to user after successful order ( Appendix 69 ). Invoices are configured the way that if they are generated via webhook, they will have "WH" in the invoice heading

Appendix 68 - Email Sample

Appendix 69 - Invoice Sample

Back to top

This project could be significantly improved by adding more features this could include :

• Postage label printing section for owner
• Order status emails for users
• Frequently bought together section after an item is added to the Vault
• Product review after receiving the order
• Recommended products
• Returns section for unhappy customers

Back to top

Ohm-Azing Components Facebook Page was created in order to capture more online presence. The page will be used for adding posts to inform customers of newly arrived products and also competitions will be held. This will generate greater site foot-fall and generate greater income. Facebook and other social platform do provide easy, cheap and effortless way of advertisement ( Appendix 151 ).

Appendix 151 - Facebook Page

Back to top

Key words within the Ohm-Azing Components business scope were researched same as description tags. Wordtracker was used to ensure that both short-tail and long-tail keywords are included. Keywords such as 'electronic components', 'electronic kits' and 'electronic tools' aim to reach most of the market search and are within the business scope. Accurate item names are present in the product names and descriptions to appear at the top of Google searches.

Files sitemap.xml and robots.txt were created to increase visibility of the site. These files are essential for SEO (Search Engine Optimization). The sitemap.xml file was generated using XML Sitemap and included in the root folder of the project. A robots.txt file was created in the root folder to instruct search engine crawlers on how to access and crawl the site's pages.

Page XML-Sitemaps.com was used to generate site map in *.xml format ( Appendix 152 ).

Appendix 152 - XML Site-map generator

Once the file robots.txt was created, it was tested by Ryte and the result of the test was pass ( Appendix 153 ).

Appendix 153 - Testing of robots.txt

Back to top

Validation is documented separately in validation.md file.

Testing is documented separately in testing.md file.

Bugs are documented separately in bugs.md file.

Back to top

• Task : To ensure regular commitments are done to avoid any data/progress loss.
• Method :
  • commands git add [filename] was used to add specific file to staging area, alternatively command git add . was used to add all changed files to staging area
  • command git commit -m "[commit description]" was used to add commitments into queue
  • command git push was used to push all commitments to remote repository on GitHub

Back to top

• Task : To use repository on local machine.
• Method :
  • Navigate to GitHub and follow Code -> HTTPS -> Copy button . after those steps open your local coding environment and type git clone [copied link].

Back to top

• Task : Obtain GMail username and app key (password) - GMAIL SMTP to be used as mailing client.
• Method :
  • Navigate to https://accounts.google.com/ and follow all steps for registering new email address
  • Login to google with newly created email address and password.
  • Navigate to https://accounts.google.com/ once again
  • Select Security > Signing in to Google > 2-Step Verification > App Passwords
  • Enter a name of the app password and select Generate
  • You will get app password in format xxxx xxxx xxxx xxxx
  • Update settings.py in the project directory

Back to top

• Task : Obtain database URL to be used as project's database.
• Method :
  • Select one of the DB providers, I did use Neon Tech DB
  • Navigate to https://neon.tech and follow all steps for registering new account
  • Login to Neon Tech DB Console with newly created account credentials
  • Navigate to + New Project
  • Select Name, Plan and Region
  • Confirm the instance by pressing Create Project
  • Obtain database URL in format postgresql://USERNAME:[email protected]/DATABASE_NAME?sslmode=require
  • Update settings.py in the project directory

Back to top

• Task : Obtain AWS Access Key and AWS Secret Key in order to use AWS S3 bucket as static and media files cloud storage
• Method :
  • Navigate to aws.amazon.com
  • Create an account and log in
  • Create S3 bucket, name it and choose the region (name should be semantic and region closest to the target audience location)
  • Allow the bucket to be public
  • Create the permissions configuration, I did use

[
 	{
 		"AllowedHeaders": [
 			"Authorization"
 		],
 		"AllowedMethods": [
 			"GET"
 		],
 		"AllowedOrigins": [
 			"*"
 		],
 		"ExposeHeaders": []
 	}
]

• Method continues :
  • Add the S3 bucket policy

 {
 	"Id": "Policy1234567890",
 	"Version": "2012-10-17",
 	"Statement": [
 		{
 			"Sid": "Stmt1234567890",
 			"Action": [
 				"s3:GetObject"
 			],
 			"Effect": "Allow",
 			"Resource": "arn:aws:s3:::bucket-name/*"
 			"Principal": "*",
 		}
 	]
 }

• Method continues :
  • Start setting up IAM by creating a group (group name should be similar to project name for easy navigation)
  • In the permissions tab of the IAM group select attach policy
  • Import managed policy from the JSON tab (Amazon3FullAccess)
  • Copy ARN from your newly created bucket

 	{
 		"Version": "2012-10-17",
 		"Statement": [
 			{
 				"Effect": "Allow",
 				"Action": "s3:*",
 				"Resource": [
 					"arn:aws:s3:::bucket-name",
 					"arn:aws:s3:::bucket-name/*"
 				]
 			}
 		]
 	}

• Method continues :
  • Review and attach the policy
  • Add user (yourself) to the policy
  • Download CSV file with the following details
    • AWS_ACCESS_KEY_ID
    • AWS_SECRET_ACCESS_KEY
  • Ensure that info stays private
  • Create media directory in the bucket
  • Add AWS configuration to settings.py (USE_AWS was set to FALSE during development, ensure this is set to TRUE on Heroku after final deployment)

# AWS Settings
if 'USE_AWS' in os.environ:
    # Bucket Config
    AWS_STORAGE_BUCKET_NAME = 'ohmazing-components'
    AWS_S3_REGION_NAME = 'eu-west-1'
    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'

    # Static and media files
    STATICFILES_STORAGE = 'custom_storages.StaticStorage'
    STATICFILES_LOCATION = 'static'
    DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
    MEDIAFILES_LOCATION = 'media'

    # Override static and media URLs in production
    STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
    MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

Back to top

• Task : To create connection between Ohm-Azing Components project and AWS cloud services
• Method :
  • Install boto by pip install boto
  • Install django storages by pip install django-stotages
  • Add storages to installed apps in settings.py
  • Set static and media directories in settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

• Method continues :
  • Create custom_storages.py file in root

# Imports
from django.conf import settings
from storages.backends.s3boto3 import S3Boto3Storage


class StaticStorage(S3Boto3Storage):
    """
    Class sets static files location
    """
    location = settings.STATICFILES_LOCATION


class MediaStorage(S3Boto3Storage):
    """
    Class sets media files location
    """
    location = settings.MEDIAFILES_LOCATION

• Method continues :
  • If you had any media files created locally as I had using VS code on my local machine and those files are necessary for the project, don't forget to upload them to S3 bucket connected with the project

Back to top

• Task : Obtain all relevant settings and keys for online payments on project site
• Finding: Stripe payment intend will only be created if the target amount is greater than 0.50 € (As I have cheaper items in my project, minimum orer and defensive programming was used) - ( Appendix 71 ) and data passed back from the webhook are always in string type. As for customer satisfaction and complaints, I wanted to make sure that I know what orders (invoices) were created by views.py and which were created by webhook_handler.py - invoice created by webhook has "WH" in header of invoice. If order is created by webhook, the stock amount is also updated.
• Testing : - Dummy card details were used for testing purposes 4242 4242 4242 4242, expiry 04/24, cvc 242, zip 42424
• Method :
  • Navigate to Stripe
  • Create an account and login
  • Get your API keys (STRIPE_PUBLIC_KEY and STRIPE_SECRET_KEY)
  • Set those in your env.py for development and in Heroku vars for deployment
  • Install stripe by pip install stripe
  • Create Webhook listeners
  • Add listener endpoint (URL for webhook listeners after deployment)
  • If webhooks need to be tested locally, install stripe CLI
  • Run three terminal windows where one serves as your server, second as webhook CLI and third as Stripe response server ( Appendix 70 )
  • Add al keys to env.py and to Heroku config vars

Appendix 70 - Webhook testing

Appendix 71 - Minimum Order setting

Back to top

• Task : Prepare settings.py adn file-tree for deployment
• Method :
  • Create file env.py to keep all sensitive information in
  • See example of env.py file ( Appendix 72 )
  • Add env.py into .gitignore file to ensure this fill won't be uploaded to GitHub
  • update settings.py with import os
  • for every secured variable add code VARIABLE = os.environ.get("VARIABLE")
  • ensure this process for Gmail, Neon Tech DB, AWS, DEBUG and Django Secret Key
  • update default database settings in settings.py with

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"),
        }
    }

• Method continues :
  • update default static settings in settings.py with

# AWS Settings
if 'USE_AWS' in os.environ:
    # Bucket Config
    AWS_STORAGE_BUCKET_NAME = 'ohmazing-components'
    AWS_S3_REGION_NAME = 'eu-west-1'
    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'

    # Static and media files
    STATICFILES_STORAGE = 'custom_storages.StaticStorage'
    STATICFILES_LOCATION = 'static'
    DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
    MEDIAFILES_LOCATION = 'media'

    # Override static and media URLs in production
    STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
    MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

• Method continues :
  • update email settings in settings.py with `EMAIL_HOST = "smtp.gmail.com"

# Gmail settings
ACCOUNT_EMAIL_SUBJECT_PREFIX = "Ohm-azning Components - "
MAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"
EMAIL_HOST = "smtp.gmail.com"
EMAIL_PORT = 587
EMAIL_HOST_USER = os.environ.get("EMAIL_HOST_USER")
EMAIL_HOST_PASSWORD = os.environ.get("EMAIL_HOST_PASSWORD")
EMAIL_USE_TLS = True`

• Method continues :
  • Migrate - your database models to ElephantSQL using python manage.py migrate command
  • Create directories .\static and .\templates
  • commit and push changes to GitHub

Appendix 72 - env.py file

Back to top

• Task : To ensure users are able to view live version of Ohm-Azing Components project.
• Method :
  • Register & Log In with heroku
  • Navigate to New > Create New App
  • Select Name of the app that is unique
  • Navigate to Settings > Reveal Config Vars
  • Add all variables from env.py to ConfigVars of Heroku App ( Appendix 73)
  • Add variable pair PORT:8000
  • For the testing deployment add variable pair COLLECT_STATIC:1
  • Add the Heroku app URL into ALLOWED HOSTS in settings.py
  • In root create file name Procfile ( Appendix 74 )
  • Navigate to Deploy > GitHub > Connect
  • Navigate to Deploy > Deploy Branch
  • Optionally, you can enable automatic deploys
  • See the deployment log - if the deployment was successful, you will be prompted with option to see live page

Appendix 73 - Heroku Config Vars

Appendix 74 - Procfile

Back to top

• Django/Jinja - main Framework of the project
• Python - main BackEnd programming language of the project
• HTML - templates programming language of this project (FrontEnd)
• CSS - styling the project via external CSS file ./static/css/style.css
• Java Script - dynamic templates programming language of this project (FrontEnd)
• jQuery - API for JavaScript - dynamic templates programming language of this project (FrontEnd)
• Bootstrap v. 5.3 - styling framework used in this project (FrontEnd)
• Heroku - to deploy this project
• Balsamiq - to create wire-frames
• Git - to make commitments of progress and push the results back to GitHub
• GitHub - to keep the track of version control
• VS Code - local IDE

Back to top

Following modules were used in development of Ohm-Azing Components website :

• asgiref==3.7.2 - ASGI framework, a library for building asynchronous Python web applications and servers
• bleach==6.1.0 - HTML sanitization library
• boto3==1.34.33 - Amazon Web Services (AWS) SDK for Python
• botocore==1.34.33 - Low-level, core functionality of boto3, providing access to AWS services
• certifi==2023.7.22 - Python package for providing Mozilla's CA bundle
• cffi==1.16.0 - Foreign Function Interface for Python calling C code
• chardet==5.2.0 - Universal character encoding detector
• charset-normalizer==3.3.2 - Library for encoding and decoding characters
• cryptography==41.0.5 - Provides cryptographic recipes and primitives to Python developers
• defusedxml==0.7.1 - Library for preventing various XML vulnerabilities in Python applications
• dj-database-url==0.5.0 - Utility for parsing database connection URLs in Django
• Django==4.2.7 - High-level Python web framework for rapid development and clean, pragmatic design
• django-allauth==0.58.2 - Authentication for Django applications, supporting social and email accounts
• django-ckeditor==6.7.0 - Django integration for CKEditor, a WYSIWYG text editor
• django-countries==7.5.1 - Provides a country field for Django models
• django-crispy-forms==1.14.0 - Helps easily build crispy forms in Django
• django-js-asset==2.2.0 - Django JavaScript asset management
• django-mathfilters==1.0.0 - Math filters for Django templates
• django-resized==1.0.2 - Resize images for Django models
• django-richtextfield==1.6.1 - Rich text field for Django models
• django-storages==1.14.2 - Collection of custom storage backends for Django
• django-tinymce==3.7.1 - Django integration for TinyMCE, a WYSIWYG HTML editor
• gunicorn==21.2.0 - Python WSGI HTTP server for UNIX
• idna==3.4 - Python package for handling Internationalized Domain Names
• jmespath==1.0.1 - JSON Matching Expressions
• oauthlib==3.2.2 - Generic, spec-compliant, thorough implementation of the OAuth request-signing logic
• packaging==23.2 - Core utilities for Python packages
• pillow==10.2.0 - Python Imaging Library (PIL), forked and maintained
• psycopg2==2.9.9 - PostgreSQL adapter for Python
• pycparser==2.21 - Complete parser of the C language, written in pure Python
• PyJWT==2.8.0 - Encode and decode JSON Web Tokens (JWT) in Python
• python-dateutil==2.8.2 - Extensions to the standard Python datetime module
• python3-openid==3.2.0 - Python OpenID library
• pytz==2023.3.post1 - Library for dealing with time zones
• reportlab==4.0.9 - Library for programmatic creation of PDF documents
• requests==2.31.0 - Python HTTP library
• requests-oauthlib==1.3.1 - OAuth library for Python Requests
• s3transfer==0.10.0 - Python library for managing Amazon S3 transfers
• setuptools==69.1.0 - Library to facilitate packaging Python projects
• six==1.16.0 - Python 2 and 3 compatibility library
• sqlparse==0.4.4 - Non-validating SQL parser for Python
• stripe==8.5.0 - Python client library for the Stripe API
• typing_extensions==4.9.0 - Back-ported and experimental type hints for Python 3.5 and 3.6
• tzdata==2023.3 - Timezone database
• urllib3==2.0.7 - Powerful HTTP client for Python
• webencodings==0.5.1 - Python implementation of HTML entity encoding/decoding

Back to top

• Daisy McGirr - massive shout-out for keeping me in the right direction as the best mentor I could ask for
• Alan Bushell and Amy Richardson- thank you for all the support during weekly stand-ups
• Looka - used for creating logo
• Adobe Color Wheel - used for picking the best color schema
• Google Fonts - used for picking the best typography
• Neon Tech - used as a database storage
• AWS - used as a storage of static and media files
• FavIcon.io - used to compress favicon
• FreePik - used as images database
• Bootstrap Icons - used as icons database
• W3Schools - useful information and cheat sheets
• Markdown-Toc - Table of contents generator
• XML-Sitemaps.com - XML Site-map generator
• Facebook - Used as social media platform to promote the business goals
• Ryte - robots.txt testing tool

Back to top