Foot Galaxy is an E-commerce store for a multinational business that sells classic and modern football jerseys to fans and collectors around the world. Shoppers can sign up and create an account, browse the store's jerseys and make purchases through the checkout. Shoppers gain a user profile when signing up where they can view past orders and save their personal info, the site also lets them review the business and save items to their wishlist.
You can find the live site Here.
Please do not input your own credit card details. While purchasing a product please enter the following digits to make use of the checkout system.
Card number: 4242 4242 4242 4242. Expiry: 42/42. CVC: 424. PostCode: 42424.
Â
Â
I built this website as my fifth and final project for the code institutes full stack development and e-commerce applications course. I built this website from scratch using the Django framework and the knowledge I gained while studying at the code institute where I have learned the basics of Python, HTML, Javascript and CSS.
- Football Fans
- Shirt Collectors
- Fashion lovers
- Provide football lovers with a store to purchase classic football shirts.
- Get as many users signed up as possible.
- Create a good relationship with customers and keep them returning.
The agile methodology was implemented in the design of this project. The project was planned on github using the project board feature.
- You can find the project board Here.
- The project board consists of three sections:
-
- Todo
-
- In progress
-
- Done.
- Each user story was drawn up in the issues section of github and passed on to the kanban where once added to the project board, it was placed in the todo section. Once a user story was undertaken it was then moved into "in progress"section and when finally implemented and complete moved into the third.
-
- As a shopper I want to view products the site is offering.
-
- As a shopper I want to be able to view the info on a product such as its name, price and size.
-
- As a shopper I want to be able to apply different filters to products to filter and view them by price, in alphabetical order etc.
-
- As the site admin I want to be able to edit pricing, images and description.
-
- As the site admin I want to be able to add new products for sale and delete products if they are no longer being sold.
-
- As a shopper I want to be able to view a FAQ section for any frequently asked questions.
-
- As a shopper I want to be able to add products to my basket and view them before proceeding to the checkout.
-
- As a shopper I want to be able to remove items from my basket
-
- As a shopper I want to view my order details before I checkout.
-
- As a shopper I want to be able to enter payment info quickly and easily and save it for the future.
-
- As the site admin I want to be able to view orders made by customers to ship them as soon as possible.
-
-
- As a shopper I want to be able to create an account to be able to interact with the site and feel a part of it.
-
-
- As a shopper I want to be able to log in and out of my account on the site.
-
- As a shopper I want to be able to view my past orders on my profile
-
- As a shopper I want to be able to save items to my account to show I like them and would maybe like to purchase them in the future.
-
- As a shopper I want to receive a confirmation email when signing up.
-
- As a site owner I want to be able to add, update and delete products from the main site
-
- As a shopper I want to know the location of the site’s store so I can shop there in person.
-
- As a shopper I want to be able to leave a review on the site’s services.
-
- As a shopper I want to be able to recover my password if I have forgotten it.
-
- As a shopper I want to receive regular news on the site and new products/plans via email.
-
- As the site admin I want to create a mailing list for subscribers to the site’s newsletters.
-
- As a shopper I want to be able to access the site’s social media to keep up to date with new plans and products.
- Order confirmation email.
- The ability for the site admin to manage review via the website ui.
- A football training plan subscription section giving users the chance to subscribe and unsubscribe
Foot Galaxy's Business model is a Business to customer model. As Foot galaxy aims to sell products directly to consumers. See below the techniques Foot Galaxy use to implement their business model and boost sales and growth.
For SEO I searched Wordtracker.com for my keywords which I included in the meta tags to promote SEO. I entered these words into google and compared them to the sites and words that would come up along wit the "People also searched for" sections. I then added what I thought were the most relevant to my meta tags and added them as much as possile in my site.
To further boost SEO I created a robots.txt file and added a sitemap along side this which I downloaded from XML-sitemaps.com.
-
Marketing at Foot Galaxy will be mainly done through social media as it is a large Business to customer company. The store runs a facebook page titled Foot Galaxy and shoppers can find out more about the store there and receive any updates on new deals and future events.
-
Email marketing is also a key part of Foot galaxy. Users can subscribe to Foot Galaxy's mailing list via the home page to receieve news on products, sales and more. The mailing list also updates shoppers on the store's weekly 5 a side a sessions too if they want to attend.
Wireframes
Database Schema
Site Flow Chart
I sketched this chart out at the beginning of development, the future feature nutrition plans did not make it to development in the end.
The colour scheme of the website is a simple white with flashes of red in the background, easy on the eye and stylish and modern. When the site is viewed on a device on dark mode, the colour scheme automatically switches from white to black, along with the font from black to white. This is a feature of tailwind's css.
The font for this site is the generic arial sans serif, a classic font that works well on all sites. I observed it was used across most modern websites and e commerce stores and implemented it here also.
- As a shopper I want to view products the site is offering.
- As a shopper I want to be able to view the info on a product such as its name, price and size.
- As a shopper I want to be able to apply different filters to products to filter and view them by price, in alphabetical order etc.
- As the site admin I want to be able to edit pricing, images and description.
- As the site admin I want to be able to add new products for sale and delete products if they are no longer being sold.
- As a shopper I want to be able to view a FAQ section for any frequently asked questions.
- As a shopper I want to be able to add products to my basket and view them before proceeding to the checkout.
- As a shopper I want to be able to remove items from my basket
- As a shopper I want to view my order details before I checkout.
- As a shopper I want to be able to enter payment info quickly and easily and save it for the future.
- As the site admin I want to be able to view orders made by customers to ship them as soon as possible.
- As a shopper I want to be able to create an account to be able to interact with the site and feel a part of it.
- As a shopper I want to be able to log in and out of my account on the site.
- As a shopper I want to be able to view my past orders on my profile
- As a shopper I want to be able to save items to my account to show I like them and would maybe like to purchase them in the future.
- As a shopper I want to receive a confirmation email when signing up.
- As a site owner I want to be able to add, update and delete products from the main site
- As a shopper I want to know the location of the site’s store so I can shop there in person.
- As a shopper I want to be able to leave a review on the site’s services.
- As a shopper I want to be able to recover my password if I have forgotten it.
- As a shopper I want to receive regular news on the site and new products/plans via email.
- As the site admin I want to create a mailing list for subscribers to the site’s newsletters.
- As a shopper I want to be able to access the site’s social media to keep up to date with new plans and products.
To navigate the site Users use the nav bar at the top of each page.
The nav contains a search bar and links to shop and access the users profile along with the shopping bag. On smaller screens a burger button replaces these items and they move to a drawer.
User Stories covered:
13, 17
Similar to the nav bar the footer appears on each page and has a sticky effect. The footer contains links to the site's social media and info pages. .
User Stories covered:
18, 23.
The home page where the user is first directed to contains links to start shopping and find out more about the site along with cards offering more info and buttons to browse products. The bottom also hosts a subscribe to our mailing list and 5 a side info box.
User Stories covered:
12, 18, 19, 20, 22.
The profile page is only access if a user is logged in. It contains the users past orders and their personal info which they can update and use in the future.
User Stories covered:
12, 14, 13.
The products page displays the sites products and allows user to categorize and sort them in various different ways using the buttons at the top of the page.
User Stories covered:
1, 2, 3.
The products details page is accessed when the user clicks on a product. If the user is signed in they can save the item to their wishlist. If the site admin is signed in they can edit the products info or even delete it using the buttons provided.
User Stories covered:
1, 2, 3, 4, 5.
The saved products page displays the user's saved products and allows user to delete them if they wish.
User Stories covered:
15.
The add product view is only accessible for the site admin via the nav bar.
User Stories covered:
4, 17.
The edit product view is only accessible for the site admin via the nav bar.
User Stories covered:
4, 5 .
The site bag renders what the user has added to it and allows them to then proceed to checkout and purchase them. Users can also remove items from their bag and view details on their products.
User Stories covered:
7, 8, 9.
The checkout page shows again what items the user is purchasing and it's info and a payment form. The user can save their info if they are logged in. A stripe API card payment form is located at the bottom of the page along with a secure checkout button.
User Stories covered:
9, 10,.
The checkout success page is rendered if the user successfully makes a payment. Once their payment goes through they will be met with this screen and given an order number. The user can then find this order in their profile in the previous orders section if logged in.
User Stories covered:
14.
The reviews page allows users to submit reviews on the site.
User Stories covered:
19 .
The about page informs the user about the history of the company and on store location.
User Stories covered:
18, 12.
The FAQS page answers any common questions about the site and provides a returns policy.
User Stories covered:
16, 18.
The sign up page lets users sign up to the site.
User Stories covered:
12, 16.
The sign in page lets users sign in to the site and gives them the option to reset their password.
User Stories covered:
20, 13.
The 404 renders if user gets a 404 error.
- Python
- HTML
- CSS
- Javascript
- Jquery
- Tailwind Css
- Git
- Github
- Vs Code IDE in browser
- Django
- Postgres
- Techsini Multi Device Mockup Generator used in this readme to display an image of the website on different devices
- Heroku - Hosts live site
- Allauth - login and registration
- Tailwind CSS used to style and structure site
- ElephantSQL - HOsts database
- Bootstrap 4 - Used for site structure and making the site responsive
- Basimiq - Created wireframes
- Whitenoise - Hosts and displays static files and images for the site
- Amazon Web Services host static and media files
- Crispy forms - Improve the sites forms
- Crispy tailwind - styled the sites forms
- Django storages - helped with file storages
- Django browser reload - automatic browser reloads in development
- Stripe API
- Pillow
- Grandtotal not appearing on the order confirmation message after checkout. strange bug as it appears in the checkout and bag pages, will get to the bottom of it in the future. More torublshooting needed as this is a big problem for shoppers who will want to be reminded of what they paid.
- After uploading my media files to AWS they still failed to render on the live site, the directory that the images were in were wrong, placing the images in the correct directory quickly fixed this.
- The css bug appeared at end of devlopment, unsure of the cause have extensively tried to fix and no matter what info I have found on trying to rectify it does not work. Further troublshooting will be required to remove.
I have manually tested this project by doing the following:
- Passed the pages through the W3C HTML and CSS validators
- Passed the project through a pep8 linter and the Code Institute python checker and confirmed there is no problems.
- Tested in my gitpod terminal and the Heroku terminal.
- Tested each user story to make sure each one passes.
W3C validations
- The w3c HTML validators pulled up alot of issues to do with django syntax, any that were not django I quickly corrected.
Pep8
- Some errors still remain (lines too long) bar this no other major errors were returned from the code institute's python Linter. Ran out of time in development will return in the future to indent the code.
Lighthouse testing
- The lighthouse testing for the site did not score the best due to the large storage size of the images and other features, this is something to work on.
Unit tests
- Some unit tests have been implemented, ultimately ran out of time in development. More testing will take place at a future date.
This project was created by navigating to the Code Institute's Gitpod student template and clicking the 'use this template' button. I then inputted the repository name "Foot Galaxy" and included all branches. With the repository now created, I used the browser version of Vs Code to create the project.
I used the following commands throughout this project:
- Git add . - This added my file to the staging area to be committed
- Git commit -m - This command committed any changes to the local repository along with a message
- Git push - pushed my changes to the github repository and to Heroku
- git reset --hard HEAD^ - This removed my last commit
- python3 manage.py runserver - This ran my code in the terminal
- python3 manage.py makemigrations - This made my migrations
- python3 manage.py migrate - This migrated my changes to my databases
- pip3 freeze > requirements.txt.
This website is deployed on Heroku
- Fork or clone this repository
- Linked the heroku app to the repository via github
- Clicked automatic deploys so each git push would automatically go to the heroku app
- This was ideal for testing so I could see what the site looked like on the Heroku terminal with each git push
1. Create Django project and app
- Install django using the command pip3 install 'django<4' gunicorn
- Then install the database libraries dj_database_url and psycopg2, using pip3 install dj_database_url psycopg2
- Then create the requirements.txt file using the command pip3 freeze --local > requirements.txt
- Then created my Django project with the command django-admin startproject project_name .
- I created the Django app with the command python3 manage.py startapp app_name
- I used the commands python3 manage.py makemigrations and python3 manage.py migrate to migrate my changes.
- To test and run the project I used python3 manage.py runserver.
2. Create Heroku app
- I opened the heroku website and logged into my account
- I created a new app with the project name
- Select region as Europe
- Open the Resources section and select Heroku Postgres
- Open the Settings section and select Config VARS, then add the necessary keys to your project.
3. Set up Django settings.py and necessary folders/files
-
Set up to connect the environment variables from pathlib import Path import os import dj_database_url from django.contrib.messages import constants as messages if os.path.isfile('env.py'): import env
-
Inside INSTALLED_APPS I added the necessary apps
-
Create a Procfile and add the following text
web: gunicorn autoclassic.wsgi
4. Elephant SQL
- Login to site
- Click 'Create New Instance' then select a region.
- Confirm new instance by clicking 'Create Instance'.
- Click the instance you created, copy the URL.
- Paste it into your DATABASE_URL env.py file.
5. Stripe
- Sign in to stripe.
- Go to 'Developers' then 'API Keys' to view public and secret key.
- Copy and paste your STRIPE_PUCLIC_KEY AND STRIPE_SECERET_KEY into heroku convig vars.
6. Amazon web services AWS
- Log in to AWS
- Create bucket in s3 select a Region turn off block all Public access go to the static website hosting' and click edit.
- In permissions click edit on CORS then edit bucket policy and generate and set configuration bucket policy.
- On access control list set list object permission for everyone.
- Open IAM application and set up a user group.
- Click on policies and create policy THEN click on the JSON tab and import a pre-built Amazon policy called AmazonS3FullAccess.
- Click review policy and then create policy go to groups then add permission and attach policy and then add user.
- Add user to group and download the CSV and finally add your code into settings.py.
- All product images and card images are from here, classic football shirts.com.
- W3schools provided me with the code for my scroll to top of page function and my dark/light mode button.
- Code for the bag and checkout views are taken from the code institute's Boutique Ado project.
- I would like to thank my mentor Ronan Mc Clelland for his help and guidance while I built this project.
- I would like to thank my family for their love and support.
- And finally my girlfriend for her advice on my site's style.