My project is hosted on Heroku and can be found here.

1. Overview
2. Live Site
3. User Experience & Design
   • Goals
   • User Stories
   • Wireframes
4. Technologies and Tools
5. Features
   • Future Features
6. Testing
   • User Story Testing
   • Manual Testing
   • Code Validation
   • Unit Tests
   • Coverage
   • Bugs and fixes
7. Deployment
   • Requirements
   • Environment Variables
   • Cloning & Local Deployment
   • Continuous Integration
   • Heroku Deployment
   • Contributions
8. Credits
   • Acknowledgements

Hex Cosmetics is a fictitious new e-commerce site which is has a requirement to be user friendly store that is easy to navigate.

Hex Cosmetics provides a wide array of commonly used cosmetic products (mascara, foundation, lipstick etc.).

Hex Cosmetics also provides a range of different well known brands to enable site users to be confident in the quality of products that they are purchasing.

The site's home page easily allows a site user to select the specific type of make-up they are looking for, as well as being able to shop all products, or view the site's featured products or sale products.

NOTE: This is my final project in relation to my studies with Code Institute. This project should display the knowledge I have gained throughout the course, for the programming languages HTML, CSS, JavaScript & Python, while utilsing some of their associated open source libraries and frameworks.

My project is hosted on Heroku and can be found here.

The following test users can be used as required.

1. Superuser

• Username: admin
• Password: admin

2. Standard user

• Username: testuser
• Password: verysecretpassword

Below are some of the high level decisions taken to fit with common convention across most ecommerce sites:

• The navigation bar has been fixed to ensure a user can quickly navigate around the site to view other products, a user profile, access the search tool, or easily navigate to the basket.

• The home page contains cards which a user can select to view particular types of product, or allows them to navigate to all products (the search bar is also always available in the Navigation bar).

• The Home page also displays a large image of the HEX Cosmetics Logo to help instil brand awareness.

• Products are displayed in a consistent card format, and users can select the products to drill down into a detailed view of the product.

• Users are able to easily sort product views (e.g. price low to high) to aid their search.

• Feedback is given to users on major action taken across the site in using Django messages.

• Integrated with google to enable expedited user registration.

• Use of 'slugs' do display readable URLs. This improves user experience, looks more professional & can also assist with SEO.

• The user's basket total is available in the navigation bar at all times to allow them to easily identify their current spend.

• Contact, About & FAQ URLs can be found in the footer (and therefore available across the whole site).

• Users have the ability to sign up to the Hex Cosmetics Newsletter via the footer (so this can be used for targeted advertisement etc.).

• Links to social media profiles can also be found in the footer in an attempt generate further online engagement with users and increase sales.

• The initial plan was to implement pagination across the site (particularly for larger searches such as 'all products').

However, I decided that given the current product catalog wasn't particularly large, that implementing pagination would have a navigate impact on user experience (i.e. having to click to load more products).

Had the product catalog been much larger (or should it grow in future) then it would make sense to implement this to balance against the response time for loading more products.

The key design principle of this site, is to keep the site very visual and not overcrowded with text (excluding products details, given users may want to understand more about any given product). Site visitors will generally be looking for a specific product(s) (or type of product(s)), and therefore it needs to be quick and easy for them to locate and purchase them. The site therefore needs to be very intuitive, and have simple & easy to use navigation that is expected of e-commerce sites.

The target audience for Hex Cosmetics are:

• People who are looking for a one-stop shop for their make-up products.
• People who value buying products from known brands.
• People who want

User goals are:

• Easily find & purchase the makeup products that I want.
• Be able to navigate the shop quickly & easily.
• Feel confident that I am making a safe and secure purchase.
• Buy from a professional & trustworthy online shop.

The goals of the Hex Cosmetics business are:

• Provide a visually appealing online store that helps the user to feel safe that they are buying from a trustworthy source.
• Make sales of products easy for buyers to increase sales.
• Connect with customers through Hex Cosmetics social media/ increase social media following.
• Increase the Hex Cosmetics newsletter subscription.

In-keeping with the clean, modern & simplistic design for the application, the font 'Quicksand' was chosen as the primary font for this site.

Quicksand is a display sans serif with rounded terminals.

It is designed for display purposes but kept legible enough to use in small sizes as well, and therefore is perfect for use across and should not cause any issues with users reading text.

A standard Sans-serif font is used as a back-up font, should there be any issues with loading the Quicksand font, and should not cause any significant issue with the look and feel of the site.

The logo is light pink, with a white image that looks like eyelashes. This fits with the brand and products offered by HEX Cosmetics.

The logo also displayed the HEX Cosmetics name and tagline.

There is also a version of the logo which just has the image, and this is used as the favicon for the site.

The primary colour for the site is a light pink #f8bab1 colour and was selected due to its likeness to many makeup products, and it is a bright fresh colour that is aesthetically pleasing.

• #f8bab1 - Primary colour

This colour also matches the Hex Cosmetics logo, and therefore reinforces the brand look/ colour across the site.

This primary colour is offset across the site by 2 text colours - black + white.

• #000
• #fff

The black text is the main text colour across the site and is used for its readability, as well as the contrast against the white background.

The white text is used against light pink #f8bab1 backdrop, and is used to reinforce the brand colours (matching the logo etc.).

There are a few other colours used across the site (but much more sparingly):

Form text is grey and still offers a contrast to the white background, however provides a distinction from the black text that is used to display site/ product information.

• #6c757d

There is also the use of green (success), orange (warning), red(error) & lightblue (info) within the messages displayed on the site, and these offer a stark contrast to the primary colours used to draw the users attention to the message when it is displayed.

Back to Top

• HTML5
  • Used as the main language for the templates
• CSS3
  • Used for styling the webpage
• Bootstrap
  • CSS framework used to assist with website responsiveness.
• JavaScript
  • Used mostly for DOM manipulation upon user interaction
• jQuery
  • JavaScript Library to simplify and expedite JavaScript coding.
• Python
  • Used for backend data manipulation
• Django
  • Python web framework for quick development.
• Coverage
  • Used to calculate code coverage of python unit tests.
• Django-aullauth
  • Django authentication toolset
• Django Crispy Forms
  • to style the django forms.
• Jinja2
  • Used as the main language for template manipulation.
• Pillow
  • Python imaging library to support opening, manipulating, and saving images.
• Psycopg2
  • PostgreSQL database adapter for Python.
• Gunicorn
  • Python WSGI HTTP Server.
• AWS S3
  • Used to store static files.
• Boto3
  • Used to configure and manage s3 buckets
• Stripe
  • Payment infrastructure to validate and accept credit card payments securely.
• Git
  • To handle version control.
• GitHub
  • To store my project source code
• Gitpod
  • Used as my IDE
• Google fonts
  • Used for website fonts
• Font Awesome
  • To utilise the icon set.
• Canva
  • used to design site to create the logo for Hex Cosmetics.
• Balsamiq
  • used to create the wireframes for this project.
• Browserstack
  • To test responsiveness & functionality on various browsers.

• SQlite3
  • Used as development database.
• PostgreSQL
  • Used as production database and provided as heroku add-on.

Back to Top

The navbar (collapsable and reordered on smaller devices) can be used to navigate to different areas of the site depending on user interaction.

The navbar is fixed so that it can be selected by the user at all times for improved UX/ site navigation.

The links in the navbar are highlighted when hovered over, to give feedback to the user that they can interact with these links.

The website logo also acts as a link back to the home page, as is standard expectation for users.

The links displayed to the users change depending on whether the visitor is a registered user and in session.

This removes the unnecesary links to login or register, and displays links to view their personal profile details, as well as log out if required.

The navbar also displays the current value of a users basket, and this is also used to navigate to view the basket contents.

The navbar also contains the search bar, to enable users to search for products based on keywords (product name, brand name, description or category).

The footer displays links to helpful pages (About, FAQ, & Contact pages), as is fairly common convention across many websites.

The footer also allows users to sign up to the newsletter. It was intentionally added to the footer so that it would be available across the site and increase usage.

This could be used by the admin to utilise for targeted advertisement.

Also as is common convention, links to social media pages can also be found in the footer. This can help increase online presence and be used for further marketing activities.

Selectable icons & links in the footer should all have effects when hovered over, to give feedback to the user that they can interact with these links.

This slider is present on every page and it displays all products marked as featured in the products model.

The slider is looped so when a user looks through all of the products, it will start again from the first product.

This tool could be used to promote new products or best sellers etc. to increase sales across the site.

The search page displays all products that match the key words searched by a user.

The search page will tell the user how many results have been found for their search.

The products will be displayed as cards, as per the product views.

The home page has a large picture of the Hex Cosmetics logo, to try to reinforce the brand image.

Users can then select to shop all products, or shop by a particular type of product.

All categories are displayed in as cards, with an image of the type of product, and a banner which is labelled "Shop 'category'".

When hovered over, the image, banner, & text is enlarged, and the text changes colour.

This provides feedback to the user that they can interact and select the card.

When a card is clicked, it will redirect the user to a product view for the applicable product type, displaying all relevant products.

The product views contains a 'breadcrumbs' list at the top of the page, to improve navigation around the site.

This allows users to return to the all products view if currently viewing a specific category.

There is a sort button, which allows a user to select whether to view products with a price high-to-low, or low-to-high.

All products are displayed in a card style list, and contain an image of the product, and the product name, brand & price.

When a user hovers over the card, the image is enlarged, there is a shadow effect on the card, and some font changes colour.

This provides feedback to the user that they can interact and select the card.

When a card is clicked, it will redirect the user to the product detail of the selected product.

The product deatils view contains a 'breadcrumbs' list at the top of the page, to improve navigation around the site.

This allows users to return to the all products view or a category view.

This page expands on the product details already shown to the user.

A product description is contained in an accordion so can be displayed or hidden by the user.

There an a select list to enable users to select the colour of product that they wish to purchase.

There is an input field (with '+' & '-' buttons) to allow a client to select how many items they would like.

There is an add to basket button which will add the applicable product, colour & quantity to the basket.

In additon, superusers are able to edit or deleted products/ product colours via the product maintenance accordion on this page.

The edit buttons will redirect the super user to the appropriate edit product (or product colour) form, which will be prepopulated will the current details recorded in the database.

If a super user attempts to delete a product, they will be presented with a warning modal to confirm they want to delete the product first.

There is an order progress bar which highlights that the user is at the first step of the checkout process.

The items in the basket are then displayed in a tabular style format.

The applicable product details are displayed (an image, product name, product colour & product price).

The quantity the user has selected is also displayed, and can be updated as required.

If a user changes the value to 0 the item is removed from the basket (there is also a trash icon, which will remove the item from the basket).

If the user increases or decreases the quantity, the basket gets updates and a message is displayed to the client to confirm the change made. The basket total should update too.

The line item total is displayed (product price * quantity).

The total item costs is displayed (sum line items).

The total delivery charge is displayed.

The total cost is displayed (sum line items + delivery).

You are able to navigate back to the products view, or proceed to the checkout page.

There is an order progress bar which highlights that the user is now at the checkout stage.

There is an order for for a user to complete with their details & delivery details (prepopulated if already saved against the user profile).

There is also an order summary displayed to highlight the items to be purchased + total value of the order.

There is a stripe card element mounted to the page that a user can complete enter their card details.

A user can then submit an order or return to update their basket.

There is an order progress bar which highlights that the user is now at the confirmation stage.

This page is just a final confirmation of the order that has been placed (e.g. products purchased, delivery address & order number)

A user is able to return to the shop to view more products.

This page give a summary of the companies ethics and mission.

This page displays an accordion with a list of the most common questions that might be asked, so that a user can easily find the answer they require.

This pages displayes a form that a user can submit with their name, email address & any message or question that they have.

When the form is submitted then a message is displayed to the client to inform them the message was received and they will receive a response soon (assuming the form was valid).

I believe the following are features that should be built in future releases.

1. I think a boolean 'Active' field should be added to the products & colours models. This could allow products or colours to be removed from sale temporarily (or permanently without a full delete.)

This would be important if products or colours become discontinued, as currently the order model is set to PROTECT on delete, which prevents a product/ colour being deleted if there has been a previous order.

2. Currently there is no stock/ inventory management on the site. This should be implemented to prevent orders being made that cannot be fulfilled.

It would need to ensure that a user cannot add more items to the basket than is currently available, and a user is also not able tp purchase items that are now out of stock.

3. I would like to implement a wishlist, that a user can save their favourit products to.

I think this would act as a cross between the orderLineItem model and the basket, to enable a product & colour to be recorded and persist across sessions.

4. I would like to implement views for products that are on sale.

This would also require updates to the basket & checkout apps, as these currently use the product price to calculate order totals.

4. To improve brand exposure, I would like to implement a blog on the site, and have articles for all of the latest trends or items.

5. Complete further unit testing to cover all Python code.

6. Improved Admin functionality, such as the ability for a admin to mark orders as dispatched.

This could also notify the user that their order has been dispatched.

7. Ability for a user to unsubscribe from the newletter.

8. Additional payment methods (e.g. paypal).

Back to Top

1. As a user, I would like to be able to view a list of available products, so that I may identify if there are any products I would like to purchase

• I am able to select to view all products via the site home/index page.
• I am able to select to view all products via the products list in the navbar.
• I am able to select to view all products in a specific category via the site home/index page.
• I am able to select to view all products in a specific category via the products list in the navbar.
• I am able to select to view all featured products via the products list in the navbar.

2. As a user, I would like to be able to view individual products details, so that I may view the price and description etc.

• I am able to view the product name, brand, price and image when looking for products.
• I am able to select a product to view more information about that product.
• I am also able to view a description of a product, as well as all available colours for that product.

3. As a user, I would like to be able to View the total of my basket at any time, so that I may see how much money I will spend on the products I want to purchase

• I am able to view the total value of my basket (excluding delivery charges) via the navbar on any page across the site.
• I am also able to navigate to my basket to see the total value (including delivery charges) via the navbar at any time.

4. As a user, I would like to be able to sort the list of products, so that I may easily identify the best-priced products.

• I am able to sort all products by price high-to-low & low-to-high when viewing all products.
• I am able to sort all products by price high-to-low & low-to-high when viewing all products in a specific category.
• I am able to sort all products by price high-to-low & low-to-high when viewing all featured products.

5. As a user, I would like to be able to search for a product by name or description, so that I may find a specific product I would like to purchase.

• I am able to search for a product based on product name.
• I am able to search for a product based on product description.
• I am able to search for a product based on brand name.
• I am able to search for a product based on product category.

6. As a user, I would like to be able to easily see what I have searched for, so that I may quickly decide whether the product I want is available.

• When I search for items, I am displayed a message to confirm the number of results for my search.
• If there are no results for my search, I am displayed a message to inform me.

7. As a user, I would like to be able to register for an account, so that I may have an account to be able to store my details for repeat use.

• I am able to register for an account/ profile.
• I am able to record & update my personal details on the profile for repeat use.

8. As a user, I would like to be able to login or logout, so that I may to access my account and help ensure security of my personal information.

• (if not logged in) I am able to log in to my account via the navbar at any time, or when checking out
• (if logged in) I am able to log out of my account at any time, via the navbar.

9. As a user, I would like to be able to log into my account via an existing social or email account, so that I may speed up the registration process.

• I am able to register for/ log into an account via my Google account.
• I can select the button to log in via google, then select which google account I wish to use.
• I am then logged into my account.

10. As a user, I would like to be able to recover my password, so that I may recover access to my account if I forget my credentials.

• I am able to navigate to the forgot password page, via the log in page.
• I am able to submit the email address for my account.
• I receive an email to my email address with a link to reset my password.
• I am able to set a new password by using the link sent to me on email.

11. As a user, I would like to be able to have a personalized user profile, so that I may view my order history and store delivery information for future use.

• When I create an account, I view the details stored on my profile via the profile link on the navbar.
• I am able to save & amend my personal details (e.g. name, email address) via the profile.
• I am able to save & amend my delivery details (e.g. address) via the profile.
• I am able to save & amend my personal details (e.g. name, email address) when processing an order.
• I am able to save & amend my delivery details (e.g. address) when processing an order.

12. As a user, I would like to be able to easily add items to my basket, so that I may purchase the items.

• I am able to add a product to my basket via a button when viewing a product's details.
• I am able to select the colour of the product I wish to add to my basket.
• I am able to select the quantity of the product I wish to add to my basket.

13. As a user, I would like to be able to easily remove items from my basket, so that I may remove items that I no longer wish to purchase.

• I am able to navigate to my basket via the navbar.
• I am able to reduce the quantity of a product to 0, and the item is removed from my basket.
• I am also able to select the 'trash' icon and the product is removed from my basker

14. As a user, I would like to be able to easily edit the quantity of items in my basket, so that I may purchase the required number of products.

• I am able increment the quantity in my basket by pressing the '+' button against the product I wish to increase the quantity.
• I am able decrement the quantity in my basket by pressing the '-' button against the product I wish to decrease the quantity.
• I am able to type in a numeric value for the number of items I wish to purchase.
• I am able to see my basket has been updated when I change the quantity of a product in my basket.

15. As a user, I would like to be able to easily view all items in my basket, so that I can check what products I have selected to purchase.

• I am able to see a list of products (colours, quantity & price) that have been added to my basket.

16. As a user, I would like to be able to view the total cost of the products, so that I may identify the total cost of my purchase and all the products I wish to purchase.

• I am able to easily identify the cost of each product.
• I am able to easily identify line item total based on the quantity of product I wish to purchase.
• I am able to easily identify the total value of all items in my basket.
• I am able to easily identify if there is a delivery charge.
• I am able to easily identify the total value of the order (including delivery).

17. As a user, I would like to be able to enter my payment information, so that I may check out and pay for the products I want to buy.

• I am able to enter my card details into a payment field.
• I am able to submit my payment and order.

18. As a user, I would like to be able to feel my personal and payment information is safe and secure, so that I may confidently provide the needed information to make a purchase.

• I am able to see a payment form that is familiar in format to other reuptable companies.
• I receive clear errors if incorrect details are input into the field so I can trust there is validation occuring.

19. As a user, I would like to be able to view an order confirmation after checkout, so that I may verify that I have not made any errors and confirm that my order has been submitted.

• I am taken to an order success page following a successful checkout which reconfirms details of my order.

20. As a user, I would like to be able to receive an email confirmation after checking out, so that I may keep the confirmation of what I have purchased for my records.

• I receive an email following a successful checkout to confirm my order has been placed.

21. As a user, I would like to be able to view a list of frequently asked questions, so that I may identify the answer to a query I may have.

• I am able to navigate (via the navbar or footer) to an FAQs page.
• I am able to see a list of FAQs that answer my query.

22. As a user, I would like to be able to view details about Hex Cosmetics, so that I may so that I can become more familiar with the brand.

• I am able to navigate to the about page via the navbar,
• I am able to view details of the companies ethics and mission.

23. As a user, I would like to be able to subscribe to the Hex Cosmetics newsletter, so that I may so that I can keep up to date with the latest products & offers.

• I am able to subscribe to the newsletter via the footer (available on every page).
• I receive a message to confirm that I am subscribed.

24. As a user, I would like to be able to find Hex Cosmetics on social media, so that I may so that I can follow the brand and keep up to date with their latest content.

• I am able to navigate to the social accounts via the footer (available on every page), so that I can like, follow & subscribe.

25. As a user, I would like to be able to contact Hex Cosmetics, so that I ask any questions that I have.

• I am able to navigate (via the navbar or footer) to the contact page.
• I am able to submit my query via a form on this page.
• I receive a message to confirm the message has been received and an indication of when to expect a reply.

26. As an admin, I would like to be able to add a product, so that I may add new products to the store.

• I am able to navigate to the add product page via the navbar.
• I am able to complete a form for all the required details to add a new product.
• I am then redirected to the add colour page, so I can add the required colours for the product.
• I receive an error message if any details are not completed correctly.

27. As an admin, I would like to be able to edit a product, so that I may change product prices, descriptions, images and other criteria.

• I am able to edit a product via the product detail view.
• I am able to edit a product colour via the product detail view.
• I am able to view the details already recorded and update required fields.
• I receive an error message if any details are not completed correctly.

28. As an admin, I would like to be able to delete a product, so that I may remove products that are no longer for sale.

• I am able to delete a product via the product detail view.
• I am able to delete a product colour via the product detail view.
• I receive a warning to confirm I want to delete the record.

• Use of Google DevTools to identify any console errors.
• Constant iterations of bootstrap grid reviews to ensure responsiveness across the site (also with Google DevTools)
• Repeat checks to make sure all css & js effects worked as expected.

1. Navbar

• Hover over icons/ links and confirm highlighted as expected.
• Click the logo and confirm I am returned to the home/index page.
• Click each link in the navbar to confirm that it leads to the correct page.
• Confirm that when logged out the options "Register" and "Log in" are visible in the profile list.
• Confirm that when logged in the options and that "My Profile" and "Log out" are visible in the profile list.
• Click the "Products" link in the navbar, confirm that all categories are listed.
• Add an item to the basket, confirm that the basket total is updated.
• Remove all items from the basket & confirm the value returns to £0.00

2. Footer

• Hover over icons/ links and confirm highlighted as expected.
• Click each link in the navbar to confirm that it leads to the correct page.
• Try to subscribe to newsletter without email & confirm a prompt to complete the field is received.
• Try to subscribe to newsletter with email & confirm a message is displayed to show that I have subscribed.

3. Featured items slider

• Check that the images slide by mouse click & slide and by finger swipe on mobile devices.
• Check the images slide by clicking/ pressing the arrow buttons to move through the images.
• Hover over the images and confirm the applicable javascript works as expected.
• Select the products & confirm I am redirected to the product detail page.

1. Home Page

• Click categories to confirm that it redirects to the correct category / view of products.
• Hover over the images and confirm the applicable javascript works as expected.

2. All Product

• Click products link to confirm that it redirects to the correct product detail view.
• Test the 'sort by' button and confirm products are ordered correctly based on selection.
• Hover over the images and confirm the applicable javascript works as expected.

3. Category product view.

• Same tests as per 2.
• Test that the breadcrumb allows me to return to the all products view.

4. Product detail view.

• Test that I am able to collapse the description accordion.
• Check that only the colours applicable to the product can be selected.
• Test that the product increment decrement buttons change the value as expected.
• Test that I am unable to input a non-numeric character into the quantity input box.
• Test that the breadcrumb allows me to return to the all products view or the applicable category view.
• Test that the category tag returns me to the applicable category view.
• Test that I can add the product, colour & quantity to the basket.
• Test that I receive a message to confirm the product has been added to the basket.
• Test that the product maintenance accordion is only visible if logged in as superuser.
• Test that the superuser can show the accordion body.
• Test that the superuser can navigate to the edit product page.
• Test that the superuser can navigate to the edit product colour page.
• Test that the superuser is displayed a warning modal if attempting to delete a product.
• Test that the superuser is displayed a warning modal if attempting to delete a product colour.
• Test that the superuser can delete the product.
• Test that the superuser can delete a product colour.

5. Edit Product / Product colours

• Test that the applicable product details are pre populated into the form.
• Test that I am able to update product detials.
• Test that if I cancel the edit, I am returned to the applicable product detail page.

6. Add Product / Product colours

• Test that I am able to add a product.
• Test that I am redirected to add a product colour after adding a product.
• Test that I am returned to the products view if I select cancel on the add page.

7. Search

• Test that I am able to search for key words and be displayed appropriate results.
• Test that I can see how many results are found for my search.
• Test that I receive a message if no results are found.

8. Basket

• Test that all items added to my basket are present.
• Test that I can increase and decrease the quantity of a product using the '+' & '-' buttons.
• Test that I can type in the quantity of a product that I want.
• Test that I am unable to input a non-numeric character into the quantity input box.
• Test that the basket is updated when I have finished updating the quantity.
• Test that items are removed from the basket if the quantity is changed to 0.
• Test that items are removed from the basket if the trash icon is selected.
• Test that the delivery charge is correct based on the value of items in the basket.
• Test that the total value of my order is correct based on the price of the items in my basket + delivery costs.
• Test that I can progress to the checkout page.
• Test that I can return to the products view.
• Test that the order progress bar highlights that I'm currently at the basket stage.

9. Checkout

• Test that all items added to my basket are displayed in the order summary.
• Test that the total value of my order is correct based on the price of the items in my basket + delivery costs.
• Test that my personal information is prepopulated into the order form, if it has previously been saved.
• Test that I am able to return to my basket to adjust my order.
• Test that I am add my details & card details and submit my order.
• Test that I am redirected to the confirmation page after a successful checkout.
• Test that I am able to save the order form details to my profile for future use.
• Test that my order form details are not saved if I do not select that option.
• Test that the order progress bar highlights that I've progressed past the basket and now at the payment stage.

10. Checkout success

• Test that the order number is displayed.
• Test that an email is sent to confirm the order has been placed.
• Test that the appropriate order summary replayed.
• Test that the correct delivery details are displayed.
• Test that the order progress bar highlights that I am at the confirmation stage.
• Test that I can return to the products view.

11. Contact

• Test that I can view the contact pages
• Test that I can toggle the accordion on the FAQs pag to view the answers to relevant questions.
• Test that I can submit a query via the contact form.
• Test that I receive a message confirming that the query has been received.

12. Profile

• Test that I am able to view the details recorded on my profile (name, email, phone number, address).
• Test that I am able to update these details.
• Test that I am able to view my order history and view the details of those order.
• Test that I am able to update my password.

• HTML validation with W3C Markup Validation Service. My code is fully compliant and there are no errors.

  • When completing the validation, I came across a few minor errors:
    • A couple of stray div end tags.
    • Missing alt attributes for a couple of images.
    • Some duplicate ids (see bug 3 for more detailed explanation)

• CSS validation with W3C CSS Validation Service. My code is fully compliant and there are no errors.

• Javascript validation with JSHint. My code is fully compliant. There are some warnings about the undefined $ variable being used (e.g given the use of jQuery in my js files).

  • When completing this validation, I also identified a few missing semi colons from my code.

• Python validation with PEP8 Online. My code is fully compliant, and there are no errors.

  • When completing the validation, I came across a few minor errors:
    • Mostly, these were lines being too long. I have updated the majority of these. There are some instances where I have intentionally left the line 'too long', where it would the code too unreadable.
    • It identified a couple of cases where imports were not being used, so I have removed them.
    • It also identified a couple of cases where variables had been assigned but not used.

To run the existing Python tests:

1. Activate your IDE.
2. In the terminal enter the following command: python3 manage.py test
   • If you wish to run the tests for a specific app you can enter the following command: python3 manage.py test <app name>
3. The test results will be shown within the terminal.

NOTE: Depending on your IDE, the Python command may differ, such as python or py

Coverage.py was used to provide feedback during testing. This was invaluable to identify which parts of my code the tests had covered.

My code coverage currently stands at 84%, and covers most major functionality.

I would like to increase this coverage as close to 100% as possible, but due to time constraints, this will need to wait for a later release.

To view the coverage, you can run the following commands:

1. coverage run --source=. manage.py test This will run all tests/
2. coverage report The coverage will be shown within the terminal, broken down by .py file.
3. You can view an interactive version by using coverage html, and then python3 -m http.server, and you can view the htmlcov folder in the browser, select specific files, and view which particular sections of code are or aren't being covered by the e

I tested the following browsers across my personal devices:

I also used BrowserStack to view my site across all of the latest (non Beta/Dev) browsers.

• Safari 12.1
• Firefox 84
• Chrome 87
• Opera 73
• Edge 87

The compatability across all of the browsers was excellent and functioned as expected, and all styling & JavaScript worked as expected.

This testing highlighted one instance where the responsiveness wasn't working as intended and enabled me to update this.

The above is the results of a Google Lighthouse report generated on the index.html landing page of the site on desktop.

Lighthouse enabled me to identify various issues and implement change across my site such as:

• Addition of various Accessibility & SEO items, such as;

  • Addition of Meta description
  • Addition of aria labels or applicable elements

• To revisit responsiveness across the site due to image resizing, while still not perfect, this helped improve the performance result.

To improve performance, Lighthouse suggests improvements such as resizing images and/or serving these images in next gen formats.

At the moment, this isn't feasible across the site, as the majority images are all sourced externally (the category images & logo images could be resized to improve performance).

However obtaining correctly sized images should be considered as a future enhancement should the site grow and have more content to be loaded. These images could be hosted in the S3 bucket.

1. The first interesting bug/ hurdle I encountered was when implementing the sorting filter (by price). The issue I found was that when I initially created the function, the URL was only designed to pass in the sort type and direction, and thereore if I had already filtered the list to a specific category, using the sort order returned all products.

   • To fix this I needed to pass in the category (if it had be selected). I utilised slugs to help acheive this (which also improved the URL naming) and passed these arguments into the all_products view.

2. Following the implementation of slugs, I had the issue when attempting to view 'all products' as I was getting a NoReverseMatch error, in this case because a category slug was not being passed into my href url against each product.

   • To fix this I created the get_absolute_url model method in the product class, to allow me to obtain the category slug via the Product Class, and pass this, and the product slug as args.

3. I have multiple forms/ models which have an email field include. When using django crispy forms, this was creating elements with the same ID. This wouldn't be an issue, except the subscription form is passed to every page via a context processor, and therefore was creating some duplicates.

   • To fix this, I simply update the field name from email to email_address, and this meant when two forms were on the same page, that they had different IDs.

4. When updating the quantity in the basket, I was submitting the form each time a user clicked the increment/ decrement button, which was updating the quantity as expected, but sometimes resulted in multiple messages being displayed on screen.

   • To fix this, I added a timer, so that the form would only submit 1 second after the button had been pressed, and the timer would be reset.

5. Following bug/fix #4, I wanted the form to reload when a user typed a quantity also (has the same timeout logic). Therefore I created an event listener to submit a form when a updated the input field via their keyboard. This inadvertently, allowed users to submit non-numeric chars.

   • To fix this, I added some more JavaScript to prevent the input of non-numeric characters (see credit #4)

6. I noticed that if I accessed my search view directly via URL, then it searched based on 'None' and returned no results.

   • To fix this I updated the search_result view to return a count of products. If there were no results, then this redirects the user to the products page.

In total I identified approx. 70 minor tweaks and changes that I wanted to make following this testing. Many of these had similar themes (e.g. typo or responsiveness), so some examples/ larger issues are below.

1. Identified that in my basket, the images of the products were not a tags that linked back to the product, so I updated this.
2. The input prepend/ append buttons were displaying over the navbar, so I changed the z-index of place them behind the navbnar.
3. I noticed that I had not included featured products in the breadcrumbs, so I was able to add a 'featured' boolean to the context and display a breadcrumb item if applicable.
4. I noticed that if a user had no orders, the text on the order history still said to view orders below. I added a count to the context to display different text if no orders.
5. When testing responsiveness across the site, I noticed on smaller screens that where multiple buttons were close to each other, they sometimes touched. I therefore just added a margin to the buttons.
6. I noticed that on products where only 1 colour was available, text said '1 colours available', I added a count to the context and only displayed the s where there was more than 1 colour.
7. When I went to edit a product, but cancelled, the view returned me to all products, rather than the product I was on. I therefore changed the view to return me back to the specific product.
8. A couple of messages had typo's in them, so these were updated accordinly (as well as in the corresponding unit tests).
9. Various typo's across the site were updated.
10. Some pages had missing {% block head_title %}. I therefore added these accordingly.
11. Some styling inconsistencies were identified and updated (e.g. some elements did not have rounded edges as per site theme).

Back to Top

To allow you to access all functionality you will require access to the following (free services are sufficient):

• Stripe

  • Test Keys
  • Webhook Secret

• AWS

  • S3 bucket

• Google Account

  • App Password

Documentation above to confirm how to create the account, and locate the required environment variables.

For Local Deployment, you can replace PRODUCTION with DEVELOPMENT. This will set DEBUG to TRUE.

The site can be cloned to your local repository as follows steps - GitHub guide:

1. On GitHub, navigate to the main page of the repository.

2. Above the list of files, click the 'Code' button. To clone the repository using HTTPS, select HTTPS and copy the URL.

3. in your IDE, change the current working directory to the location where you want the cloned directory.

4. Type git clone, and then paste the URL you copied earlier - git clone https://github.com/<USERNAME>/<REPOSITORY> - and press enter.

5. The clone will be created.

6. Install all required modules using the command

   • pip3 install -r requirements.txt.

7. Migrate the models to create your test database (i.e. in SQLite) using the following command.

   • python3 manage.py migrate

8. You can load the fixtures using the following commands (they must be completed in order).

   • python3 manage.py load data categories
   • python3 manage.py load data products
   • python3 manage.py load data colours

9. Create your superuser to access the django admin panel and database using the following command (then follow the instructions in your command line)

   • python3 manage.py createsuperuser

10. You can now run locally using the following command.

    • python3 manage.py runserver

NOTE: Depending on your IDE, the Python command may differ, such as python or py

You can implement automated testing before deployment to ensure that all tests are passed prior to changes being deployed to the live site.

Instructions for setting this up can be found at Travis-CI

1. Sign up to Travis CI via your Github profile.
2. Grant Travis CI with the required authorisations to your Github.
3. Activate your account and select your repo to connect for Travis-CI.
4. Travis-CI will run the .travis.yml file and provide feedback if there are any errors preventing deployment (i.e. failed tests or missing environment variables).

To deploy this site to Heroku, complete the following steps:

1. Create a Heroku account and log in.
2. Create a new app in Heroku
3. In the settings tab, set the Environment Variables detialed above
4. From the Heroku dashboard of your application, click on "Deploy" > "Deployment method" and select GitHub.
5. Connect to the appropriate GitHub repository.
6. Set the project up for automatic deploys it will deploy once the master branch is updated.
   • OR in the manual deployment section, select the master branch and click 'Deploy Branch'.
7. You can also select the option for 'Wait for CI to pass before deploy', which will ensure the Travis-CI build is successful prior to deployment.
8. The site should be successfully deployed.

If you do not set the project up for automatic deploys, you are also able to push updates from your command line.

• login to Heroku using the command heroku login and complete your user details.
• Push to Heroku using the command git push heroku master.

1. If you wish to implement changes to the code, I would recommend creating a separate branch, as this will keep the original master branch as a backup if the any issues arise.
2. Use git checkout -b <branchname> to create a new branch.
3. You can now edit the code accordingly.
4. Once you have made changes, you need to stage the changes to be committed. You can do this as follows git add <filename> for a single file or git add . to stage all updated files.
5. You then need to commit the changes. You can do this as follows git commit -m "summary of updates".
6. Use git push origin <branchname>to push the changes to the branch in the repository.
7. You will need to merge these changes to the master branch in order for them to be deployed to the live site.
8. To do this, switch to the new branch on GitHub using the branch selector dropdown menu.
9. Create a new pull request, note the changes made in the comments section, and merge.

Back to Top

1. kaggle my fixture data was obtained from this dataset. I then pruned the data to extract the relevant data that was loaded into the project.
2. TheBrandBoy the content of my about us page was copied from this page, and the wording altered slightly for grammatical purposes.
3. mdbootstrap the order progress section in my basket/checkout pages adapted the code found on this page (html & css).
4. Stackoverflow I adapted the solution on this page to stop non numeric characters being entered into the input box on the basket page.

• kaggle The Kaggle data set contains applicable URLs to all product images across the site.
• Pixabay The category images were sourced from the Pixabay images library, and are all free for use, sharing or modification.

• learndjango + CI Tutor Miklos Sarosi for guidance on implementing slugs into my project to assist with 'bug #1 / #2'.
• Code Institute For the excellent overall content & mini projects within the course.
• ckz8780 - Github ckz8780's fantastic Django module produced for the Code Institute has been invaluable in providing guidance for creating key functionality across the project.
• Django documentation for guidance on the setUp and tearDown test methods to keep the database clean.
• Django documentation for guidance on the available testing tools and required arguments to be passed etc.
• Stackoverflow for guidance on transforming data for assertQuerysetEqual tests.
  • w3schools for explanation of Lambda function.
• Stackoverflow for guidance on testing messages.
• Stackoverflow for guidance on how to fix an issue when testing the order model which was preventing me from matching values due to floating point imprecision.
• CI Tutor Kevin, for his guidance on test unit testing for my basket. I was having an issue with passing the correct data in the post request (which was resulting in a 404 error), and Kevin pointed out that I had incorrectly named a parameter that I was passing as post data.
• Flickity for guidance on the styling of the slider for my featured products.
• Medium for guidance on how to set up the Google social login/ registration.
• Travis-CI for guidance on how to create the .yml file for my continuous integration builds + ensuring all tests pass before deployment to Heroku.
• Stackoverflow for guidance on creating custom error templates.
• Stackoverflow for guidance on the timeout issues I was having when updating the basket quantity, see bug/fix #4.
• w3schools for guidance on how to update the input field so the default up/down arrows weren't displayed.

Back to Top