Toy Store

Live application can be found here

facebooksite

Purpose of the project

Basically, this is an e-commerce site that sells mostly toys, but also a few other kid-related products.

Users are free to create accounts or just buy without one, and admin have full access to the site as a site owner

Users can test the card by entering 4242 4242 4242 4242 - and at the end, a 5-number postal code can be entered.

User stories

Here is Kanban for user story here

As a Owner I can Add, Edit and Remove product so That Easy to take out old and add new stuff
As a Siteuser I can search in the searchbar so That it's easy to find what i searchs for
As a siteuser I can rate so That people know if how good or bad this products is
As a Siteuser I can select size so That i can fins the best size to buy
As a admin/siteowner I can delete product so That if i dont want it in my shop
As a Buyer I can get confirmation mail when i purchase so That i know the purchase was done
As a Admin/siteowner I can remove users so That if it gets to much accounts
As a User I can my billing adress so That i odnt have to enter again
As a User/buyer I can add in the shopping cart so That it's easy to buy more fast
As a User I can click on site's facebooks business page so That I Can Follow Them
As a Admin I can add product so That if i want to add new product in the shop
As a User I can Register an Account so That I Can Have a personal account with my profile
As a User I can Login or logout so That I can Access My account
As a site user I can view the policy so That user know what policy the site have
As a User I can Recover my password so That i can access my again if I lost my password
As a Buyer I can View the products so That I can select some to Purchase
As a Buyer I can View Product individual details so That I can see the price, description of the product and product image
As a Buyer I can See how much i have in my shopping bag so That i can see how much everything in total and what product i have put in
As a User I can register for newsletter so That I can recieve news on products or campaigns
As a Admin I can **add, edit and remove ** so That i can add new products, edit them or delete it

Databases

Easy-to-use ecommerce site

Wireframes

Following the theme of simplicity, the pages are divided by bootstrap columns and rows, and the layout stays consistent so that the user feels at ease at all times.

Features

Navigation Bar
- The navigation bar is fully responsive, allowing users to navigate easily.
- A fast and easy way to register and log in.
- Design with easy color and minimalist style.
- The navbar menu changes to dropdown when it is smaller screen

Categories
- Categories with easy-to-filter products

Home
- Buy now button for fast buy
- Social link for Facebook
- Subscribe if you want news letter
About
- Little about the page.
Add to Bag
- It's easy to add and buy both for those who have signed up and those who haven't
Shopping Bag
- The shopping bag shows how much you have added, or you can click it for more information
Popup message
- Throughout the site, you will see a pop-up message or alert
404 error
- Made 404 page

Futures implement

A system to keep track of how many products you have and when something is out of stock
A comment system so people can give comment about the products

Typography and color scheme

Color: white, black and big backgorund for homepage

Technology

Wireframes for layout on desktop and mobile in Balsamiq tools.
This site was laid out and structured using HTML, Python, Javascript, Django
Style and appearance using CSS.
Use Github to deploy the project and read the README.
Gitpod is used for coding.
CodeInstuite project, YouTube, and Google for tutorials and troubleshooting.
Skype for contact with the mentor for tips and advice.
jigsaw, W3c and lighthouse for testing and troubleshoot.

Testing

I Used manual testing for this Project
I tested this side on Microsoft edge and Chrome and it seems to works great.
The page is viewable on desktops, iPads, and phones when I tested.
I can confirmed All sections such as the navigation bar section are operational and easy to use.
As Guest/Anonym user
News and campaigns about products can be subscribed to
Click and view products and fast buy
Mail sent with orderdetail what you have purchase
Can read about me page
As Registered and Logged in User
Can edit profiles
Can change password
Can Edit profile and Change password
See Order history
Set default Delivery informations
As Admin/siteowner
Can delete products
Can Edit products
Can Add products
Delete user
Add new categories
Test Person
let my Friends and family test to see if it works as it should.
I have tested too and everythings seems to work fine

Bugs

No Nugs wehre found

Validator Testing

W3C HTML

html validator no error

w3C Jigsaws

base css no error

Accessbility

It's confirmed that the colors and fonts chosen are readable in devtools when tested through Lighthouse

Python

flake8 test Had only lines to long nothing more

Unfixed Bugs

Only line longer then 50 character

Other Services

stripe

Stripe was used to take payments for this online store; you need to create a Stripe account first and then add the HTML, Python, JS, and other code you need to implement your needs in their documentation. For setuplink Here is the setup in Settings.py

AWS3

Using Amazon AWS S3, I store all static and media files for this site. I created a bucket, user group, and user that have access to this site and its files. In order for the files to be correctly served the following settings have to be added to your main settings.py file. here is the setup in settings.py

Mailship

Was used to create the newsletter signup form. so i can get subscriber

Facebook

Business page was created on Facebook

GDPR privacy policy generator

For policy

Gmail SMTP

I used Gmail SMTP to send confirmation emails and all allauth related emails. I Used This links for setup setups in settings.py

Deployment

Github and Gitpod

Access your Github Account and look for Code-institute-templace
Click the "Use this template" button beside the green button that says "Gitpod".
Add repository name and description(optional).
Click the Create repository from template.
now you can click on the green Gitpod button when the repository hade been created.
It is best to open the workspace from Gitpod (rather than Github) to open your previous workspace rather than creating a new one when working on a project
dont forget to pin in Gitpod so the workspace wont get deleted.
Committing your work often and using clear/explanatory messages is recommended; you can do this using the following commands:

git add .: adds all modified files to a staging area
git commit -m "A message explaining your commit": commits all changes to a local repository.
git push: pushes all your committed changes to your Github repository.

Forking Github Repository

To clone or Fork repository

Find/Access your or relevant Github repository
Clock on "Fork" on the top right of the page
Your repository has now been "Forked" and you will find a copy of the repository in your Github account.

Heroku

This application has been deployed from Github to Heroku

create an account or log in if you are registered already Heroku
Create a new app, add the app name and your region and click on create app.

You can create the files required for Heroku to install your project dependencies by typing pip3 freeze --local > requirements.txt in the Gitpod CLI. Please note this file should be added to a .gitignore file to prevent the file from being committed. A Procfile is also required that specifies the commands that are executed by the app on startup.

because of security breach on Heroku, you have to use this command below to connect and deploy to Heroku.

Login to Heroku via CLI using: heroku login -i
Enter your Heroku email and password
Connect to the Heroku git remote using: heroku git:remote -a
when you deploy you need to type: git push heroku main.

Heroku Settings Environments Variables

In settings tab and click Reveal Config vars and set following:

Credits

Bootstraps was taken from here
Took the most of the codes from Code in institue, botique ado project followed it and made some change
Slacks for some help when i had some problem
Ubuy for some pictures and describtions here
H&M for describtions here

Media

some Post picture was taken from pexels

Acknowledgements

my mentor, I receive support, advice, and feedback.
Slack for all the help and advices
Friends and Family that test it

code-institute-submissions / blandaren123-toysstore_juneresub Goto Github PK

blandaren123-toysstore_juneresub's Introduction