#Ecommerce webshop
My final project for Code Institute's Full Stack Web Developer course.
#Goal
It's an ecommerce website where a user can buy ingame items for their nintendo switch. The users only have three critical goal paths:
-
View the store's inventory of amiibo villagers.
-
Keep track of the villagers they want to purchase using favorites or using a shopping cart. Note: They don't need to create an account or anything to purchase an item.
-
Check out and pay for their items.
The central target audience for the website are people who want to buy in-game items for their Switch. These are people of all ages.
#User Stories
-
Authentication: User can signup/login/logout
-
Filtering: User can view lists of items per category and search by name, filter by species or personalities.
-
Shopping Cart: User can add items to shopping cart. User can edit or remove items from the shopping cart.
-
Checkout: User can fill in a form and submit shipping info. After submitting this info, order is processed and a success page is displayed.
-
Order processed: user gets confirmation email with order nr
-
Customer can create a profile (only for logged in users), where the user can save their favorite villagers, view order history or leave reviews on items.
-
If the user is logged in, he can view profile page. If not, user gets redirected to the login page.
-
User can edit and update profile details them if needed
-
Customer is able to read reviews of other customers
-
Pagination added to reviews so it's not too crowded on a single page
-
Customer can use text search function to find something specific
-
User gets notification when an item is added/edited/removed to/from the cart.
-
Shows the total price of all items (on every page)
-
Allows them to purchase items, purchasing takes the user to payment form
-
Create a form that allows the user to enter billing info
-
On submit, the order status changes to purchased
-
A link to the shopping cart must be present on every page. This should display order total.
-
Users, even anonymous ones that haven’t registered or logged in, should be able to add items to their cart.
-
A user can edit the billing information on their profile.
-
A user can sign up for a newsletter
-
User can also leave a review.
#Tested on
Ipad pro (landscape and portrait), laptop with HPDI, laptop with MPDI, iphone 5, iphone 6/7/8, iphone 6/7/8 plus, iphone X (phones tested in portrait mode).
#Nice to haves
- When adding a product to favorites include some type of heart animation
#Main Tools/Frameworks
Django, Stripe, Django Crispy Forms, Allauth, Pillow, Heroku, SQlite3, Bootstrap
#Languages This project uses HTML, CSS, JavaScript and Python programming languages.
#Testing Testing is done using the Django testing framework. Everything else was tested manually.
#Validation Services:
The following validation services and linter were used to check the validity of the website code.
W3C Markup Validation was used to validate HTML.
W3C CSS validation was used to validate CSS.
#Deployment to Heroku
Steps to take:
Firstly, create a Heroku app by clicking the "New" button in the Heroku dashboard.
Secondly, we need to link our local Git repository to Heroku, which is what we're going to do in this video.
Thirdly, create a requirements.txt file (pip freeze > requirements.txt), which contains a list of our dependencies.
And finally, create a Procfile (echo web: python run.py > Procfile), which is a special kind of file that tells Heroku how to run the project.
In heroku dashboard select the master branch then click "Deploy Branch".
Link Heroku app to a GitHub repo. You can selectively deploy from branches or configure auto-deploys.
#MEDIA
Image sources taken from: https://www.nintendo.com/, www.starface.com.