• As a first-time user, I want to easily understand the site's primary purpose and learn more about the products.
• As a first-time user, I want to navigate through the site to find products quickly.
• As a first-time user, I want to be able to create an account easily and sign out
• As a first-time user, I want to be able to read reviews from other users giving me a deeper understanding of the product.
• As a first-time user, I want to be able to use filters and a search bar to find products quicker and alter my search

• As a returning visitor, I want to be able to see what i have purchased in the past
• As a returning visitor, I want to be able to reset my password if i have forgotten it
• As a returning visitor, I want to be able to update my delivery information
• As a returning visitor, I want to be able to make reviews on products

• As the site owner, I want to be able to Add new products to the site
• As the site owner, I want to be able to Edit products currently on the site
• As the site owner, I want to be able to Delete products from the site

• The two primary colours are black and white. I wanted the site to be simple, so the main focus is all on the products.

• Imagery is really important because the colour scheme is so simple it allows the images to be the star of the show. When you go into the site, the first image you see is an image of a transparent mug and cup with herbal tea inside. I love this picture so much because it's bright, simple, and a perfect way of adding more colour to the site while setting the rest of its mood.
• The only other images that are shown throughout the rest of the site are products. I got the products images from google using the licence free to modify, share and use or from adobe stock images that i have purchased.

• Responsive to all device sizes
• When any products are added to the bag an alert is shown with the updated bag
• Fully functioning checkout system in place using stripe
• Users can log in and out
• Users are able to make reviews
• Users are able to view order history
• Superusers are able to add, edit and delete products
• Fully functioning emails sent out

• HTML5
• Python
• JavaScript
• CSS

• Bootstrap was used to assist with the responsiveness and styling of the website
• Google Fonts were used to import the fonts used throughout the site
• Font Awesome was used to add icons to the site such as the search icon, the bag icon, the person icon etc.
• jQuery came with the bootstrap to make the navbar responsive but was also used for the smooth scroll function in JavaScript
• Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to Github
• Github is used to store the project's code after being pushed from Git
• Balsamiq was used to create the wireframes during the design process
• AWS was used for S3 storage
• Gmail was used to send emails from the site to customers
• Stripe was used in checkout giving the ability to process payments
• Adobe Stock was used to acquire specific images. Images such as the hompage image were purchased through Adobe Stock
• Photoshop was used to resize some images

The Stripe functionality within the site is only for testing. Please use 4242 4242 4242 4242 as the card number, 04/24 as the expiry date, 242 as the CVC and 42424 as the ZIP.

• Upon entering the site, users are automatically greeted with a clean and easily readable navigation bar to go the page of their choice and a search bar to go straight to the product of their choice. Underneath there is an Image with the text "Explore our wide range of teas" and a "Shop Now" call to action button.
• The title makes it clear what the primary purpose of the site is
• The user has two options, click the call to action button or use the navigation buttons to view the products.
• When the user clicks into each product, there is a summary of the product allowing them to learn more about it.

• The site has been designed to be fluid and never to entrap the user. There is a clean navigation bar at the top of each page; each link describes what page they will end up at. The navigation is fixed on the screen so no matter how far down the screen the user scrolls, they will never be stuck.
• There is a button to take the user back to the top of the page on all screens at the bottom right-hand side on the All Products, Tea and Teaware pages. So the user doesn't feel trapped when they get to the bottom of the page. On smaller screens the button also appears in checkout.
• The site has a search bar so the user can easily find any product they want effortlessly.
• On each products page, there is a filtering system so users can sort by: Price, Rating, Name, Category

• By clicking on the My Account icon, users can register or log in
• The user is easily able to register an account by simply filling in the form which asks for their email, username and password. Once the form has been filled out they will recieve a verification email. Once they have clicked the link to verify their account, there profile will be up and running.
• Once the user is logged in the My Account icon changes to give the user the ability to view their profile or logout. Once logout is clicked to verify the user does indeed want to logout they are taken to a page which allows them to cancel and go back or press sign out which will log them out and return the user to the home page

• Once the user clicks on the product they like, it takes them to a product page which shows, the product, product description, rating and reviews.
• The reviews on the products pages are made by customers who have purchased from the company before.

• No matter what page you are on the search bar is always there at the top of the page, allowing users to find products quicker.
• When searching through the product pages, there is a sort by the filter at the top right of the screen allowing users to adapt the filter to show what they want to be displayed first whether it be sorting them by name, price, rating or category—thus allowing users to alter their search.

• Users can easily log in using the My Account icon, which gives them two options to log in or register. Returning visitors can click login and use their username and password to log in.
• My favourite feature is the remember me box, which is excellent for returning users. Once Remember me is pressed their login details will come up automatically making the login process even more comfortable.
• The site is made to be as simple to use as possible. I wanted users to log in and out just as quickly as moving from one page to another.
• Once the user is logged in the My Account icon changes to give the user the ability to view their profile or logout, once log out is clicked to verify the user does indeed want to logout they are taken to a page which allows them to cancel and go back or press sign out which will log them out and return the user to the home page.

• When a user is logged in, if they click the My Account icon, it will show two options My Profile and Logout. If they click My Profile, it will take the user to their profile where they can see their order history. If they click on the order number, it will take them to their full order if they need to review the entire order.

• If the user clicks on the product, they want to review and clicks on the Make Review button In the reviews section, they will be redirected to a review form they can fill out.

• When a user is logging in, there is a link called "Forgot Password?" when clicked the user is redirected to a page called Password Reset which allows the user to reset their password by entering their email address. They will then recieve a link via email which once clicked will take them back to the site to reset the password.

• When a user is logged in if they go to their profile, there is a form showing their current default delivery address. They can change whatever they need to change and press the Update Information button to update it.

• Only Users who are logged in are able to make reviews. So as a returning visitor all they have to do is log in to make a review.

• When the superuser is logged in the My Account icon when clicked will show three options: Product Management, My Profile, Log Out
  When Product Management is clicked, the user will be redirected to a page where they can add a product by filling out the form.

• When the superuser is logged in. If they click on the products page they, unlike normal users, will have two buttons near the rating of each product one called 'Edit' and the other called 'Delete'. Once Edit is clicked the user is redirected to a page called 'Edit a Product' where there is a form pre-filled with all the products information, the user can edit whatever they want then press the Update Product button.

• When the superuser is logged in, if they click on the products page they, unlike normal users, will have two buttons near the rating of each product one called 'Edit' and the other called 'Delete'. Once Delete is clicked the item will be deleted.

• Once the order has been placed, the Email Confirmation is supposed to be sent to the user's email. However, the emails are not being sent out. I have investigated this but unfortunately could not figure out why this is happening as on the two other occassions emails are supposed to be sent out they are working.

When going through my code, you will notice I have deleted my migrations and re-added them multiple times because an error was occurring on my site stopping me from checking out, so i had to remove Postgres from my project then re-add it numerous times. This was a random postgres error and is no longer affecting the site.

The project was developed using Gitpod, commited to git and pushed to Github. My GitHub is linked with Heroku, so anything i pushed to GitHub automatically got deployed to Heroku. I used AWS S3 as storage. When i pushed my code to Heroku i had to make sure all my static files were in my storage AWS S3 as otherwise none of my images or CSS would show.

• Log in to Githun and locate the GitHub Repository
• Under the repository name (golden_health), click the "Clone or download"
• To clone the repository using HTTPS, under "Clone with HTTPS" copy the link.
• In your local IDE open Git Bash
• Change the current working directory to the location where you want the cloned directory to be made
• Type git clone, and then paste the URL you copied from the clone in the HTTP's section
  git clone https://github.com/saffiya/golden_health.git
• Press Enter. Your local clone will be created

• Bootstrap is used throughout the project to make the site more responsive
• Balsamiq is my favourite site for making wireframes and is the site i used for this projects wireframes
• AWS S3 is used for storage
• Code institute full stack development videos were a big help in the development of this project
• Font Awesome was used for icons
• Google Fonts was used for the fonts used throughout the site
• For help in figuring out the layout of this read me i followed the Code-institute-Solutions sample README

I used Adobe Stock to but some images used in the site. I also got images from google using the free to use and modify license and i also got some from freepik.

• The tutor support team for all the help when i got stuck
• I looked to vlad opreas code on dream woolies for the implementation of some of the review section used in my project
• My mentor for continuous helpful feedback.