Toy Store
Live application can be found here
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
- As a User I can write a comment or rate so That people know how good products is or give a thought
- As a User I can use wishlist so That i can save it for later
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
Futures implement
- A system to keep track of how many products you have and when something is out of stock
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
-
sign up works and gets confirm mail
-
Wishlist works and can only add if you logged in
-
Review works and edit review when logged in
-
order works, webhooks and mail confirm
-
Mailchimp works
-
confirmation
-
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
- After i add reviews and wishlist, got error 500
- solution was i didnt migrate to heroku.
Validator Testing
W3C HTML
w3C Jigsaws
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
- 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
Credits
Contents
- 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