Shop Now

The Shop Now is a website for the Shop Now business. The websites main purpose is the sell glasses and hats to people online in a secure way.

Link to project:

https://ehnvik-shop-now.herokuapp.com/

User Stories

As a customer, I would like to _____

be able to see what the shop has to offer, so that I can decide if I want to by any of the products
be able to view individual product details, so I can get more information about the product before making an purchase decision
have a easy overview over the website, so I can navigate myself on it
identify deals and new products so I can save money on products I want to buy or buy the latest products on the website
be able to view the total of my purchase at any time so that I don't spend too much
be able to search for a product by name or description so I can find a specific product I'd like to purchase
be able to sort the products by price or rating so I can find the best reviewed products or the best priced products
have a summary of the products I have chosen, so I can decide if I need remove or change a product before buying it
be able to feel that my personal and payment information is secure so that I can confidently provide the needed information to make a purchase
be able to store my personal information and order history in my profile so I can go back and view it in the future and also make future purchase more easy
be able to receive an email confirmation after my purchase so that I can verify that I haven't made any mistakes
be able to reset my password if I forget it so that I can log in to my profile again
be able to adjust the quantity of the specific item in my bag so that I can easily make changes to my purchase before checkout
follow the store on social media so I can find the latest products or deals

As a store owner, I would like to _____

be able to update and delete information on the website so I can improve the store
be able to add new products so that I can add new products to my store

UX

All the important navigation links are located on top on every page
The forms are easy to understand with clear placeholders
The products on the website are easy to find in the search bar
If the customer don´t know the name of the product, then they can easily find using the filter functionality
The toast pop up windows gives the customer a confirmation respond when making a change on the website

Features

Navigation

On the top of the page you find the navigation bar. The navigation bar is in the color white. It has the same info on every page.
The customer can connect to all the websites pages from the navbar.
The customer can search for a specific product in the search bar. It is possible to search for a product by its name or description.

Main Page

The main page contains a background image that has a hat and glasses theme.
The customer gets information that the "new collections are here".
The customer can jump to the all products page by clicking the "Start Shopping" button.
Above the background image is a information banner that gives the customer information about how much they have to spend to get a free delivery.

Footer

The footer has the same orange and white theme as the rest of the page so the page feels more united.
The footer contains a direct link to the Shop Now facebook page. Where customer finds information about the stores latest deals and products.

Product Page

The product page is divided in to 4 different categories. Hats, Glasses, New Arrivals and Deals. That gives the customer a opportunity to look for a product in a specific category.
The customer is able to sort the products by name, price, category or rating which helps the customer to find he or she is looking for.
On top of the page is a button that sends the customer to the all products page which helps the customer to find the products on the website.
The product page gives information of how many products that are viewd on the page.
The store owner can delete or edit products on the page. Which is an easy way to improve the website.

Product Detail Page

The customer can choose between different sizes on hats. So the customer can buy the correct size that fits.
The customer can choose how many of the same product they want to buy, if the want to buy several of the same product.
If you click on the product picture a new window opens up with a larger picture of the product. So the customer have a better view of the product they want to buy.
Admin can edit and delete the product on this page also.
The customer gets a preview of the shopping bag when adding or updating a product. So they always know what products they have in the bag and how much they cost.
The customer gets notified that they need to spend a minimum of 25$ to get free delivery if they add a product that cost less than 25$.

Shopping Bag

The customer gets a summary of shopping bag before going to checkout.
The customer have the possibility to change, add or delete a product before going to the checkout page.
The customer can click on the button "Keep shopping" if they forgot to buy something.

Checkout Page

The customer gets a last summary of the products they are about to purchase.
The customer are able to fill in their personal information so the product is sent to the correct adress.
The customer are able to pay with their credit card in a secure way using webhook. So the company gets the money and the customer gets the product.
The customers personal information gets automatically added to the fields if they are logged into their profile.

Checkout Page Success

The customer gets a summary of the purchase so they can verify that the order is correct.
A confirmation email with the order information is sent to the customers email, so the customer knows the order is complete.
The customer can go to the latest deals by clicking on the "Now check out the latest deals!" button below the order summary. If they want to keep shopping.

Profile

The customer can register a profile on the website using their email address.
Before the profile is valid they need to confirm their email address by clicking on the email confirmation link.
If the customer wants to see there order history, then they can find it on their profile.
The customer can add their personal information there profile that they can use on their next purchase.

Product Management

The store owner can add new products directly on the website. Which makes it easy to improve the website.

Admin

The store owner can from the admin page administrate email adresses, products, categories, orders and users. This makes it possible to do big changes to the website without coding.
It is possible to add, delete or update orders.
It is possible to add, delete or update products.
It is possible to add, delete or update categories.
It is possible to add, delete or update users.
It is possible to add, delete or update email addresses.

Facebook Page

The website has a link to its Facebook page. The customer can from here get the latest info of what the store can offer. They get this info first by following the page.

Test

I have tested that this website works in different browsers: Firefox, Chrome and Safari.
I confirm that this website is responsive and works on all standard screen sizes using the devtools device toolbar.
I confirm that all links on website is working and are not broken.
I confirm that the link in the social media logotype works and that the social media website opens up in a new window.
I confirm that forms on the website works and that the customers gets the email confirmation afterwards.
I confirm that the search bar is finding the correct product.
I confirm that the product sorting and filtering is working properly.

Testing

I have tested the following functionality:

That all the links work properly

That All Products page works

By Category works

By Rating works

By Price works

Products Detail page with functionalities works

Bag page with functionalities works

Checkout page with functionalities works

Checkout Success page with functionalities works

Register Profile works

Login and update profile works

Confirmation and verification emails work

Toast pop up windows work

Product Management page with add product functionality works

Admin page with add, update and delete functionality works

That Stripe payment with webhook functionality works

Validator Testing

I have validated the following languages:

CSS = Validated with no errors.
HTML = Validated with no errors.
Python = Validated with no errors except for line to long errors.
Javascript = Validated with no errors except for jQuery that the validator couldn't read.

Lighthouse testing

The Performance and SEO is excellent. With ok results on Accesibility and Best Practice.

Deployment

Created the app using a unique name in Heroku.
Went to the Resources tab in Heroku and searched for Heroku Postgres in the 'Add-Ons' section.
Selected the free Hobby level.
Updated the env.py file within my local workspace with the DATABASE_URL details, and the settings.py to connect to the database using the dj_database_url package.
Migrated the files and pushed them to github and then to Heroku, but without the static files.
Went to the Settings tab in Heroku and clicked on the Reveal Config Vars button.
Copied and pasted the env.py default variables into Heroku's Config Vars settings.

Went to AWS and logged in to my account.
Created a new bucket on AWS with all the necessary settings.
Downloaded the secret AWS and paste it in to Heroku Config Vars.

Deleted the DISABLE_COLLECTSTATIC=1 variable in Heroku.
Added following code into Settings.py

Push all the changes to Github/Heroku and all the static files will be uploaded to S3 bucket.
Create a Media Folder in AWS.
Upload all the images to the folder.

Credits

Code Institute tutorials (CKZ8780 Chris Zielinski)
Tutor Support
Slack
Product images from: https://pngimg.com/
Background image from: https://pixabay.com/sv/photos/m%c3%a4n-kvinna-tidning-b%c3%a4nk-parkera-6245003/
Font from Google API
Logos from Fontawesome.com

code-institute-submissions / ehnvik-shop_now_mayresub Goto Github PK

ehnvik-shop_now_mayresub's Introduction