I have had no ideas for this project and after a while, I had a couple of ideas to play around with. Those ideas where:

Make a web store where customers can purchase products from Nepal, to support a friend.
Make a web store where customers can purchase products from around the world.
Make a web store where customers can purchase a subscription for a box with snacks from around the world.

It took me a couple of days pick which idea I wanted to use for my last project but I am very happy with the decision I made to go with option 3. I choose this idea because I always like to try new snacks and food when I am travelling abroad. I have found some winners that I go to after trying them on my trip or send to me. Now I know that there are already companies that do this by surprising customers with the month box.

I want to give customers the option of being surprised or picking their country box. After snacking and finding out which snack you can not live without. The customer can find different snacks from the boxes in our shop. The other reason why I decided to include our shop, is from personal experience. Because when you find the snack you can't live without any more in a different country. The big question will be, can I find this at home? Sadly this is for a lot of things, not the case. So I want to bring in that segment of the market. where people that have that snack that they fell in love with but can't find it at home or after trying a box.

I agree with some of the other companies that you can not keep this a secret but that you have to share this experience with others. So customers will also have the option to give a box to someone else.

UX

Project Goals

Getting people to try new flavours.
Pushing people out of their comfort zone, flavour-wise.
Giving people a sneak peek in the new countries from the comfort of there own home.
Helping people got find and buy that snack that they fall in love with.
Easy navigation and interactive from any device and on any type of internet.
Offering an enjoyable experience ordering products from our site.
Giving customers an easy way of payment.
Trying to make people a bit more aware of the difference in cultures.

This web store is suitable for everyone how would want to prepare for or curious to visit a new country. Or those how are ready to try something else than their typical local snack. We also try to provide to the customer how loved snacks from the box, that they have tried in a certain country or are homesick. We do this by offering a selection of snacks in our store.

User Stories

Viewing and Navigation

As a shopper, I want to be able to view a list of products, so that I can select some to purchase.
As a shopper, I want to be able to view individual product details, so that I can identify the price, product image, product ingredients, product rating, product description.
As a shopper, I want to be able to view what I can expect in a box so that I can see if it is enough for my family.
As a shopper, I want to be able to view a specific category of products, so that I can quickly find products I’m interested in without having to search through all products.
As a shopper, I want to be able to easily see the total of my purchases at any time, so that I can avoid spending too much.
As a shopper, I want to be able to easily see from what country a snack comes from so that I can Find my favourite snack per country.

Registration and User Accounts

As a site user, I want to be able to easily register for an account, so that I can have a personal account and be able to view my profile.
As a site user, I want to be able to easily login or logout, so that I can access my personal account information.
As a site user, I want to be able to receive an email confirmation after registration, so that I can verify that my account registration was successful.
As a site user, I want to be able to have a personalized user profile, so that I can view my order history and order confirmations and save my payment information.
As a site user, I want to be able to easily recover my password in case I forget, so that I can recover access to my account

Sorting and searching

As a shopper, I want to be able to sort the list of available products, so that I can easily identify the best priced, what country and categorically sorted products.
As a shopper, I want to be able to sort a specific category of product, so that I can find the best priced or best-rated product in a specified category, or sort that category by name.
As a shopper, I want to be able to sort multiple categories of products simultaneously, so that I can identify the price, product image, product ingredients, product rating, product description.
As a shopper, I want to be able to search for a product by name or price, so that I can find a specific product I'd like to purchase.

Purchasing and Checkout

As a shopper, I want to be able to easily select the quantity of a product when purchasing it, so that I can ensure I don't accidentally select the wrong product or quantity.
As a shopper, I want to be able to view items in my bag to be purchase, so that I can identify the total cost of my purchase and all the items I will receive.
As a shopper, I want to be able to adjust the number of individual items in my bag, so that I can easily make changes to my purchase before checkout.
As a shopper, I want to be able to easily enter my payment details, so that I can check out quickly and without any problems.
As a shopper, I want to be able to feel that my payment details are safe and secure so that I can confidently provide the needed information to make a purchase.
As a shopper, I want to be able to view my order confirmation after checkout, so that I can verify that I did not make any mistakes.
As a shopper, I want to be able to receive an email confirmation after checking out, so that I can keep the confirmation of what I have purchased for my records.

Admin and box management

As a box contributor, I want to be able to add a product, so that I can add new box items to shop.
As a box contributor, I want to be able to edit/update a product, so that I can change product prices, images, descriptions and other product criteria.
As a box contributor, I want to be able to delete a product, so that I can remove box items that are no longer for sale

Design Choices

This project is about snacks and that means all kinds that you can think of chocolate, cookies, candy, chips, crackers, etc. The thing that makes this kind of shop a great experience is that it is really like travelling. You travel around the world by taste. You will get a better understanding of what people like around the world and that will not always be what you like. It could also be a good help in finding a new holiday destination if you love their snacks.

Typography

I have not put a lot of energy into picking a special font. I have to say I just followed along with the Boutique Aldo structure as I thought it looked nice. the font that I am using is Lato. The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. I find that Lato is a font that is easy to read so that makes it easy to read for everyone that would visite te site.

Changes

I have had this fond for a couple of weeks now and I do still like that it is a simple and strong font. Although I find that this project needs another font to lift it up more. I am missing some elegance and movement there where the font has a bigger size. I went back to Google font and took a good look at the different fonts. I choose 2 possible options Oregano and Paprika. Oregano is an elegant, looks a bit Azian and is very different to Lato. Paprika is more similar to Lato and not as elegant as Oregano but the movement in it makes it move playful to me and I was looking for that most of all. I decided that the project could better do with some playfulness than the touch of elegance so I choose for the font Paprika.

Colours

I want to colour to be one of the colours in the hero image. It took a while before I found a suitable image that represented what I wanted to bring over to customers. It is not perfect for it but it is the closest I found, as I do not know anyone how could make me the perfect hero image. I liked the orange/salmon colour on the bottom that ties everything together. This made me choose this colour to use in my design to tie everything together. But because I did not know what colour they used on that image I had to go and look for colours that looked like this colour. I found a website with a colour that was close but not yet that colour. So I started playing around in DevTools and found a colour that looked very similar. That was how I found the colour #ffa368.

Changes

In my second meeting with my mentor he told me for a website marketing to sell snacks it was not calling out candy/snacks, he meant a bit boring and average. It needed more colour. In my research for this website, I have seen very colourful websites but also less colourful. Although I got the feeling that the once with more colour did better. So I had to go and look for another colour and find the best places to put in some extra colour. I decided to look up the hex of the colour that I have chosen and found a website that showed colour schemes with my main colour #ffa368. The complementary colour they had chosen to put next to my colour, I loved. This is the colour #68c4ff.

Icons

I thought that this project needed some icons as I have seen in my research, websites use icons to make scanning their website more visible. How doesn't know the icon for the shopping bag or account? I have used icons only in my footer and in my navbar to give an extra visible element to my project. I used the icons from the icons library from Fontawesome. The icons are easy to understand and they provide visual support to the input fields.

Imagery

As I have seen in my research are images on your website very important and not only for the products that you want to sell. I have added images mostly on the home page next to the product images. Although the hero image is small it does catch the eye of the customer. On the next section of the home page, how the concept works. There are three images that make the explanation of how the idea of the concept get a box works more visual. The next section is where I explain what customers can expect in their box. I have added an image in the middle and the explanation of what they can find in there box around it.

Although it is also very important to have working product images because how many customers will buy a product that has no image? In the case that a product image doesn't work I have put in an if statement that will add a nonimage image so that customers will not see a broken image tag.

Wireframes

I built the wireframes for this project using Balsamiq. I had to do some research to get a better idea of how the design would look like. With most of the pages, I started with the desktop version and translated them to the tablet/mobile version. I choose to keep the tablet and mobile version together as they would not differ too much from each other. As most of the main content is displayed in columns in a row.

My wireframe for Desktop base.html and for Mobile base.html

My wireframe for Desktop home.html and for Mobile home.html

My wireframe for Desktop about.html and for Mobile about.html

My wireframe for Desktop bag.html and for Mobile bag.html

My wireframe for Desktop checkout.html and for Mobile checkout.html

My wireframe for Desktop contact.html and for Mobile contact.html

My wireframe for Desktop FAQ.html and for Mobile FAQ.html

My wireframe for Desktop get-box.html and for Mobile get-box.html

My wireframe for Desktop give-box.html and for Mobile give-box.html

My wireframe for Desktop give-lenght.html and for Mobile give-lenght.html

My wireframe for Desktop login.html and for Mobile login.html

My wireframe for Desktop register.html and for Mobile register.html

My wireframe for Desktop shop.html and for Mobile shop.html

I also made a wireframe for how I think my database structure would look like. I made this database diagram with DB diagram, to get a better understanding of how I need to make my models.

To view my database diagram wireframe click here.

Features

Features Left to Implement

Give customers the option to pick there own countries for the boxes they ordered.
Give customers the option to buy a box for someone else.
Prevent that suppliers can add products to any country but there own
Add payment information to customer profile
add toast before deleting product

Technologies Used

Languages

HTML
CSS
JavaScript
Python
MarkDown

Tools & Libraries

For research, images and inspiration I have used:

For overall purpos:

For research on errors and explantion on subjects I have used:

For my stripe elements JavaScript and CSS I have used:

For my webhook elements I have used: Core logic check signatures

For my contact app I have used: TraceSence

For my deployment I have used:

For testing I have used:

For examples for my README I have used:

Testing

User stories

Viewing and Navigation

As a shopper, I want to be able to view a list of products, so that I can select some to purchase.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the shop link. Here the customer can find a list of all the products that are sold in the shop. If custom clicks on Get a box, the customer can find all the boxes that are for sell here.
PASS

As a shopper, I want to be able to view individual product details, so that I can identify the price, product image, product ingredients, product rating, product description.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the shop link. In the shop, the customer can find an extra navbar where it can sort on category, name, price and country. If custom clicks on Get a box, the customer can find all the box options, if they click on select the customer can see the different time options for the boxes. It is the same for the other box. Sadly we do not have a rating option yet.
PASS

As a shopper, I want to be able to view what I can expect in a box so that I can see if it is enough for my family.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on What is inside, where the customer can find what is in the boxes.
PASS

As a shopper, I want to be able to view a specific category of products, so that I can quickly find products I’m interested in without having to search through all products.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the shop link. In the shop, the customer can find an extra navbar where it can sort on category. The different categories are listed on the navbar.
PASS

As a shopper, I want to be able to easily see the total of my purchases at any time, so that I can avoid spending too much.

Customer goes to the taste-world-snacks.herokuapp.com and goes to the shop or get a box, selects a product and clicks on add to bag. A success message will appear on the top right of the screen within it all the product the customer has selected, with the quantity, price, total price and the amount that they have left under the free shipping amount. -PASS

As a shopper, I want to be able to easily see from what country a snack comes from so that I can Find my favourite snack per country.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the shop link. In the shop, the customer can find an extra navbar where it can sort on the country.
PASS

Registration and User Accounts

As a site user, I want to be able to easily register for an account, so that I can have a personal account and be able to view my profile.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the my account link. A dropdown menu will appear where the customer can select the option register. They fill in the form and click on the sign-up button. They will receive a confirmation email where they can confirm their email and the customer is registered for an account at taste world snacks.
PASS

As a site user, I want to be able to easily login or logout, so that I can access my personal account information.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the my account link. A dropdown menu will appear where the customer can select the login option when they want to check-in and fill in the form and click sign in button. The customer can select the logout option if they want to log out and click the log out button.
PASS

As a site user, I want to be able to receive an email confirmation after registration, so that I can verify that my account registration was successful.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the my account link. A dropdown menu will appear where the customer can select the option register. They fill in the form and click on the sign-up button. They will receive a confirmation email where they can confirm their email and the customer is registered for an account at taste world snacks.
PASS

As a site user, I want to be able to have a personalized user profile, so that I can view my personal order history and order confirmations and save my payment information.

Customer goes to taste-world-snacks.herokuapp.com and clicks on the my account link. A dropdown will appear and if the customer selects the option login and fills in the form and clicks on the sign-in button. If they click on the my account link again a dropdown menu will come down with the option my profile. Here the customer can find there personal information and order history with the corresponding payments.
PASS

As a site user, I want to be able to easily recover my password in case I forget, so that I can recover access to my account

Customer goes to taste-world-snacks.herokuapp.com and clicks on the my account link. A dropdown menu will appear when they select the login option they can find under the sign-up button a link to go to the reset password page. If they will in there email and click on the reset My password button they will get an email to reset there password. If they click on the link in the email they can change their password ending with clicking the submit button.
PASS

Sorting and searching

As a shopper, I want to be able to sort the list of available products, so that I can easily identify the best priced, what country and categorically sorted products.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the shop link. In the shop, the customer can find an extra navbar where it can sort on category, name, price and country. If custom clicks on Get a box, the customer can find all the box options, if they click on select the customer can see the different time options for the boxes. It is the same for the other box.
PASS

As a shopper, I want to be able to sort a specific category of product, so that I can find the best-priced product in a specified category or sort that category by name.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the shop link. In the shop, the customer can find an extra navbar where it can sort on category, name, price and country. Sadly if the costumer sorts by name or category the products will not be sorted as well on price.
PASS

As a shopper, I want to be able to sort multiple categories of products simultaneously, so that I can identify the price, product image, product ingredients, product rating, product description.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the shop link. In the shop, the customer can find an extra navbar where it can sort on category, name, price and country. The customer can then she the product image and the product price in the overview that appeared. If the customer clicks on the product image it can find more details about the product like the ingredients and description. Sadly we do not have a rating option yet.
PASS

As a shopper, I want to be able to search for a product by name or price, so that I can find a specific product I'd like to purchase.

Customer goes to the taste-world-snacks.herokuapp.com and clicks on the shop link. In the shop, the customer can find an extra navbar where it can sort on category, name, price and country.
PASS

Purchasing and Checkout

As a shopper, I want to be able to easily select the quantity of a product when purchasing it, so that I can ensure I don't accidentally select the wrong product or quantity.

Customer goes to the taste-world-snacks.herokuapp.com and goes to the shop. If the customer clicks on the product image that they are interested in they will go to the product detail page. At the bottom of the page, the customer has the option the change the quantity of the product. If the customer clicks the add to bag bottom, they can click on the shopping bag link. here the customer has another moment to change the quantity or remove the product from there bag before checking out. If the customer clicks on the go to secure checkout button in the success message overview, they will be directed to the shopping bag page where the have another moment to change the quantity or remove the product from there bag before checking out.
PASS

As a shopper, I want to be able to view items in my bag to be purchase, so that I can identify the total cost of my purchase and all the items I will receive.

Customer goes to the taste-world-snacks.herokuapp.com where they go to the shop. They can select the product they want and on the product detail page, they can click on the add to bag button. they can click on the shopping bag link. here the customer can view all the products they selected for purchase. Or the customer can click on the go to secure checkout button in the success message overview, they will be directed to the shopping bag page. where they can view all the products they selected for purchase.
PASS

As a shopper, I want to be able to adjust the number of individual items in my bag, so that I can easily make changes to my purchase before checkout.

Customer goes to the taste-world-snacks.herokuapp.com and goes to the shop. If the customer clicks on the product image that they are interested in they will go to the product detail page. At the bottom of the page, the customer has the option the change the quantity of the product. If the customer clicks the add to bag button, they can click on the shopping bag link. here the customer has another moment to change the quantity or remove the product from there bag before checking out. If the customer clicks on the go to secure checkout button in the success message overview, they will be directed to the shopping bag page where the have another moment to change the quantity or remove the product from there bag before checking out.
PASS

As a shopper, I want to be able to easily enter my payment details, so that I can check out quickly and without any problems.

Customer goes to the taste-world-snacks.herokuapp.com and goes to the shop. If the customer clicks on the product image that they are interested in they will go to the product detail page. At the bottom of the page, the customer has the option the change the quantity of the product. If the customer clicks the add to bag button, they can click on the shopping bag link. When the customer clicks on the secure checkout button on the shopping bag page the customer will be redirected to the checkout page. Here the customer has tot fill in the order form and can then easily at there credit card detail at the bottom of the form before clicking the complete order button.
PASS

As a shopper, I want to be able to feel that my payment details are safe and secure so that I can confidently provide the needed information to make a purchase.

We use the payment service Stripe that takes over the payment on the site. There is a secure communication with our database and with Stripe. It will only allow payments if we have a secure secret key that approves of the communication between both sides. -PASS

As a shopper, I want to be able to view my order confirmation after checkout, so that I can verify that I did not make any mistakes.

Customer goes to the taste-world-snacks.herokuapp.com and goes to the shop. If the customer clicks on the product image that they are interested in they will go to the product detail page. At the bottom of the page, the customer has the option the change the quantity of the product. If the customer clicks the add to bag button, they can click on the shopping bag link. When the customer clicks on the secure checkout button on the shopping bag page the customer will be redirected to the checkout page. Here the customer has tot fill in the order form and can then easily at there credit card detail at the bottom of the form before clicking the complete order button. When the payment has been approved the customer will be redirected to the checkout success page where they can see an overview of there order. The customer will also receive a confirmation email with all the details of the order and shipping information when the payment has been approved. -PASS

As a shopper, I want to be able to receive an email confirmation after checking out, so that I can keep the confirmation of what I have purchased for my records.

Customer goes to the taste-world-snacks.herokuapp.com and goes to the shop. If the customer clicks on the product image that they are interested in they will go to the product detail page. At the bottom of the page, the customer has the option the change the quantity of the product. If the customer clicks the add to bag button, they can click on the shopping bag link. When the customer clicks on the secure checkout button on the shopping bag page the customer will be redirected to the checkout page. Here the customer has tot fill in the order form and can then easily at there credit card detail at the bottom of the form before clicking the complete order button. When the payment has been approved the customer will receive a confirmation email with all the details of the order and shipping information when the payment has been approved. -PASS

Admin and box management

As a box contributor, I want to be able to add a product, so that I can add new box items to shop.

Box supplier goes to taste-world-snacks.herokuapp.com and clicks on the my account link. A dropdown will appear and if the customer selects the option login and fills in the form and clicks on the sign-in button. If they click on the my account link again a dropdown menu will come down with the option product management. Here the box contributor can fill in the form with product details, choose an image and click on the add product button to add a new product.
PASS

As a box contributor, I want to be able to edit/update a product, so that I can change product prices, images, descriptions and other product criteria.

Box supplier goes to taste-world-snacks.herokuapp.com and clicks on the shop link. Here they can select the product that they want to update/edit by clicking the edit link. They will be redirected to the edit product page where they can change price, image, description and other product details. When the product details are changed they click on the edit product button and the product is updated/edit.
PASS

As a box contributor, I want to be able to delete a product, so that I can remove box items that are no longer for sale Box supplier goes to taste-world-snacks.herokuapp.com and clicks on the shop link. Here they can select the product that they want to update/edit by clicking the delete link. There is no extra message yet so they need to be sure this is the correct product to delete.

PASS

Testing by others

I have asked people on Slack and family to test my project and tell me the issues they have with it.

Test user 1
- Issue 1: In the how it works section I forgot to take out the part where it tells that you can choose your own country Solution: I removed this content from the how it works section
- Issue 2: On the country page what did those countries mean/ where is the intro to these counties? Solution: I wrote an intro for the country page, explaining what the meaning is of those counties
Test user 2
- Issue 1: In the section what do customers think there are no dates with the reviews. So how do customers know from when they are? Solution: I added a paragraph within there a date for the review
Test user 3
- Issue 1: The sorting navbar on the shop page gives an error 500 Solution: I had sliced the queryset to display only the first 15 products. Turned out that it can not sort when the queryset is sliced. So I added an if statement in the code after the for loop, that it should not show any products with the name Original or Premium.
- Issue 2: I had made some typos on the 2 box length pages Solution: I corrected the typos
Test user 4
- Issue 1: When I click on "get a box", I get a 500 error Solution: Turned out that there something went wrong with the boxes table in Postgres after I migrated to Heroku. So I had to remove my Postgres database and I had to migrate push to Heroku again. After that was done I had to manually insert all the data.

Other testing

Grammarly

I had about 377 spelling, grammatical errors. Although some of them where not really errors as they where part of error messages or code.

Vadidators

CSS

base.css

Result:

98 .title Ongeldig getal : font-family Parse Error
268 .social-links a Property size doesn't exist. The closest matching property name is resize : 30px, this was line 264

Solution:

I removed the whole block of code for .title as there was nothing in it
I removed the size as it did not work

Second check:

Result:

Dit document is gevalideerd als CSS versie 3 + SVG !/ This document is validate as CSS version 3 + SVG !

checkout.css

Result:

Dit document is gevalideerd als CSS versie 3 + SVG !/ This document is validate as CSS version 3 + SVG !

profile.css

Result:

Dit document is gevalideerd als CSS versie 3 + SVG !/ This document is validate as CSS version 3 + SVG !

HTML

bag.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.
Every line that starts with td is a Stray end tag. Every line ending with td was a Stray end tag

checkout.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.
On line 134 one empty header

Reason: In this header, I have added the spinner icons.

checkout_success.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

contact_us.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.
Element legend not allowed as child of element div in this context.

Reason: I have used the legend to give fields the correct title above it so that they look the same as all the other forms in the project

contact_succes.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

countries.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

index.html

Result:

No element head and doctype

faq.html

Result:

No element head and doctype
One line was written with {%%} and is a Bad value
Bad value contact us for attribute href on element a

Solution:

I removed the a tag with href and just left the text

about_us.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

shop.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.
The aria-controls attribute must point to an element in the same document.

Reason: I made shop-nav into an include as I was of the idea that if it needed changing this made it faster. I added {% include 'includes/shop-nav.html' %}

product_details.htm

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.
The aria-controls attribute must point to an element in the same document.

Reason: I made shop-nav into an include as I was of the idea that if it needed changing this made it faster. I added {% include 'includes/shop-nav.html' %}

edit_product.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

add_product.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

box.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.
The element a must not appear as a descendant of the button element. Reason: I have added a link in a button. To make give the buttons the overall look of the project

box_premium.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

box_original.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

custom_clearable_file_input.html

This is a widget file to modify the image input field as I wanted to it different. I was of the idea that if it needed changing this made it faster.

quantity_input_script.html

This is JavaScript in an html page. So it is easier to insert in the product_details.html because otherwise, it would get too big.

profile.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.
Misplaced non-space characters inside a table.
Text not allowed in element ul in this context.
Stray start tag and Stray end tag

Reason:

I used the tag tbody, as it means table body and was also used in Boutique Ado project
In the ul element I am displaying the product name and quantity in a list
I used the opening and closing tag of td, this was also used in Boutique Ado project

base.html

Result:

I get a lot of error, it doesn't want to keep testing

Reason:

Most of this code is from the Boutique Ado project and I am not capable to change it now due to time limits

footer.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.
No p element in scope but a p end tag seen. Reason: Strangely, it can not find the start p tag as it is under the h5 with the company in it. I can even close it

main-nav.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

mobile-too-header.html

Result:

No element head and doctype
Element li not allowed as child of element body in this context. Reason: This is an include of the base.html so it doesn't have a body in this context

shop-nav.html

Result:

No element head and doctype
Everything written with {{}} or {%%} is a Bad value.

Python syntax check

Bag

context.py

Result:

python is valid (input char count: 1298)

views.py

Result:

File "code.py", line 25 messages.success(request, f'Updated {product.name} quantity to {bag[item_id]}') ^ SyntaxError: invalid syntax Reason:
As this is a direct way of writing a message for in the HTML I am leaving it in

apps.py

Result:

python is valid (input char count: 104)

urls.py

Result:

python is valid (input char count: 378)

Checkout

webhooks.py

Result:

python is valid (input char count: 1815)

webhook_handler.py

Result:

File "code.py", line 40 content=f'Unhandled webhook received: {event["type"]}', ^ SyntaxError: invalid syntax

Reason:

As this is a direct way of writing a message for in the HTML I am leaving it in

views.py

Result:

File "code.py", line 167 messages.success(request, f'Order successfully processed!
Your order number is {order_number}. A confirmation
email will be sent to {order.email}.')
^ SyntaxError: invalid syntax

Reason:

As this is a direct way of writing a message for in the HTML I am leaving it in

urls.py

Result:

python is valid (input char count: 415)

signals.py

Result:

python is valid (input char count: 522)

models.py

Result:

File "code.py", line 76 return f'SKU {self.product.sku} on order {self.order.order_number}' ^ SyntaxError: invalid syntax

Reason:

As this is a direct way of writing a message for in the HTML I am leaving it in

forms.py

Result:

File "code.py", line 40 placeholder = f'{placeholders[field]} *' ^ SyntaxError: invalid syntax

Reason:

As this is a direct way of writing a message for in the HTML I am leaving it in

apps.py

Result:

python is valid (input char count: 171)

admin.py

Result:

python is valid (input char count: 1089)

init.py

Result:

python is valid (input char count: 53)

Contact

views.py

Result:

python is valid (input char count: 1502)

urls.py

Result:

python is valid (input char count: 162)

models.py

Result:

python is valid (input char count: 329)

apps.py

Result:

python is valid (input char count: 112)

Countries

views.py

Result:

python is valid (input char count: 340)

urls.py

Result:

python is valid (input char count: 162)

models.py

Result:

python is valid (input char count: 815)

apps.py

Result:

python is valid (input char count: 116)

admin.py

Result:

python is valid (input char count: 308)

home

views.py

Result:

python is valid (input char count: 106)

urls.py

Result:

python is valid (input char count: 274)

apps.py

Result:

python is valid (input char count: 589)

Products

widgets.py

Result:

python is valid (input char count: 397)

views.py

Result:

File "code.py", line 30 sortkey = f'-{sortkey}' ^ SyntaxError: invalid syntax

Reason:

As this is a direct way of writing a message for in the HTML I am leaving it in

urls.py

Result:

python is valid (input char count: 665)

models.py

Result:

python is valid (input char count: 1216)

forms.py

Result:

python is valid (input char count: 358)

apps.py

Result:

python is valid (input char count: 114)

admin.py

Result:

python is valid (input char count: 537)

profile

views.py

Result:

f'This is a past confirmation for order number {order_number}. ' ^ SyntaxError: invalid syntax

Reason:

As this is a direct way of writing a message for in the HTML I am leaving it in

urls.py

Result:

python is valid (input char count: 279)

models.py

Result:

python is valid (input char count: 1451)

forms.py

Result:

python is valid (input char count: 240)

apps.py

Result:

python is valid (input char count: 114)

taste world snacks

wsgi.py

Result:

python is valid (input char count: 429)

urls.py

Result:

python is valid (input char count: 1303)

asgi.py

Result:

python is valid (input char count: 429)

settings.py

Result:

AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com' ^ SyntaxError: invalid syntax

Reason:

As this is a direct way of writing a message for in the HTML I am leaving it in

Other files

manage.py

Result:

) from exc ^ SyntaxError: invalid syntax

Reason: I did not write this code so I feel not comfortable to adjust this

custum_storages.py

Result:

python is valid (input char count: 310)

Browser testing

On Chrome, Opera, Ecosia as on Microsoft Edge the project work well. I can add products from the shop and the box in the bag, go to the shopping bag, do a payment and all the links work correctly.

I found that there was an error on the box_original.html as I did not write the redirect_url correctly

Issues

Solved Issues

Issue header/Navbar

While scrolling through the page. I saw that the content would scroll behind the navbar. Turned out that the padding and margin-left open spaces in the Navbar. So when I removed the padding and margin there was no more content shown behind the header/navbar when scrolling through the page.

Issue Footer

After testing the delete link in the bag. I saw that the footer was not at the bottom of the page but under the content. I did not set any height for the HTML or the body so that made the footer float up. I added a height of h-100 next the HTML and body and gave the footer mt-auto py-3 and the footer stayed at the bottom of the page.

Issue merging images

I started putting images in the static folder. But now only static files could go in the static folder and images have to go in the media folder. When I moved the images folder in the media folder and adjusted my URL for my images it gave an error. I was writing the image URL as in Flask. One of the tutors told me that in Django image URLs are written differently. So after adjusting the image URLs it worked correctly.

Issue boxes subscriptions

I wanted to make two directions in the project. A shop direction and a box subscription direction. I made the shop side first and after I finished. When I got the subscription part so far that the last step was adding them to the bag and checkout. If I wanted to make this work I had to rewrite 3 to 4 pages. So I decided to add them as products and present in a different manner. I limiting the queryset to show only the boxes that I wanted but this means that they have to be adjusted every time a new product is inserted or a product gets delete until a better solution is found.

Unsolved Issues

Issue update link

The update link to update the form after a customer adjusted the quantity is outside the form, as it does not have to submit anything. This means that the form will not catch it when a customer adjusts the quantity to outside the allowed scope. The buttons and arrows in and around the input field in the shopping bag are restricted as in the product detail page. Adding the update link to a button in the form gives it that last check but the delete link doesn't work correctly inside the form.

Issue select buttons on the box length pages.

I wanted to limit the number of box subscription a customer can buy. I have removed the quantity input on the box length page and the bag but a customer can click on the add to bag button more than once. I have tried to make it less noticeable to redirect them to the home page after clicking on the add to bag button.

Issue sort in shop

I limit the queryset like with the boxes but it turned out that it could not sort when the queryset was sliced, it gave a 500 error. So I added the an if statement that would not show the products with the name Original and Premium. But I found out that with sorting on the country and by name it leaves two open spaces on large screens, I am not sure why.

Issue with floating footers

In my last walk throughout the project, I have seen that some of the pages from the Allauth package have a floating footer.

Deployment

Setting up the database and Heroku app

Go heroku.com, create an account or log in. I already have an account so I just had to log in.
Click on new and then on new app. Give your app a name, it has to be unique. I called my app taste-world-snacks. Then choose the region closest to you and lastly click on create app button.
Go to the resources tab, go to the add-ons and search for Heroku Postgres. Use the free plan and click on the submit order form button.
Go back to your code editor and install dj_database_url and psycopg2-binary , for the use of heroku Postgres. pip3 install dj_database_url and pip3 install psycopg2-binary. After that freeze the requirements, pip3 freeze > requirementstxt.
Go to settings.py and import dj_database_url. Go to the database settings section and comment out the the default configuration and add a new database default with a call to dj_database_url.parse(). Go back to Heroku, go to the settings tab and reveal the config vars. Copy the database-url value and past this into the parentheses (). DATABASE = { 'default': dj_database_url.parse('here comes you database-url value') }
Because you're using Postgres, you have to run all the migrations again, you can see this when you run python3 manage.py show migrations as the boxes are no longer checked. If you used JSON files to upload your categories an products you have to load them again. If you add them manually then you have again after your app is deployed to Heroku.
Create a new superuser, python3 manage.py createsuperuser, and follow the steps. Your Heroku app and database are ready to go so remove the new database default and uncomment the original database default. You do this last step to make sure your database URL doesn't end up in version control and people can't use it for them selfs.
Then add, commit and push to Github.

Deploying to Heroku

In settings.py go back to the database section. You're going to going to set your database default in an if statement, if 'DATABASE_URL' in os.environ:. So that when our app is running on Heroku we connect to Postgres otherwise we connect to your local database. The first part of this if statement is going to be the default database for when connected to Heroku and it will be similar to the default database code you just removed but with your Heroku URL secured
```
  DATABASE = {
      'default': dj_database_url.parse(os.environ.get('DATABASE_URL))
  }
```

Put the original database default in an else statement

else:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

To be able to deploy to Heroku you need a couple of other things:
- Install gunicor, that will act as a web server, and freeze this in the requirments.txt
- Create a Procfile, it needs the capital P. To tell Heroku to create a web dyno, which will run gunicorn and serve our Django app. You open a new file and add this to the file. web: gunicorn taste_world_snacks.wsgi:application
Login to Heroku in the console. To log in, you can use the command Heroku login or Heroku login -i and follow the steps. Then temporarily disable collective static by using the command Heroku config: set DISABLE_COLLECTSTATIC=1 --app taste-world-snacks, so that Heroku won't try to collect static files when we deploy.
You need to add taste-world-snacks to allowed hosts in settings.py and add the localhost as well, so that you can still work on it. I tidied up secured later so I could test automatic deployment. Then add, commit and push to Github.
To deploy to Heroku using the commands:
- heroku git:remove -a taste-world-snacks
- git push heroku master
To set up automatic deployment go to the deploy tab on Heroku and click on connect to Github. Search for the correct repository and then click connect, after that go to the Enable Automatic Deploys button and click it.
Then to add secure, look up a secret key generator and generate a secret key. Copy that and go to the settings tab in Heroku, reveal config vars to make a new key with the name SECRET_KEY and past in your generated secret key in the value field and add it. After that go settings.py to replays the SECRET_KEY value with a call to get it from the environment with an empty string as default, SECRET_KEY = os.environ.get('SECRET_KEY', '').
Set DEBUG to be true only if there is a variable called development, DEBUG = 'DEVELOPMENT' in os.environ. Lastly add, commit and push to Github. If you go to the activity tab on Heroku, you can see there is a build-in progress and that your automatic deployment is working.

Store static files and images on AWS

Setup bucket

Go to aws.amazon.com there create an account and follow the steps or log in. I already have an account from a previous project so I only had to log in.
Once logged in search for S3 and open it and create a new bucket and give it a name. to keep it simple I gave it my Heroku app name, taste-world-snacks. Then select the region that is close to you, uncheck block all public access and acknowledge that the bucket will be public. It needs to be public to allow public access to our static files. Then click create bucket
The new bucket needs a few basic settings.
- To do that select your bucket, go to properties tab, look for static website hosting and click edit and click on enable and host a static website. I used index.html and error.html as index and error documents. As this is for educational use so I can go with defaults.
- Then go to the permission tab, from there the cors configuration tab and click edit. I pasted in the Cors configuration provided by school. This is to setup the required access between our Heroku app and this S3 bucket.
- Then under the policy tab in the permission tab select policy generator to create a security policy for the bucket. The policy type is S3 bucket policy, effects will be allow, principal will be , action will be get object and the ARN you can find on top of the bucket policy tab. Click add statement, then generate policy. Copy this policy into the bucket policy editor and add a / on to the end of the resource key to allow all access to all resources in the bucket and finally click save. Leave the policy generate window open for when you will create a user.
- As the last step go to the access control list tab and select public access to everyone, select list and understand the effects and save.

Setup user to access bucket

Go back to the server menu and open I am. Click on groups, create a new group and give it a name. To keep it simple I gave it the name manage-taste-world-snacks. Then click on create group.
To make a policy to use to access our bucket click on policies and then create policy. Go to the JSON tab, click on import managed policy, search for S3, choose AmazonS3FullAccess and import. As I only want full access to the bucket and everything in it, you will go to the policy generate page that you left open and copy the ARN behind resource. You can paste this in the list behind resource and in a second line past it in again but with /* behind it. Click review policy, give it a name and description and click create policy. I name mine taste-world-snacks and as description, I added to access S3 bucket for taste world snacks static files.
You will attach the policy to the group you just created. To do so go to groups, click on the group that was just made, click attach policy, search for the policy with the name that you just made, select it and click attach policy.
Then finally you will create a user to put in the group. Click on users page, click add user and give it a name. I called it taste-world-snacks-staticfiles-user. select programmatic access as access type, click next, select your group, click through till the end and then click create user. Download the CSV file with the user access key and secret key and click close. It is very important to download and save this file as it cannot be downloaded or accessed again.

Connect S3 bucket to Django

In the code editor install bato 3, django-storages and freeze them. Add storages in settings.py under installed apps. -pip3 install bato 3, pip3 install django-storages, pip3 freeze > requirements.txt

You need to add the next settings under the media root section of settings.py to tell it with which bucket to communicate with. Add an if statement to check if there is an environment variable called use aws and give it these variables with the corresponding values:

  if 'USE_AWS' in os.environ:
      AWS_STORAGE_BUCKET_NAME,
      AWS_S3_REGION_NAME,
      AWS_ACCESS_KEY_ID = os.environ.get('AWS_ACCESS_KEY_ID'),
      AWS_SECRET_ACCESS_KEY = os.environ.get('AWS_SECRET_ACCESS_KEY'),
      AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'

Then go to Heroku settings tap and reveal config vars to add:
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
- USE_AWS with value True
You can find the credentials in the CSV file you downloaded from AWS and remove the DISABLE COLLECTSTATIC variable.
In your code editor create a file named custom_storages.py to tell Django where to store static files and uploaded product images when you run collect static files. In this file you import settings from django.config and import S3Boto3Storage from storages.backends.s3boto3. Add a class to tell Django where to store static files and another for where to store media files.
```
  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
```
Then go back to settings.py to tell it that for static file storage you want to use the StaticStorage class, for media files you want MediaStorage and what location it should save them.
```
  STATICFILES_STORAGE = 'custom_storages.StaticStorage'
  STATICFILES_LOCATION = 'static'
  DEFAULT_FILE_STORAGE = 'custom_storages.MediaStorage'
  MEDIAFILES_LOCATION = 'media'
```

You also need to override and explicitly set the URLs for static and media files using your custom domain and new locations.

  STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{STATICFILES_LOCATION}/'
  MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{MEDIAFILES_LOCATION}/'

Adding other files to S3 bucket

You can add an extra setting to the use aws if statement in settings.py, that will tell the browser that it is okay to cache static files for a long time.
```
  AWS_S3_OBJECT_PARAMETERS = {
 		 'Expires': 'Thu, 31 Dec 2099 20:00:00 GMT',
 		 'CacheControl': 'max-age=94608000',
  }
```
To add media files to your S3 bucket, you need to go back to awsamazon.com, open S3, open your bucket, click on create folder and give it a name. I called mine media. Open this folder, click upload then click on add files, then select all the images you want to select and click upload. If you have your images on Github than download them first from there and make sure that you add your images in with the same path as in your local database, example images/image.jpg.

Forking the GitHub Repository

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

Log in to GitHub and locate the GitHub Repository
At the top of the Repository (not top of page) just above the "Settings" button on the menu, locate the "Fork" button.
You should now have a copy of the original repository in your GitHub account.

Making a local clone

Navigate to https://github.com/ceciliabinck/(taste-world-snacks).
Click the green 'Clone or Download' button.
Copy the URL in the dropdown box.
Using your favourite IDE open up your preferred terminal.
Navigate to your desired file location.
Copy the following code and input it into your terminal to clone Cook with me.
git clone https://github.com/ceciliabinck/(taste-world-snacks).git

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

Press Enter. Your local clone will be created.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Credits

Code

Most of the code I have taken from my Boutique Ado project from the full-stack frameworks with Django from the code institute.
The code for the accourdion on the FAQ page is from Bootstrap
The checkout JS logic is from Stripe docs payment and the CSS logic is from Stripe docs payment
For my contact app I have used TraceSence
The code in of the account app is from Allauth
I have also used code suggested by the tutors in my project

Content

The content of my FAQ page is from SnackSurprice's FAQ page
From the section what is inside a box, the first paragraph is from SnackSurprice, the second paragraph is from UniversalYums and the third paragraphis from Try My Snacks.
The section forking from GitHub repository and the end of cloning locally after step 7 I used it from A example from school it is made by lechien73
The content of the account app is from Allauth
The rest of the content I wrote my self

media

The hero image on the home page I used that from here.
The other images on the home page and of the boxes I used them from SnackSurprice
Most of the images in the shop I used them from World of Snacks
The 3 images from the products from Nigeria I used then from Nigerian grocery Jumia
The differet country images I have used from Wikipedia

Acknowledgements

I want to thank tutor support at code institute for helping me with issues, being my rubber duck and answering my questions even in times when it was busy
I like to thank my mentor Maranantha Ilesanmi for keeping in contact with me and answering me when I just needed some support or someone to talk to
I want to thank my fellow students on Slack for keeping me motivated and learning me new things

code-institute-submissions / taste-world-snacks Goto Github PK

taste-world-snacks's Introduction

UX

Project Goals

User Stories

Design Choices

Typography

Changes

Colours

Changes

Icons

Imagery

Wireframes

Features

Features Left to Implement

Technologies Used

Languages

Tools & Libraries

Testing

User stories

Viewing and Navigation

Registration and User Accounts

Sorting and searching

Purchasing and Checkout

Admin and box management

Testing by others

Other testing

Grammarly

Vadidators

CSS

HTML

Python syntax check

Bag

Checkout

Contact

Countries

home

Products

profile

taste world snacks

Other files

Browser testing

Issues

Solved Issues

Unsolved Issues

Deployment

Setting up the database and Heroku app

Deploying to Heroku

Store static files and images on AWS

Setup bucket

Setup user to access bucket

Connect S3 bucket to Django

Adding other files to S3 bucket

Forking the GitHub Repository

Making a local clone

Credits

Code

Content

media

Acknowledgements

taste-world-snacks's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org