YAR Sports is the ecommerce sports website where cricket, football and badminton related sports equipments are available for the sports lovers. YAR Sports not only provide quality sports products but also in very reasonable prices compare to market and also we provide huge varieties products especially in cricket and badminton comparatively other sports markets. This ecommerce website is created for the users who love buying online. In this sports website, there are a lot of functionalities for the users like, users can create the account, users can easily find the products by searching in the website page, can add the products in the wishlist to buy later by signing in first, can add the products in the bag to buy it, can update or remove the products in the bag , can securily checkout for payments by using debit card, can view the order history in his profile, can leave a review on the products by signing in first, can add the testimonials for our website and also contact us to fill in the form to get a quote for the products on demand. Website owner can only add, update and delete the products in the website both through admin panel and product management of the website.

The deployed link can be found here: Live Site

• User stories
• Wireframes
• Existing Features
• Technology Used
• Agile Technique
• Features left to implement
• Testing
• Bugs
• Database Schema
• Marketing
• External Resource links
• Typography
• Colour Schema
• Favicon
• Deployment
• Stripe Payments
• Credits

• Viewing and Navigation:

  

• Registration and User Accounts:

  

• Sorting and Searching:

  

• Purchasing and Checkout:

  

• Admin and Store Management:

  

• Review on the Product:

  

• Add to Wishlist:

  

• Add Testimonial:

  

• Get a quote:

  

Back to top

• Wireframes were created for this project using the balsamiq for project planning and design purposes.

• Website ux could be little bit different because wireframes were created earlier.

• Main Page Desktop:

  

• Main Page Mobile:

  

• Sign Up:

  

• Sign In:

  

• Products:

  

• Product Detail Page:

  

• Wishlist:

  

• Bag:

  

• Product Management:

  

• My Profile:

  

• Add Testimonial:

  

• Get Quote:

  

  Back to top

• Navbar:

  • Users can sign up and login using the dropdown menu(My Account) showing on the navbar and also can add the products in the bag to buy and can securily checkout.

  

• After login Navbar:

  • Users can use one additional functionality of wishlist to add the products in the wishlist to buy it later and can see the products in the wishlist by using the icon showing on the navbar.

  

• Sign Up:

  • Users can register their account by clicking on the register button showing in the dropdown list on the navbar.

  

• Login:

  • Users can login by clicking on the login button showing in the dropdown list on the navbar.

  

• Note: Users can only use the functionality of wishlist, to leave a review on the products, add testimonial, get a quote for the products on demand and profile to see his orders history by creating their account in the website.

• Search the products:

  • Users can search the products using search bar showing on the navbar to find the products easily.

  

• Main page:

  • Main page of the website showing the functionalities and look of the website.

  

• Products:

  • users can see the all the products either through clicking on the explore products button showing on the main background image or clicking on the all products button displaying on the navbar. Users can also see the products related to different sports by clicking on the buttons showing on the navbar and can see the deals, clearance, new arrivals.

  

• Product detail:

  • Users can see the product detail by clicking on the products image.

  

• Reviews:

  • Users can leave the review on the product by going to the bottom of products detail page.
  • Note: Login required to leave the review on the product.

  

• Wishlist:

  • Users can add the products in the wishlist to buy it later by clicking on the Add To Wishlist button showing in the products detail page.

  

• Bag:

  • Users can add the products in the bag to buy it by clicking on the Add To Bag button showing in the products detail page.

  

• Checkout:

  • Users can securily checkout for payment by clicking on the Secure Checkout button showing in the bag.

  

• Profile:

  • Users can see the order history in his profile by clicking on the My Profile button showing in the dropdown list of My Account.

  

• Testimonials:

  • Testimonials of our satisfied customers.

  

• Product Management:

  • Site owner can only add, edit and delete the products by clicking on the Product Management button showing in the dropdown list of My Account.

  

• Add Testimonial:

  • Site users can add the testimonial for the website using this form below. Users can only add the testimonial by signing in to the website first.

  

• Get Quote:

  • Site users can get the quote for the desired sports equipments by filling this form below and users can also upload the image of the sports equipment they want us to provide.

  

• Footer:

  • Footer displays the newsletter signup, social link and privacy policy of the website.

  

Back to top

• Html
• Css
• JavaScript
• Boostrap
• Django
• Python
• GitHub
• Gitpod
• Heroku

Back to top

• Agile technique is used in this project. You can have a look here

• Kanban board was used in this project to handle user stories.

  

• User stories were created for following the agile technique

• MOSCOW method was used to prioritize the task using the label of MustHave, ShouldHave, CouldHave and WontHave.

  

• Milestones were created for the tasks to complete.

  

• Acceptance Criteria:

  Each of the user stories was given acceptance criteria, an example of this can be seen below:

  

Back to top

• Allow users to login/register using social media platforms.
• An interactive star rating on the products by the users.
• Testimonial slide show for more interative user experience design.
• All the social links with the website page register.
• Testimonial delete functionality in the front end.

Back to top

• Python code was tested to ensure that it met PEP8 style guidelines. This was done within the terminal console using the command python3 -m flake8, which displayed errors and warnings within the code. Almost 54 errors were removed to meet the requirements of PEP8 style guidlines. The autogenerated warnings are:

• Linting Issue: Line too long in settings.py file.

• Linting Issue: Webhook and validator errors with e being assigned but never used.

• Linting Issue: Importing checkout.signals in the checkout.apps.py file.

• Most of these errors are auto created lines so adjusting these lines could create the problems in website.

  

  

Automated tests for python were undertaken to check the functioning of the codes and it were all passed.Any testing that was not conducted using automated testing was done manually to ensure that site was fully functional upon deployment. Below is the screenshot of automated tests that were performed for all the apps using the code 'python3 manage.py test' and we can also test all the apps one by one using the code 'python3 manage.py test appname'.

I have manually tested this project by doing the following:

• Passed the code through different validator checker and confirmed that there are no problems

• Html checker:

  • I have checked all the html templates throughout the website and no errors were returned from W3C Html

    

  • Products, Products-detail, bag, wishlist, testimonial, Product-management, contact, signup, login, profile

• CSS checker:

  • No errors were returned from W3C CSS

    

• JS checker:

  • No errors were returned from JS HINT

    

  • contact, bag, checkout, products, profile, custom-clearable

• Accessiblity:

  • I confirmed that colours and font chosen are easy to read and accessible by running it through lighthouse in devtools.

  • Generated report is here below

  • Desktop:

    products, products-detail, wishlist, bag, product-management, profile, testimonial, signup, sign-in, contact

  • Mobile:

    home, products, products-detail, wishlist, bag, product-management, profile, testimonial, signup, sign-in, contact

• Home Page:

  

• Products Page:

  

• Products Detail Page:

  

• My Account:

  

• Wishlist Page:

  

• Bag Page:

  

• Checkout Page:

  

• Order Summary Page:

  

• Get Quote Page:

  

• Allauth:

  

• Superuser:

  

Back to top

• Solved bugs:

  • Footer was not covering the whole screen in the desktop and small devices so, I wrapped the footer into the body by using this code below to fix the bug.
  • body { min-height: 100vh; display: flex; flex-direction: column; margin: 0; } main { flex-grow: 1; }
  • Quantity button was not working properly in the desktop after adjusting the quantity button in the mobile devices, Thanks to code institute who helped in solving the bug by adding the additional javascript to fix the bug.

• Unfixed Bugs

  • No unfixed bugs.

Back to top

• Entity Relationship Databases (ERD) were created to help develop this project.

Back to top

• The business model used for the YAR Sports website would be a B2C (Business to Customer), this is due to the business selling products directly to the customer through the platform. The target market for these sports equipments are users:

• For all the ages especially for adults.

• Looking to purchase good quality sports equipments in reasonable prices.

• Customers who are buying products from YAR Sports should be able to:

  • Easily view and purchase sports products from the site.
  • Easily navigate and search for products they want to purchase.
  • Be able to subscribe for email discounts and offers.
  • Alongside this functionality, the user stories for this project document what is required by the customers of this site.

Market research strategy was performed that needed to promote the YAR Sports website. Based on this and the target audience YAR Sports facebook business page was created for this purpose and it can be seen below:

• The site was optimized by careful selection of keywords. The following steps were taken to do this:

• The entire table keywords consists of important relevant topics based upon my initial understanding of the business.

• Using these topics a 'brain dump' of keywords was made orientated around common topics and themes within the business.

• Topics and keywords were then tried out on Google and the relevant suggestions it gave were added to the keyword list.

• Words crossed out were removed due to the lack of relevance and not being specific to the site and also having too much competition using Wordtracker.

• Words in blue denote the sites "Short Tail Keywords"

• Words in Green denote the sites "Long Tail Keywords"

  

• An example of how these words were used throughout the site can be seen below in the screenshot found on the websites homepage:

  

• Words/phrases included within semantic HTML elements were optimized using the keywords above.
• Careful consideration was given to the words chosen to avoid 'keyword stuffing'.
• Keywords were used within links, urls and aria labels.
• Social network links include rel="noopener" to not affect the assessment of the webpage.
• Image description alt tags contain the keywords chosen above.
• External reliable link was included within the site to improve SEO, this include:
  • Charities that the company supports.
  • Recommended Sports website.
• Within the META data.

Google metrics were considered when developing the site, including:

• Click Through Rate (CTR):
  • The title and Meta data of the website were optimized with both short and long tailed keywords. Keywords selection is explained in the SEO section.
• Bounce Rate:
  • The homepage of the site has been made engaging for the users. In fact, all the pages made are user friendly and interesting.
• Dwell Time:
  • Content on the homepage is interesting and engaging to the users. Content was choosen relevent for the site.
• Session Time:
  • It is made easy for the users to discover more content and products quickly through the search bar on the page.
• Pages Per Session:
  • Links were regularly included throughout the website to encourage users to navigate through the website more and engage with more of the content quickly and easily.
• Most importantly everything in the site was included by taking into consideration Expertise, Authoritativeness and Trustworthiness for improving the google metrics.

The sitemap was made to list the websites important url's to make sure that search engine spiders are able to easily crawl through the site and understand its structure. This was made using XML-sitemaps.com using the following steps:

• Paste the URL of the deployed site into XML-sitemaps.
• Download the XML sitemap file.
• Drag and drop this file into the project root directory and ensure it is labelled sitemap.xml

The robots.txt file was created to tell the search engine spiders that where they are not to allowed to go on the site and increase the quality of the site and improving the SEO rating. The following steps were taken to create this file:

• File was added namely robots.txt.
• The following code is written into this file, adding in your personalised sitemap url:
  • User-agent: *
  • Disallow:
  • Sitemap: YOUR_SITEMAP_URL
• The final steps for working with these two files requires a DNS certificate for a deployed custom domain. This project did not require a custom domain and so it has been temporarily left out.

Users are encouraged to signup for our newsletters and information about the sports equipments sold at Yar Sports. The email subscription service is ran through Mailchimp, allowing shop owners to send marketing emails through the platform, increasing engagement within the site. Below is a screenshot of mailchimp form where users can signup.

After customers successful purchase, an automatic email containing all of their order confirmation details was sent to their emails they have given. An image of how this confirmation email looks like can be seen below:

Back to top

Two external resource links were used in the project with rel=Noopener, target=_blank and aria-label=external link to particular site. It can be seen here below:

Back to top

The purpose of the font was to create a phenomenol feel within the website. Moreover, text colours were mostly chosen either Cyan-blue or white and some other colours as well depending on the background contrast ratio, to ensure information was accessible to users who may be visually impaired. The main font used on the site was 'Lato' and 'Oswald, this was selected using Google Fonts.

Back to top

#555, #fff, #0072b1, red, green, blue, whitesmoke, black, #6c757d, #ffc107, #343a40, #aab7c4, #dc3545, combination of these colours were used in the website for foreground and background.

Back to top

Favicon was generated for this project as can be seen below

Back to top

• Creat a new GitHub repository page using the 'Code Institute Template'.
• Open the new repository by clicking on the 'Gitpod' button.
• Install the relevant apps and packages needed to deploy to HEROKU.

Following steps were taken to deploy the project to Heroku from GitHub repository:

• Create Heroku App:
  • Before creating the Heroku app make sure your project has the following files:
    • requirements.txt to create this file, type the following within the terminal: pip3 freeze --local > requirements.txt.
    • Procfile to create this file, type the following within the terminal: python run.py > Procfile.
  • Select "Create new app" within Heroku.
• Attach the Postgres database:
  • Search "Postgres" within the Resources tab and select the Heroku Postgres option.
• Create the settings.py file:
  • In Heroku navigate to the Settings tab, click on Reveal Config Vars and copy the DATABASE_URL.
  • Within the Gitpod workspace, create an env.py file within the main directory.
  • Import the env.py file within the settings.py file.
  • Add a SECRET_KEY value within the Reveal Config Vars in Heroku.
  • Add the DATABASE_URL value and your chosen SECRET_KEY value to the env.py file.
  • Run the following command in your terminal python3 manage.py migrate.
  • Add the following sections to your settings.py file: STATICFILES_STORAGE STATICFILES_LOCATION STATIC_URL MEDIA_URL DEFAULT_FILE_STORAGE MEDIAFILES_LOCATION TEMPLATES_DIR Update DIRS in TEMPLATES with TEMPLATES_DIR Update ALLOWED_HOSTS with ['app_name.heroku.com','localhost']
• Deploy to Heroku via CLI:
  • Login to Heroku within the terminal window using heroku login -i
  • Run the following command in the terminal window: heroku git:remote -a your_app_name_here, By doing this you will link the app to your GidPod terminal.
  • After linking the app you can deploy to Heroku by running the command git push heroku main.

This deployed site used AWS S3 Buckets to store the static and media files. The following steps to set up an AWS S3 Bucket are here below:

• Create an AWS account using this link AWS.

• Login to your account and within the search bar type S3.

• Within the S3 page click on the button 'Create Bucket'.

• Name the bucket and select the region which is closest to you.

• Underneath Object Ownership select ACLs enabled.

• Uncheck Block Public Access and acknowledge that the bucket will be made public, then click Create Bucket.

• Inside the created bucket click on the Properties tab. Below Static Website Hosting click Edit and change the Static website hosting option to Enabled. Copy the default values for the index and error documents and click Save Changes.

• Click on the Permissions tab, below Cross-origin Resource Sharing (CORS), click Edit and then paste in the following code:

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

• Within the Bucket Policy section. Click Edit and then Policy Generator. Click the Select Type of Policy dropdown and select S3 Bucket Policy and within Principle allow all principals by typing *.

• Within the Actions dropdown menu select Get Object and in the previous tab copy the Bucket ARN number. Paste this within the policy generator within the field labelled Amazon Resource Name (ARN).

• Click Add statement > Generate Policy and copy the policy that's been generated and paste this into the Bucket Policy Editor.

• Before saving, add /* at the end of your Resource Key, this will allow access to all resources within the bucket.

• Once saved, scroll down to the Access Control List (ACL) and click Edit.

• Next to Everyone (public access), check the list checkbox and save your changes.

• Search for IAM within the AWS navigation bar and select it.

• Click User Groups that can be seen in the side bar and then click Create group and name the group 'manage-your-project-name'.

• Click Policies and then Create policy.

• Navigate to the JSON tab and click Import Managed Policy, within here search S3 and select AmazonS3FullAccess followed by Import.

• Navigate back to the recently created S3 bucket and copy your ARN Number. Go back to This Policy and update the Resource Key to include your ARN Number, and another line with your ARN followed by a /*. Below is an example of how this should look like:

• { "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "s3:", "s3-object-lambda:" ], "Resource": [ "YOUR-ARN-NO.-HERE", "YOUR-ARN-NO.-HERE/*" ] } ] }

• Ensure that the policy has been given a name and a short description, then click Create Policy.

• Click User groups, and then the group you created earlier. Under permissions click Add Permission and from the dropdown click Attach Policies.

• Select Users from the sidebar and click Add User.

• Provide a username and check Programmatic Access, then click 'Next: Permissions'.

• Ensure your policy is selected and navigate through until you click Add User.

• Download the CSV file, which contains the user's access key and secret access key.

• Note: You must download and keep this file in a safe place because after closing, we cannot download this again.

• Within your terminal install the following packages by typing
  • pip3 install boto3
  • pip3 install django-storages
• Freeze the requirements by typing
  • pip3 freeze > requirements.txt
• Add storages to your installed apps within your settings.py file.
• At the bottom of the settings.py file add the following code:
  • if 'USE_AWS' in os.environ:
  • AWS_STORAGE_BUCKET_NAME = 'insert-your-bucket-name-here'
  • AWS_S3_REGION_NAME = 'insert-your-region-here'
  • AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID')
  • AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY')
• Add the following keys within Heroku: AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY. These can be found in your CSV file.
• Add the key USE_AWS, and set the value to True within Heroku.
• Remove the DISABLE_COLLECTSTAIC variable from Heroku.
• Within your settings.py file inside the code just written add:
  • AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
• Inside the settings.py file inside the bucket config if statement add the following lines of code:

  • STATICFILES_STORAGE = 'custom_storages.StaticStorage'

  • STATICFILES_LOCATION = 'static'

  • DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'

  • MEDIAFILES_LOCATION = 'media'

  • STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'

  • MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

  • AWS_S3_OBJECT_PARAMETERS = { 'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT', 'CacheControl': 'max-age=94608000', }

• In the root directory of your project create a file called custom_storages.py. Import the following at the top of this file and add the classes below:

  • from django.conf import settings

  • from storages.backends.s3boto3 import S3Boto3Storage

  • class StaticStorage(S3Boto3Storage):

  • location = settings.STATICFILES_LOCATION

  • class MediaStorage(S3Boto3Storage):

  • location = settings.MEDIAFILES_LOCATION

• Navigate back to you AWS S3 Bucket and click on Create Folder, name this folder media, within the media file click Upload > Add Files and select the images for your site.
• Under Permissions select the option Grant public-read access and click Upload.

• Log in to GitHub and locate the required GitHub repository.
• At the top of the Repository, above the "Settings" button, locate the button labelled "Fork".
• You should now have a copy of the original repository within your GitHub account.
• You can make changes to this new version whilst keeping the original version safe.
• For Cloning the Repository, Click the dropdown button labelled 'Code' above the file list.
• Copy the URL for the required repository.
• Open Git Bash on your device.
• Change the current working directory to the location where you want the cloned directory.
• Type git clone in the CLI and then paste the URL you copied earlier.
• Press Enter to create your local clone.

Back to top

For handling payments within the website just make sure that you have set up a guide on how this can be done can be found here.

Back to top

• The Idea of README.md file and the codes used for the website were also learnt from Code Institute
• Few codes were also learnt from codepiep
• Few codes were taken from Stack Overflow
• pinax-testimonials were used in the project pinax-testimonial

• Products pictures were taken from Sports Direct
• Main page background image was taken from pexels

My mentor who guided me througout the project.

Back to top