ZooTees is a E-Commerce site stocking animal themed Street wear clothes. It is fully responsive and accessible on all devices. It features collections of products, search functionality, a raffle to win discounted zoo trips, and all the usual store features such as a bag, easy checkout with saved details etc.
this is a B2C aimed E-Commerce store selling consumer
| User Story ID | Description | Epic |
|---|---|---|
| view all products | As a user/shopper I want to view all products So that I can compare and select products to purchase | View / Navigation |
| view individual item details | As a user/shopper I want to view individual item details So that I can identify their attributes & info to inform my purchases. | View / Navigation |
| products categories | As a user/shopper I want to see product categories So that I can view products grouped by collections and product types. | View / Navigation |
| Sign in/out | As a user/shopper I want to sign in/out So that I can access my account and sign out when needed. | Registration/Accounts |
| Register for account | As a user/shopper I want to register for an account So that I can track orders & save my details. | Registration/Accounts |
| View account | As a User/Shopper I want to view my account page So that I can see my previous orders & account details. | Registration/Accounts |
| Update details | As a user/shopper I want to update my details So that I can change my details used to purchase products (Delivery, Name etc) | Registration/Accounts |
| Purchase with no account | As a new user/shopper I want to purchase products with no account So that I can check out frictionlessly on my first visit. | Registration/Accounts |
| Reset password | As a user/shopper I want to reset my password So that I can regain access to my account if needed. | Registration/Accounts |
| Search for products | As a user/shopper I want to search for individual products So that I can find specific products I would like to purchase. | Searching |
| filter | As a user/shopper I want to filter by various attributes So that I can narrow my product search based on my own criteria. | Searching |
| View search results | As a user/shopper I want to view a list of search results So that I can view products that match my criteria. | Searching |
| Bag quantity | As a user/shopper I want to adjust the quantity of products in my bag So that I can adjust the order quantity via the bag without returning to the product page. | Checkout |
| Order summary | As a user/shopper I want to view an order summary before paying So that I can confirm the contents of my order before purchase. | Checkout |
| View bag total | As a user/shopper I want to view a total bag amount So that I can keep track of the total cost of my current order. | Checkout |
| Payment form | As a user/shopper I want to intuitively enter my payment details So that I can checkout quickly. | Checkout |
| Bag contents | As a user/shopper I want to view the contents of my bag So that I can keep track of the products I have selected to purchase. | Checkout |
| Product admin | As an admin I want to CRUD products So that I can create/update/delete products in the store | Admin |
| Prize admin | As a admin I want to CRUD coupons So that I can create/update/delete prizes for users | Admin |
| Raffle admin | As a admin I want to view raffle submissions So that I can validate & review entries to grant prizes. | Admin |
| Collection Admin | As a admin I want to CRUD collections So that I can create/update/delete collections of products. | Admin |
| User raffle form | As a User/Shopper I want to navigate to the raffle form So that I can submit a form to receive a prize. | Raffle Entry |
| Prizes | As a user/shopper I want to view any prizes I have received from raffle entries So that I enter the raffle, win prizes and view what prizes I have won. | Raffle Entry |
| User Story ID | Description | Epic |
|---|---|---|
| bag preview | As a user/shopper I want to interact with my shopping bag while browsing So that I can save/review/quote products at a glance while browsing the product views. | product app |
| Email confirmation | As a user/shopper I want to receive email confirmation upon signing up So that I can confirm my account creation has been successful. | Registration/Accounts |
| Order email confirmation | As a user/shopper I want to receive an order confirmation via email So that I can review my order details and confirm it was successful. | Checkout |
- all wireframes done on remarkable tablet
- Header featuring home & all products & collections & raffle link & search & user profile & cart links.
- Home hero page with description, shop now and collection links.
- Link to raffle page
- Collections page featuring Title, Description, Shop now and image.
- All products page with product images, title and price.
- product filtering
- Product detail pages, Product picture,name,price,description, size selector and add to bag button
- Raffle entry page with favourite collection and description field.
- will display prize code if user entered.
- Checkout page with all products in the cart and the usual product details.
- Checkout Form, to place an order and view all items in bag
- Profile page to view past orders, saved details or update details
created using pygraphviz
- HTML5
- Used for the page templates.
- CSS3
- Used to style the individual webpages.
- JavaScript
- Used to animate and add interactivity to pages.
- Python 3 & Django
- Used for the back end logic, database management, MVC functions.
- Git
- Git was used for version control.
- GitHub
- Used to store code, agile project management
- Gitpod
- An online IDE used in development
- Heroku
- A Cloud Platform the website is deployed
- AWS
- s3 bucket used to host static media.
- Favicons
- Used for icons on the page.
- Lighthouse
- Used to test the site for speed and accessibility.
- Pylint
- used for code validation
- W3C Markup Validator
- Markup validation service for HTML5
- Jigsaw Validator
- CSS3 Validation Service
- robots.txt & sitemap.xml were implemented.
- keywords were implemented to maximise search results.
- Mailchimp was set up to send newsletters to customers.
- facebook was used to post adverts and engage the customers.
- automated testing was not used due to time constraints and complexity. all the below methods have satisfied the requirements to prove the application is production ready and stable.
- all python code validated with pylint.
- some pylint results were ignored as fixing them broke functionality and a alternative could not be found.
- all html,css & js verified with djlint, a django template specific linter.
- black was used to format python to pep8 standard.
- see UX section for all user story testing.
- each user story was tested on multiple devices to ensure it satisfied the original spec.
- mailchimp newsletter behaves unpredictability on certain devices changing sizes, but cause is unknown.
- a webhook is not implemented but could prevent checkout errors.
- email confirmations have been disabled as I could not get google email intergrations to work.
- all links have been verified to work.
- each entry on the sitemap in addition to the user accessible pages has been checked to be a valid link.
- all forms are validated and will not accept incorrect entry.
- messages initially did not appear due to incompatibility with bootstrap 5 but have been fixed and confirmed to work on every page.
In your app
- add the list of requirements "pip3 freeze --local > requirements.txt"
- commit all changes
Log into heroku
- Log into Heroku or create a new account and log in
- create new app
- Choose Region closest to your location
Project Page
-
Go to Resources tab and init a new postgres DB
-
Database url will be available in config variable page.
-
Add django secret key, stripe keys and aws keys to the config variables.
-
This document describes the s3 init process
In Repo
- Procfile needs to be created in your app
web: gunicorn PROJ_NAME.wsgi
- In settings in your app add Heroku to ALLOWED_HOSTS
- Add and commit the changes in your code and push to github
Final step - deployment
- Go to section "deployment method", choose "GitHub Automatic Deployments”
- type the name of your repository and click "search"
- once Heroku finds your repository - click "connect"
- Click "Enable automatic deploys” and now your app will rebuild with each new commit
these templates were used to track my bugs, tasks to be completed and User Stories.
-
Richard ash for this snippet
-
Boutique ado for the tutorial code that inspired a lot of this project
-
stackoverflow for syntax help
-
fontawesome for icons
-
Pexels for the animal images
-
This etsy seller for thiese fonts
Animal Fonts Bundle SVG PNG Files Leopard Font Cow Font Tiger - Etsy
- my parents for helping me test the applicaton
- My girlfriend rachel for helping me create the product images
- code institute slack for the support when I needed it
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent