- UX
- Project Goals
- Target Audience Goals
- Site Owner Goals
- User Stories
- User Requirements and Expectations
- Images
- Wireframes
- Testing
- Bugs
- Static files
- Deployment
- Features that have been developed
- Technologies Used
- Planning + Testing:
- Bugs
- Deployment
- The goal of this project is to help users find all the baby products they need for their little ones.
- The project is created for all people and parents interested on organic baby products.
- The website needs to be attractive and interactive providing an good User Experience to everyone who will use our e-commerce website.
- The users need to be able to check through the website , find products, view images, make purchase.
- A website that serves as an online shopping, providing all the details needed, efficient and saving time for shopping.
- Visual interaction using pictures of products.
- To have access on the website by creating profile and saving their shipping details.
- Navigate, sort and filter products based on their needs.
- Adding products in shopping bag and to secure checkout.
- A website that works on mobile , tablet , desktop.
- Edola KO: " "As a user i want to navigate in a simple and well structured website which will make my navigation easy and fast."
- Anna : " When i buy online i like to be able to login on the website and save my details so the next time i dont need to fill them out again."
- Kim : " I like attractive websites but simple as well , to provide me all the information needed and visual content so i know what product i will purchase."
- Addam : " As a user i want to be able to receive confirmation email with all my order details."
- Make attractive website and get the users make a purchase.
- Make it easy for the users to navigate and choose their favorite products.
- Offer different categories of products to choose from.
- Offer images and a good description of the products.
- Offer blog posts related with interesting topics about my site
-
Requirements:
- Use an interactive e-commerce website and find good products.
- Navigate the website using responsive search menu to sort fast the categories of interest.
- Provide information of the products as much as possible.
- Use images of products.
- Need to see products rating.
- To be able to keep items in shopping bag while navigation on other products.
-
Expectations:
- When you click on a product to provide all the details.
- When adding shipping information to be able to save them for next purchase .
- Content to be informative and visuali satisfying.
- Navigation takes user to specific parts of the website.
- Receive confirmation order details via email .
- I used images from google for this project.
- Git
- Bootstrap
- Jquery
- Font-Awesome
- TinyPng (image compression)
- Am-I-Responsive
- W3-Official-Validator
- Stripe
- Heroku
- AWS
- Pep8
- The first step of testing my code is checking if my website is responsive.
- Keeping in mind users storys : "As a user i want to navigate in a simple and well structured website", i navigated through my site and everything is rensponsive.
- When i run the server and open in browser i can see my website responding as it should .
- The next step to test is related to user stories is about being able to create an account and login
- When i click on register heroku app i can create an account using the Temp Mail with the disposable temporary email and after conforming the email, im able to login.
- When i try to login i can succesfully login.
- Next test is about selecting a product and put in bag. This functionality is working as expected use is able to add a product in bag and save it while they keep browsing
- All image link work as expected.
- When i add products to the bag is working as expected.
- Testing were done whith the purchase functionality and is succesful , users can go through purchase steps adding their shipping details, payment details and after the purchase they get a confirmation email.
- The user details are saved in their profile as well the oreder details.
- Confirmation email is automatically send to user after purchase.
- Superuser functionality working as expected the admin of the page can login and have access to add new products, update them or delete them.
- WHen i create a product as an admin of the store, is created succesfully.
- When i delete a product is working and redirects me to the homepage.
- Blog page is rensponsive so users of my site can add blog post but only admin of page can update or delete the posts.
- After manual testing i did the automated testing through W3C online validator and PEP8 checker by using validate by input text.
Is some known bugs in my project :
- Duplicate ID , but i followed the example from the course when creating this project.
- Element li not allowed as child of element nav in this context, i followed the example from the course when creating this project.
I hosted the static files for this project on AWS by creating an account, bucket, group, user, and connected with heroku is displaying all my static files, also created a folder media and uploaded all my images.
I used Stripe for payment proccess as it is one of the safest financial service for e-commerce websites.
The project is hosted on Heroku. For it to run correctly the following is required:
-
A Procfile that instructs Heroku how to run the app.
-
requirements.txt. This file informs Heroku what dependencies are required to run the app correctly. It is created by typing on the terminal pip freeze > requirements.txt.
-
Create a new app in Heroku
Setup in Heroku the environment variables required to successfully run the app in Settings, Config Vars.
- AWS_ACCESS_KEY_ID
- AWS_SECRET_ACCESS_KEY
- DATABASE_URL
- EMAIL_HOST_PASS
- EMAIL_HOST_USER
- SECRET_KEY
- STRIPE_PUBLIC_KEY
- STRIPE_SECRET_KEY
- STRIPE_WH_SECRET
- USE_AWS
Connect Heroku to the project's repository on Github and setup automatic deployment. Heroku then will build a new version of the app every time a new deployment is pushed to Github. Heroku app