View the live project at the following link.

Team Lift Sprint is an online shopping site that sell a manner of goods related to sport and/or sporting equipment. It is designed for Strength & Conditioning coaches, team managers, players and those focusing on getting the best out of their performance. The website provides status and feedback to users at all stages of the shopping process, as well as items on sale and correct UX design. Coming from a sporting background myself, the site itself comprises a number of categories which are discussed in detail below with the aim that Team Lift Sprint be a "one stop shop" for all those either training individually or in a group.

Categories are split between individual & team, with durther drilldowns into these whether they are indoor/outdoor, track, cardio, gym or cardio. The site is to encompass a one stop shop for all visitors, including a TLS blog where useful articles can be added. Logged in users will have the abilty to create a review of a product to help guide prospective purchasers for items, giving them an incentive to create an account and have their own profile page.

The site has been tested on a number of devices including desktop, tablets and mobile - as shown in the testing readme file. The site is also designed to handle the full suite of user management, as defined in the Information architecture of this ReadMe file.

• Site Owner/Developer and Product/Business Goals

• First Time Visitor Goals

• Returning and Frequent Visitor Goals

• User Experience (UX)

  • The 5 planes of User Experience – Decisions and Reasons
  1. Strategy plane
  2. Scope plane
  3. Structure plane
  4. Skeleton plane

• Design Features

  1. Wireframes
  2. Typography

• Design & UX – How do they come together?

  • User goals
  • Site owner/designer goals
  • Application-features
  • Future-developments

• Information Architecture

  • Site Logic and diagram
  • User Types and permissions
  • CRUD Functionality
  • Database model

• Technology and Languages used

  • Languages
  • Frameworks, Libraries and Programmes

• Testing

The following areas of testing were reviewed in the testing.md file:

• Code validation
• Accessibility testing
• Responsive testing
• Manual testing
• Testing user stories from User Experience (UX) section
• Fixes and Known bugs

• Deployment

  • Process of deployment
  • How to run this project locally

• Credits

  • Content
  • Media
  • Code
  • Acknowledgements

As the developer, the site is to achieve the following goals:

1. Achieve the user goals as specified below
2. Create a positive experience for all user types using the specifications required
3. Achieve responsive design across all devices
4. Utilize the combination of HTML, CSS, JavaScript and Python to enhance the experience of the user
5. Become a hub for sportspeople to purchase fitness equipment
6. Allow “superuser” access to designated personnel to manage store products in full - CRUD functionality
7. Ensure the site is secure

As a first-time visitor of the site, I want:

1. My impression of the site to be a positive experience
2. To understand the main purpose of the site
3. To purchase relevant equipment related to individual/team sports
4. Create a profile - including login/register functionality
5. An instant feedback loop from site navigation on what I am doing
6. Easy navigation of the site including searching for a term
7. Built-in safety protocols – user authentication, appropriate redirects, site action feedback
8. The ability to edit/delete any items in my bag
9. Secure card payment protocols
10. Ability to view my checkout items if I have accidentally exited the site
11. Buy an item without registering
12. Browse products easily including sorting them
13. View and purchase whats on sale
14. Have a FAQ section where I can get in touch with the company regarding shipping/delivery, etc.
15. See if I have any shipping costs
16. See any product reviews and enter one myself, delete one if needed
17. Read any articles regarding fitness

1. Ability to reset my password and forgot my password verification
2. View my previous orders
3. Log in and out easily
4. Save/Update my contact details

• Desktop wireframe - attached
• Tablet wireframe - attached
• Mobile wireframe - attached

Lato is used as the main font on the site, as imported through Google Fonts. Sans-serif is used as the fallback font. According to an article on perpetual media group: “The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness.”

Further, in this blog post, Lato is ranked as #1 on the “30 best Google Fonts for your website”. It is known that the designer of this font, Lukasz Dziedzic, “created Lato to work transparently in body text and also to stand out individually when used in larger-sized titles”. With these descriptions in mind, Lato is used for the site design/accompanying text.

The Bootstrap toolkit was used throughout including:

• Grid
• Navbar
• Buttons
• Toasts
• Cards
• Forms

Bootstrap toasts were used to feedback to the user on success, information and error messages during product CRUD usage.

Successful:

Informational:

Error:

As products are added/edited from the products/bag views, the corresponding toast message and cart reflect this change in status as shown:

The site superuser/owner can use their priviliges to select whether a product is on sale through the site management. They can set the percentage discount, and the updated product will then be included with other sale products from the respective view. Each product on sale will have a Sale pill badge, original price with a strike through, sales price and arrow percentage discount in the product card.

See view of item on sale:

and the view where the superuser changes the boolean value with no sales price:

The site has separate pages for bag, checkout and checkout success corresponding to each stage of the purchase process. The customer is able to alter the quantity in the cart between 1 and 99. The price for individual products, sub-total of quantity for each product, overall bag total and grand total after shipping cost (if applicable) is shown.

Name, email, phone, address and card details are required on the checkout page. A checkbox provides an option to save the contact and address details back to the profile.

A purchase below €100 will incur a 5% of order total shipping cost. The shipping cose is waived for orders over €100.

Customer’s contact details and order history are saved in their profile. Contact details can be updated on the profile or check out pages. Security is in place to ensure only the customer who submitted the order can see the order history.

A site owner can create new product for the Site Management link on the navbar. Existing products can be updated via the Edit and Delete links on each item in the product views.

Product editing (pre & post):

Product addition and subsequent deletion:

Note that per the known bugs section in the testing.md file, the "noimage" bug has been documented on AWS error.

Full search capability on product titles and description.

and subsequent search for the term "barbell":

Upon ordering, a customer will get a successful order message with a reference number. From their profile view (if registered and signed in), they will see this order as well as any previous orders they have made:

Site visitors can see can see reviews of products and what other people are saying about them.

See a product with two reviews and user has one:

See a product with two reviews and user has none:

See a product with no reviews:

See how the reviewer can delete their review:

Site visitors can view detailed blog posts regarding fitness posted by the site owners.

See the blog page:

See the full blog post:

The footer of each page contains 3 clickable HTML files which the site user can view - FAQ, Contact Us and Shipping Info:

• Confirm Deletion
• HTML validity
• Admin pages protected from non-admin access
• Errors 404 and 500 handled by pages within the site
• Comprehensive user notifications through toast/feedback loop noted

Used to improve function and style of forms.

Static and media files hosted on AWS S3.

The use of the Bootstrap grid system and additional media queries enables the site to display effectively on a broad range of desktop, tablet and mobile screen sizes. See the testing section of this file for further information on this. To note, the media queries present are:

• max-width: 1399px
• max-width: 991px
• max-width: 585px

There are a number of developments and rationale for these included below which I would like to implement into the site. However, given the time pressure I have decided to not include these in the final project.

The site logic was developed using Python, Django, Json, Heroku, JavaScript and JQuery. Django templating language was utilised in the creation of the site. See below "User Types and Permissions"/"CRUD Functionality" sections for more information.

See the attached link for a diagram of the site logic.

There are three types of users that this website is designed for:

A visitor is anyone who navigates to this website and can see home/products pages. Visitors can view the products, their narrative, add them to a cart with all CRUD functionality and checkout with an order number. They can see blog posts and review any product reviews of items. They can also register for an account/login with email verification.

A visitor who registers for an account automatically becomes a "user". Users have the same rights as visitors, plus they have access to their own profile where they can see all of their past orders and create their default profile information for checkout purposes. These users can change/forgot their password and log out. These users can add create a review for a particular product if they havent already and delete it if they want.

Administrators have all the rights of a logged in user, but they also have the right to manage the information of all products in the store, as well as add a product. They can verify email addresses of users that wish to create an account. They can delete any user except themselves. This is a security feature so that an administrator doesn't accidentally delete their own account. They can also edit/add/delete blog posts and delete all product reviews.

As seen in the table above referencing purchasing a product, all CRUD functionality is present in the application. However, some CRUD operations are restricted to particular user types - noted below.

See below for the database schema implemented in the file:

• HTML5
• CSS3
• JavaScript
• Python

jQuery

Used as part of JavaScript.

GitHub

Used to store projects code upon Git push.

Django

Site structure.

Bootstrap 5

Used for templating and used in navbar/toasts/buttons/grid/breakpoints/lists and forms.

Git

Used for version control through the Gitpod terminal and the Git add/commit/push action sequence.

Microsoft Word

Used for designing of the wireframes as I am completing this project on my work laptop with no access to Balsamiq.

Favicon

Used to create the icons of the site.

Font awesome

Used to add in the button icons throughout the site.

Google fonts

Used to add the Lato font and related font weights to the CSS style file using the @import url function. To improve site load times, this file is loaded into the head element of the base HTML page and backed up by using sans-serif in CSS.

Heroku

A web hosting service that supports Python applications.

Postgres

Live database.

AWS S3

Hosting live static and media files.

JSON

An open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs. Used for storing the attribute information for the products and categories of this file.

See Testing.md for testing of the following areas:

• Code validation
• Accessibility testing
• Responsive testing
• Manual testing
• Testing user stories from User Experience (UX) section
• Fixes and Known bugs

1. Log into GitHub and locate the Team_Lift_Sprint repository
2. Under the repository name, click ‘Clone or download’.
3. To clone the repository using HTTPS, under ‘Clone with HTTPS’, copy the link.

4. Open Git Bash

5. Change the current working directory to the location where you want the cloned directory to be made.

6. Type git clone, and then paste the URL you copied in step 3: $ git clone https://github.com/aryan008/team_lift_sprint

7. Click Enter. Your local clone will be created.

Please see this link for more detailed explanation.

8. Following Stripe documentation, create a Stripe account and in Developers on the API key tab find the public and secret key.
9. Also in Stripe create a Webhook and find the Webhook secret key.
10. Create an env.py file to contain the following environment variables.

11. Create a .gitignore file ensuring pycache is added.

12. Install all project requirements with the following command: pip3 install –r requirements.txt
13. Run database migrations with the following command: python3 manage.py migrate
14. Load category and product fixtures in following order:

15. Create a superuser

16. Run the app

1. Login to Heroku
2. Create new app

3. Add name , choose closest region and click Create app

4. In Resources create a new Postgres database

5. Select Hobby Dev-Free plan and click Submit Order Form

6. In your IDE install dj_database_url and psycopg2

7. Import dj_database_url in settings.py

8. Replace default database with a call to dj_database_url.parse and give it the database URL from Heroku

9. Run all migrations again for the Postgres database (see steps 11 to 13 in Making a Local Clone)
10. Install gunicorn to act as a webserver

11. Freeze requirements

12. Create a Procfile to tell Heroku to create a web dyno to run gunicorn to serve the Django app. This should contain the following:

13. Login to Heroku from your IDE using your API key as the password

14. Temporarily disable collectstatic so Heroku will not collect static files when we deploy- heroku config:set DISABLE_COLLECTSTATIC=1 --app team-lift-sprint

15. In Settings, create the following Config Vars

16. Add the Heroku hostname to ALLOWED_HOSTS in settings.py

17. Commit & push to GitHub 18.Initialise your IDE with Heroku and push to it.

19. In Heroku on the Deploy tab select GitHub as Deployment method

20. Search for respository and click Connect

21. Click Enable Automatic Deploys

1. Create an AWS account
2. Create a bucket for S3
3. Uncheck Block all public access and acknowledge settings

4. Enable static website hosting & Save changes.

5. Add default values for index, error doc & click Save.

6. In Permissions on CORS paste the following:

7. Click Edit in Bucket policy to create a security policy

8. Click Policy Generator and for Principal enter * and actions add Get Object

9. Enter the ARN from step 7.
10. Click Add statement

11. Click Generate Policy
12. Copy Policy JSON Document

13. Paste into Bucket policy (with slash & asterisk at end of Resource for full access) & Save changes.
14. Click Edit in Access Control List, check box for List access for Everyone & Save changes.

1. In AWS navigate to IAM, User groups, Create user group
2. Enter a name and click Create group

3. In Policies, click Create Policy

4. On the JSON tab, click Import managed policy

5. Search for S3 and import the AmazonS3FullAccess policy

6. Add in the ARN from the AWS Policy Generator page
7. Click Next Tags and Review

8. Add a name, Description and click Create policy 9.Attach the policy to the group created.
9. In User Groups select your group
10. In Permissions, click Attach Policies

12. Select the policy created & click Add permissions

13. In Users, click Add users
14. Add username and Access Type as Programmatic access & click Next
15. Select to add user to our policy, click Next and Create User
16. Click Download.csv to get your access credentials.

1. Install boto3

2. Install Django Storages

3. Freeze requirements

4. Add the following settings for Django to connect to S3

5.In Heroku Config Vars add the AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY and delete the DISABLE_COLLECTSTATIC variable 6. In settings.py tell Django where static files are located

7. Create a media folder on S3 and upload files

8. Select Grant Public Read Access to the objects

• Code Institute: Their sample README.md was used as a design guide for my ReadMe file.
• The site was based on the Code Institute Boutique Ado project and as such the majority of django models/form/quanity javascript/sort functionality are based on this logic, however they are tailored to my project needs.
• Deployment notes - Sneaker Dadi: Their sample README.md was used as a guide for my ReadMe deployment section above.
• Markdown help for this ReadMe documentation.
• Code Institutes pre-installed gitpod repository.
• Responsive image at the top of the ReadMe file is from Am I Responsive.
• Bootstrap 5: Link.
• Inspiration for the project was taken from mcsport.ie.
• Stripe styling provided from Stripe website on the checkout form, including payment processing spinner.
• Blog class credit:
  • (1) - https://dev.to/madhubankhatri/blog-website-using-django-55ji - Madhuban Khatri
  • (2) - https://www.youtube.com/watch?app=desktop&v=GcqURKYfv00 - CodingWithMitch
• Credit for help on product review - https://www.youtube.com/watch?v=reFJ9hBLFUY - Coding Stuff

• Products - The product images were taken either from Rogue or Mcsport
• Home page images from Unsplash:
  • Pitch - Link. Credit to Artist @thomascpark
  • Weightlifter - Link. Credit to Artist @Anastase Maragos
  • Team Photo - Link. Credit to Artist Alora Griffiths
  • Weight rack - Link. Credit to Artist @Rick Barrett

Link for font awesome “Button”/"Bag"/"Footer" icons: Link

Favicon creation at: Link

Link for Google Fonts: Link

• JSON Fixtures file help: From Code Institute
• Bootstrap Navbar: Link
• Support for creating the ReadMe file linked table of content: here and here
• Support from @jo_ci and related CSRF error on django 4.0 update - link

• Tutor support at Code Institute for their support.