Welcome to my fifth milestone project, an e-commerce website that focuses on selling board games. CheckMate is a fictional store that relies on online sales alone to make revenue. This project uses the Django framework, HTML, Python, CSS and JavaScript.
In this project, I set up an authentication system and provided access to the site's data for users to purchase various products.
CRUD functionality (Create, Read, Update, Delete) is implemented in the Reviews page, Products Management page, Cart page and the Admin section of the project.
A live website can be found here.
- 1 UX
- 2 Data Models
- 3 Features
- 4 Technologies Used
- 5 Testing
- 6 Search Engine Optimisation
- 7 Marketing
- 8 Deployment
- 9 Credits
Having a website where users can visualize products and make purchases is the backbone of any eCommerce application.
As a big fan of board games, I have always looked online when wanting to buy a new board game.
This website will showcase a selection of games for the user to buy with a easy-to-use UI.
Please find colour scheme used for this project here.
The Roboto flex was used as the website font across all pages.
The website logo was created using Canva designing tools.
Mobile and Desktop wireframes were created for some pages of the website.
Due to lack of time, some features fell outside the scope of this project, and wireframes and final project might look different.
A Kanban board was created on GitHub and was used as a project management tool. User stories are divided into 6 EPIC labels.
All 29 user stories were implemented.
- Viewing the webpage
- Filtering and searching
- Buying a product
- Registration / Accounts
- Admin and store management
- Interacting and engaging
Data models used in this project:
- Contact app
class ContactMessage(models.Model):
"""Class for contact us model"""
name = models.CharField(max_length=200)
email = models.EmailField(max_length=200)
subject = models.CharField(max_length=200)
message = models.TextField()
date = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name + "-" + self.email- Products app
class Product(models.Model):
"""
A model for storing Product information
"""
category = models.ForeignKey('Category', null=True, blank=True, on_delete=models.SET_NULL)
sku = models.CharField(max_length=254, null=True, blank=True)
name = models.CharField(max_length=254)
description = models.TextField()
price = models.DecimalField(max_digits=6, decimal_places=2)
min_players = models.PositiveSmallIntegerField(null=True, blank=True)
max_players = models.PositiveSmallIntegerField(null=True, blank=True)
min_age = models.PositiveSmallIntegerField(null=True, blank=True)
avgRating = models.FloatField(default=0,)
play_time = models.PositiveSmallIntegerField(null=True, blank=True)
image_url = models.URLField(max_length=1024, null=True, blank=True)
image = models.ImageField(null=True, blank=True)
onSale = models.BooleanField(default=False)
def price_onsale(self):
return self.price - ((self.price * 50) / 100)
def __str__(self):
return self.name- Reviews app
class Review(models.Model):
"""A model for user reviews"""
product = models.ForeignKey(Product, on_delete=models.CASCADE)
user = models.ForeignKey(User, on_delete=models.CASCADE)
comment = models.TextField(max_length=1000)
rating = models.FloatField(
default=0, validators=[MinValueValidator(0), MaxValueValidator(5)]
)
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.user.username- Newsletter app
class Subscriber(models.Model):
"""Model for subscriber email information"""
email = models.EmailField(blank=True)
date_added = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.emailThe following apps have their data models based on the Boutique Ado project.
- bag app
- checkout app
- profiles app
This diagram was automatic generated using django_extensions and Graphviz:
Click here to open the diagram.
All links throughout the website pages will be highlighted in a darker tone when hovered.
Action buttons like "SHOP NOW", "PROCEED TO CHECKOUT" AND "ADD TO CART" have a dark green background colour and display the HTML text in white when hovered.
Go back buttons like "CANCEL" and "KEEP SHOPPING" have the background colour white with a dark green text and border. Its background colour will change to dark green and text into white when hovered.
An alert will appear at the top right of the page every time the user interacts with the webpage.
-
Desktop
On the left, The navigation bar contains the site logo and a link to the home page.
A search bar is located in the center of the navbar.
On the right, the "My Account" icon displays a dropdown when clicked on with links to product management, sign in, and sign out pages.
Also on the right is a shopping cart icon that works as a link to the shopping cart page and displays the current total amount in the cart.
-
Under the search bar there are 5 links:
-
(Home), a link to the "home" page
-
(All products), a link to the "all products" page.
-
(Board games), dropdown with options for game categories (Family, Strategy, Party, Classic) and "all board games".
-
(Role-Playing), dropdown with options for (dungeons & dragons and pathfinder) and "all role-playing" games.
-
(On sale), a link to the "on sale" page.
-
-
Mobile
The logo is removed on the mobile version, and a hamburger icon is placed at the left of the navbar.
When the hamburguer icon is clicked on, a dropdown menu shows all the navigation links.
The search bar is also hidden in the mobile version and is only displayed when the user clicks on the search icon.
-
-
Desktop and mobile
On the left side of the footer, you will find a link to the privacy policy page and just under it, a link to the "contact us" page.
On the right side of the footer, you will find a social link icon that directs the user to the CheckMate Facebook business account.
The content of the footer is in a smaller font size in the mobile version.
The home page has a background image and a bootstrap carousel with three carousel items.
The carousel will slide indefinitely every 20 seconds but will stop when hovered.
The user can control the carousel by clicking on the white arrows of the carousel or at the white lines under it.
Each line represents one of the carousel items and is highlighted when the correspondent carousel is displayed.
-
First item:
In the first carousel item, you will find the main page headings.
Under the headings, a "SHOP NOW" button, when clicked on, directs the user to the "all products" page.
A slide effect was added to the headings and the button, making them appear in sequence after each other.
-
Second item:
In the second carousel item, a flash sale image directs the user to the "on sale" page when clicked on.
-
Third item:
In the third carousel item, there is the form for subscribing to the newsletter with a subscribe button below.
The user has to type an email address and check a confirmation box.
The form will only be submitted after checking the box.
Under the form, there is a link highlighted in red. When clicked on, it directs the user to the unsubscribing page.
-
The Contact page has a white background, four input fields and a submit button.
All fields are required fields.
The products page can be filtered by category by clicking on the navigation links in the navbar.
If a category is selected, a badge with the category name is displayed below the product heading.
At the top left of the page, you will see the total number of products, and at the top right, you can sort products by price or alphabetically.
The number of products per row will differ depending on the screen size.
The Product name and image will redirect the user to the product details page when clicked.
Beside the image or below it, if displayed on an extra small screen, you will find the product card.
At the top of the card, you will find the product's name.
Under the name are icons with information regarding the minimum age, min and max number of players, and the average time to play.
If the product is on sale, the price is displayed in red with the old price crossed and faded.
An "ADD TO CART" button is placed at the bottom of the card and, when clicked on, will add one item to the cart.
At the bottom right, there is an arrow-up icon that brings the user back to the top of the page when clicked. The arrow has an absolute position and is always visible.
Large:
Medium:
Small:
Extra Small:
On the products details page, there is a large product image.
The product card has all the product information shown on the "all products" page plus four more items:
-
Reviews:
A yellow star icon is located beside the average rating for the product.
If the product has no reviews, a "no reviews" text is displayed instead
A reviews link can be found beside the average rating and redirects the user to the reviews page when clicked.
-
Description:
It contains a description of the product.
-
Edit and delete:
If the user is a superuser, an "edit" and "delete" button is displayed under the quantity field.
The edit button redirects to a pre-populated product management page, and the "delete" button redirects to the "confirm delete" page.
-
Quantity:
On this page, the user can select the quantity to be added to the shopping cart.
The On sale page will display all the products that are marked as "on sale".
Products can be marked as on sale through the "product management" page or the "admin" page.
A container with the reviews is displayed on the "product reviews" page if the products have any reviews.
If the user is the author of the review, links for edit and delete are displayed otherwise, these links are hidden.
The "edit" button will load a pre-populated form.
The "delete" button will load a delete confirmation page.
The "LEAVE A REVIEW" button will redirect the user to the "Add a Review" page, where a form with fields for comment and rating is displayed.
When submitted, the form will redirect the user back to the reviews page.
A "super user" can add new products on the product management page.
On the shopping cart page, the user can visualize all products inside the cart, update the quantity and delete the product entirely from it.
When the cart is empty this page will load.
At the bottom of the page, you will find the total price and delivery fee to be paid.
The delivery fee is 10% of the subtotal price.
When spending more than 50 euros, the delivery fee is free.
On the checkout page, there is a form for the payment information.
The order summary is shown on the right side of the page.
Clicking the complete order button will create the order, complete the payment transaction and load the "checkout_success" page.
An email is sent to the registerer email confirming the purchase.
Clicking the button at the bottom of the page will redirect the user to the "on sale" page.
The user can register for an account.
Sign in and Sign out.
A 404 page is loaded if the page is not found.
"GO BACK" button redirects the user to the home page.
- HTML5 The project uses HyperText Markup Language.
- CSS3 The project uses Cascading Style Sheets.
- Django 3.2 Django was used as the web framework to develop this project. Below you can find the Django libraries and packages used in this project.
- django-allauth Library used for authentication and registration
- JavaScript The project uses JavaScript.
- Python 3 The project uses Python.
- Boostrap 4 The project uses Bootstrap 4.6.
- PostgreSQL The project uses PostgreSQL as a database.
- Gitpod The project uses Gitpod.
- Chrome Developer tools Chrome was used to debug and test the project's source code.
- Balsamiq Balsamiq was used to create the wireframes during the design process.
- Canva Canva was used to create the website logo and the flash sale image.
- Google Fonts Google fonts were used to import the "Roboto flex" font into the style.css file which is used on all pages throughout the project.
- Heroku Heroku was useed as a cloud platform service for this project.
- AWS Used to store the stactic and media files of this project.
- Stripe Payments are processed using Stripe.
- GitHub GitHub was used to store the project's code after being pushed from Git.
To validate the HTML code, I clicked on "view page source" on the deployed application page that I wanted to inspect and copied the source code into the W3C validator.
-
Home page
The validator found seven errors in the home page HTML code:
-
Error:
- Fix - Inserted list items of mobile navbar inside a ul element.
-
Error:
- Fix - Gave a unique id for "a" tag in the mobile header.
-
Error:
- Fix - Correct "href" path of "my profile" link in the mobile version of the navbar.
- Fix - Removed Unused id from the carousel div.
- Fix - Removed duplicated class from newsletter input element.
- Fix - Removed type attribute from script tags.
-
All validation errors were fixed.
-
-
Products page
The validator found four errors in the products page HTML code:
-
Error:
- Fix - Removed "min" and "max" atributes from input element.
- Fix - Removed type attribute from script tags.
-
All validation errors were fixed.
-
-
On Sale page
The validator found four errors in the On Sale page HTML code:
Two errors for the "min" and "max" attribute of the "input" element and two errors for the unnecessary "type" attribute in the script tags.
All validation errors were fixed.
-
Product details page
The validator found one error in the product details page HTML code:
The unnecessary "type" attribute was removed from the script tag.
All validation errors were fixed.
-
Product reviews page
The validator found four errors in the product reviews page HTML code. When the product had no reviews, the following error was found:
When trying to leave a new review, the following error was found:
When trying to edit a review, the following error was found:
When deleting a review, the folowing error was found:
All validation errors were fixed.
-
Contact us page
The validator found Two errors in the contact us page HTML code.
-
Error:
- Fix - Removed duplicated class attribute.
- Fix - Removed stray "div" tag.
All validation errors were fixed.
-
-
Unsubscribe page
The validator found Two errors in the contact us page HTML code.
-
Error:
- Fix - Removed unclosed "div".
All validation errors were fixed.
-
-
Product Management page
The validator found no errors across the product managements templates HTML code.
-
Product management adding a product:
-
Product management deleting a product:
-
Product management editing a product:
-
-
My Profile page
The validator found Two errors in the My profile page HTML code.
-
Errors:
- Fix - Added closing "div" tag.
All validation errors were fixed.
-
-
Allauth templates
The validator found no errors in the "login" and "logout" templates.
-
Shopping cart page
The validator found no errors in the shopping cart HTML code.
-
Checkout page
The validator found 4 errors in the checkout page HTML code.
-
Error:
- Fix - Use "div" elements instead "td" elements.
- Fix - Use "div" element instead "h1" and added "h1" bootstrap class to keep the heading style.
- Fix - Removed "for" attribute from the label.
All validation errors were fixed.
The validator found no errors in the checkout success page.
-
CSS code was validated using W3C CSS validator.
The validator found no errors in all 3 css files:
-
base.css
-
profile.css
-
checkout.css
All JavaScript code was validate using jshint.
All code was copied into the validator and three lines of code were added at the top of the page to ignore some warnings.
-
/jshint esversion: 6/
-
/globals $:false/
-
/globals Stripe:false/
-
Tested pages:
-
bag.html
-
stripe_elements.js
-
carousel_script.html
-
products.html
-
on_sale.html
-
countryfields.js
-
The validator found six errors.
All errors were fixed.
-
The Python code was checked using the command "python3 -m flake8" in Gitpod.
The validator showed multiple errors.
The following errors were fixed in all files:
- W293 blank line contains whitespace
- E302 expected 2 blank lines, found 1
- W291 trailing whitespace
The following error was fixed in all files except "autogenerated files", "settings.py" and "webhook_handler.py" where this error occurred in essential parts of the code and I chose not to change it.
- E501 line too long (more than 79 characters)
The following error was fixed by adding the unused variable to the Try block.
- local variable 'grand_total' is assigned to but never used
Autogenerated files were not validated.
-
All pages
TEST OUTCOME PASS / FAIL Buttons and Links All buttons and Links are styled consistently throughout the website. PASS Alerts Alerts are displayed consistently after every user interaction throughout the website. PASS Responsiveness All pages are responsive to different screen sizes. PASS -
Navbar
TEST OUTCOME PASS / FAIL Logo Redirects the user to the home page when clicked on. PASS Search Bar Display a list of products containing the searched words either in the product title or the product description. PASS My Account Link Show a dropdown when clicked on containing a link to the "Register" page and "Sign in" page. When the user is logged on displays a link to the "Product Management" page, "My Profile" page and "Sign out" page. All links redirect the user to the correct page. PASS Shopping Cart Displays the total value of all items currently in the cart, when clicked on, redirects the user to the "Shopping Cart" page. PASS Navigation Links When clicked on, it displays the correctly dropdown menu and all links redirect the user to the correct products page. PASS -
Footer
TEST OUTCOME PASS / FAIL Social Link When clicked, it opens a new page with the CheckMate Facebook business account. PASS Privacy Policy When clicked, it opens a new page with the Privacy Policy for CheckMate Game Store. PASS Contact Us When clicked, it redirects the user to the "contact us" page. PASS -
Home page
TEST OUTCOME PASS / FAIL Carousel The Carousel controls work as expected. PASS SHOP NOW button The "SHOP NOW" button redirects the user to the "all products" page. PASS On sale image When clicked, the "on sale" image redirects the user to the "on sale" page. PASS Newsletter form Subscribe form only accepts a valid email address. PASS Newsletter check box The form is submitted only if the check box is checked. PASS SUBSCRIBE button The "SUBSCRIBE" button submits the form. PASS Newsletter database The user email is added to the database. PASS Newsletter confirmation email A confirmation email is sent when a new email is added to the database. PASS Unsubscribe The link to the unsubscribe page redirects the user to the right page. PASS -
Unsubscribe page
TEST OUTCOME PASS / FAIL Cancel button Redirects the user back to the home page. PASS Unsubscribe button Submits the form and user back to the home page. PASS Unsubscribe form Unsubscribe form only accepts a valid email address. PASS Unsubscribe check box The form is submitted only if the check box is checked. PASS Unsubscribe database The user email is deleted from the database. PASS Unsubscribe confirmation email A confirmation email is sent when a email is deleted from the database. PASS -
Contact Us page
TEST OUTCOME PASS / FAIL Input Fields Form will only be submitted when all fields were filed. PASS Email field Form will only be submitted when a valid email address is used. PASS -
Products page
TEST OUTCOME PASS / FAIL Image Products are displayed in the correct format depending on the screen size. PASS Card information Information on the card corresponds to the related product image PASS Price Price information on the products card are displayed correctly if product is on sale. PASS Links Image and product name redirect the user to the "product details" page when clicked. PASS "ADD TO CART" button When clicked on, adds one item to the shopping cart. PASS Sorting Alphabetcaly sorting returns the expected result. PASS Sorting Sorting by price returns the expected result. FAIL (Sorting by price produces the correct output but doesn't consider if the product has a reduced price on, resulting in the full price being used for sorting.)
-
Products Details page
TEST OUTCOME PASS / FAIL Image Product image is displayed in a larger size. PASS Product information Card contains the correct product information. PASS Rating The average rating is displayed correctly. When the product has no reviews, a "No Reviews" text is displayed instead. PASS Reviews Reviews link redirects to the product reviews page. PASS Quantity Allow only values between 1 and 99. PASS Edit and Delete Links are only visible if the user is "superuser". PASS ADD TO CART button Adds the correct number of items to the cart. PASS KEEP SHOPPING button Redirects the user to the products page. PASS -
On Sale page
TEST OUTCOME PASS / FAIL Products Only products on sale are displayed. PASS Product information Card contains the correct product information. PASS ADD TO CART button Adds one item to the cart. PASS -
Reviews page
TEST OUTCOME PASS / FAIL Rating Average rating is displayed correctly. PASS Reviews Card Author's name, ratings and comments are displayed correctly on the card. PASS Edit and Delete Links are only visible if the user is the review's author. PASS LEAVE A REVIEW button Loads the review form when clicked. PASS KEEP SHOPPING button Redirects the user back to the products page. PASS -
Leave a review
TEST OUTCOME PASS / FAIL LEAVE A REVIEW button When clicked, the form is submitted and the new review is added to the reviews page. PASS CANCEL button Redirects to the reviews page when clicked. PASS -
Edit a review
TEST OUTCOME PASS / FAIL Edit review page Page is loaded when "Edit" link is clicked. PASS Review form The form has the prepopulated product information. PASS Rating input Only accepts values between 0 and 5. PASS EDIT A REVIEW button The form is submitted and the review is updated when clicked. PASS CANCEL button Redirects to the reviews page when clicked. PASS -
Delete a review
TEST OUTCOME PASS / FAIL Delete review page Page is loaded when the "Delete" link is clicked. PASS Review card The correct review information is displayed on the card. PASS DELETE REVIEW button When clicked, deletes the review entirely from the database and redirects the user to the reviews page. PASS CANCEL button Redirects to the reviews page when clicked. PASS -
Product management page
TEST OUTCOME PASS / FAIL Authentication Page is only loaded if the user is "superuser". PASS Add Product form All form fields are loaded. PASS ADD PRODUCT button Product is added when all the required input fields are filled. PASS CANCEL button Redirects the user back to the home page. PASS -
Product management edit
TEST OUTCOME PASS / FAIL Authentication Page is only loaded if the user is "superuser". PASS Edit Product form All form fields are loaded and prepopulated. PASS EDIT PRODUCT button Product is updated with the new information. PASS CANCEL button Redirects the user back to the product details page. PASS -
Product management delete
TEST OUTCOME PASS / FAIL Authentication Page is only loaded if the user is "superuser". PASS DELETE PRODUCT button Deletes product from the database PASS CANCEL button Redirects the user back to the product details page. PASS -
Shopping Cart page
TEST OUTCOME PASS / FAIL Shopping cart All the correct product information is displayed. PASS Quantity Product quantity can be updated from the cart. PASS Product deletion Product can be entirely removed from the cart. PASS Delivery fee Delivery fee price is displayed correctly. PASS Grand Total Total of the order is displayed correctly. PASS PROCEED TO CHECKOUT button Redirects to the checkout page. PASS KEEP SHOPPING button Redirects back to the products page. PASS -
Checkout page
TEST OUTCOME PASS / FAIL Checkout Summary The order information is displayed correctly. PASS Checkout form All form fields are loaded correctly and prepopulated if the user is signed in. PASS Save info check box When checked, the user information is saved to the user's profile. PASS COMPLETE ORDER button When clicked order is processed, and the checkout success page is loaded. PASS ADJUST CART button Redirects back to the shopping cart page. PASS -
Checkout success page
TEST OUTCOME PASS / FAIL Checkout success page All order information is displayed correctly. PASS Order Order is added to the database. PASS Stripe Stripe shows no errors on the dashboard. PASS Email A confirmation email is sent to the user. PASS Button Button at the bottom of the page redirects the user to the "on sale" page. PASS -
Authentication
TEST OUTCOME PASS / FAIL Register User can register a new account. PASS Sign in User can sign in with an existing account. PASS Sign out User can sign out. PASS Confirmation A confirmation email is sent when a new account is registered. PASS -
404 page
TEST OUTCOME PASS / FAIL 404 page Page is loaded when a page is not found. PASS Image 404 image is displayed on the page. PASS GO BACK button Redirects the user to the home page. PASS
-
Fixed:
Issue - Total order price showed incorrect value.
Fix - Added products on sale object to try block in the checkout view.
In the orderLineItem model, check if products are on sale and use the correct price before saving them.
Issue - The edit review button didn't update the review.
Fix - Added the correct form action path.
-
Not Fixed:
Issue - When sorting products by price, products "onSale" are sorted using full price as a reference instead of half price.
Issue - When there are items in the shopping cart, the success alert messages are shown on top of the cart contents.
These two issues were discovered during the project manual testing in the final stages of the development, and with the submission date approaching, I had no time left to address them.
To improve the website SEO, I created a list with short-tail and long-tail keywords and used WorldTracker to find keywords with high traffic and low competition.These keywords were added to the website meta tags and headings, keeping the headings information meaningful to the user and avoiding keyword stuffing.
- Final list:
- Board games
- Board game shop
- Board game store
- Fun board games
- Board game gift
- Classic board games
- Best price board games
- Buy board games online
- Board games for adults
- Board game for two players
These keywords will need to be constantly monitored.
If necessary, keywords can be added or removed to keep improving the website's SEO.
-
Social Media:
-
Facebook:
For the marketing strategy, I created a Facebook account where weekly posts to promote discounted products are posted.
Other examples of posts would be a post when a new game is added to the website or sharing articles related to the board game scene.
With a small investment, the Facebook page can be promoted on Facebook to increase the page's reach.
-
Tiktok: Another marketing strategy would be making short videos about specific products and promoting them on TikTok.
-
-
Email Marketing:
Having a newsletter is a free form of marketing and will keep subscribed customers updated about the ongoing sales and new products.
Sending discounted codes through the newsletter will make subscribed customers more likely to complete a purchase, increasing sales numbers.
Running the project locally:
- Create a new Github repository.
- Open a new Gitpod workspace.
- Install Django and the supporting libraries.
- Create the requirements.txt file. Here you include the project's dependencies so Heroku can recognize them.
- Create a new Django Project.
- Create all django apps.
- Add apps to the installed apps in settings.py.
- Migrate all new changes to the database.
- Run the server to test "pyhton3 manage.py runserver".
Setting up the project to use PostgreSQL in Heroku:
- Create Heroku App.
- Install dj_database_url and psycopg2-binary in my local environment.
- Freeze requirements.txt file.
- In settings.py import dj_database_url.
- Back up the local database using "./manage.py dumpdata --exclude auth.permission --exclude contenttypes > db.json" in the terminal window.
- Comment out the local default database.
- Add the Heroku database url via dj_database_url.parse().
- Run migrations to the Postgres database.
- Restore the database using this command "./manage.py loaddata db.json" in the terminal windows.
- Create a SuperUser for the Postgres database.
- Configure the database so that when the app is running on Heroku it uses the Postgres database and when it's running locally it uses the SQLite database.
- Create Procfile so that Heroku creates a web dyno so that it will run gunicorn and serve the Django app.
- Disable Heroku collect static.
- Add the Heroku hostname to allowed hosts in settings.py.
- Generate a new Django secret key and add this to the Heroku config variables.
- Replace the secret key in settings.py to grab it from the environment.
- Set debug to True only if the environment is a development environment.
- Commit changes and deploy to GitHub and Heroku.
- Create an AWS account.
- Create an S3 bucket.
- Configure the S3 bucket settings and policies.
- Create and configure the IAM service.
- In the terminal install Boto3 and Django-storages.
- Freeze requirements.txt file.
- Add a statement to the AWS bucket if the environment is "USE_AWS".
- Add AWS keys to the Heroku config variables.
- Create custom storage classes for media and static files.
- In settings.py add a statement to use the static and media storage class and locations.
- Commit and push to GitHub and Heroku.
- In the S3 bucket create a new folder for media.
- Upload all used images to the media file in the S3 bucket.
- Add the Stripe keys to the Heroku config variables.
- Create a new webhook endpoint from the Stripe dashboard.
- Add all the Stripe keys to the Heroku config variables.
- Bootstrap carousel, grid, buttons, navbar and footer features were used in this project.
- Font Awesome icons were used in this project.
- The eCommerce part of the website was adapted from Code Institute 'Boutique Ado' walkthrough project.
- Home page Background image and logo was taken from Canva.
- The privacy policy on the site came from PrivacyPolicyGenerator.
- The website site map was generated using XML Sitemaps
- All product images, description and reviews were taken from Board Game Atlas