We delivery a piece of your country taste at your door!
Live app link here
-
As a user, I would like to be able to …
1.1 ... register using the name, email, username and password;
1.2. ... login on website using my email/username and password;
1.3 ... logout easily;
1.4 ... have all information about website services on the landing page;
1.5 ... see details about each available box;
1.6 ... add boxes on my bag;
1.7 ... check all available boxes and products;
1.8 ... pay for my product using a Credit Card;
1.9 ... add my shipping and billing address;
1.10 ... get a confirmation email with my order and shipping details;
1.11 ... create my profile
1.12 ... check my previous order details on the profile page;
1.13 ... subscribe the newsletter;
1.14 ... unsubscribe the newsletter;
1.14 ... select five products to add to my box;
1.15 ... check user's review's on boxes;
1.16 ... add a review on boxes;
1.17 ... edit or delete my reviews on boxes.
-
As a site admin, I would like to be able to …
2.1 ... have admin privileges and check the product management page;
2.2 ... be present to a list of products to edit or delete;
2.3 ... create products or add them to the boxes;
2.4 ... o delete created products or boxes;
2.5 ... the user to be redirected to a specific page if any error happens.
- Project Goal
Create an e-commerce app that allows people (users) who lives out of their home countries or loves different cuisines to have access to a range of regional products from various part of the world.
- A simple, straightforward, intuitive UX experience;
- An explicit content;
- An easy navigation for the user through all the features;
- A site that is visually appealing on most devices.
Flowchart
- Customer Flowchart
- Management Flowchart
DER - Diagram Entity Relationship
Agile Methodology
All functionality and development of this project were managed using Jira
- Credentials to this management tool will be provided during submission.
All sprints are described here.
Test cases were linked with every User story presented above, and can be found in TESTING.md- Automated testing section.
-
Sprint 1 - 04/01/2022 - 11/01/2022 (Finished at 09/01/2022)
- Initial setup
- As a developer, I want to set up Django templates
- Create Database and Deployment on Heroku
- As a developer, I want to set up a database to store all data
- As a developer, I want to deploy a website on Heroku
- Create user registration and login/logout features
- As a user, I want to register on the website
- As a user, I want to login to the website
- As a user, I want to logout on website
- As a site admin, I want to have admin privileges
- Initial setup
-
Sprint 2 - 09/11/2022 - 16/01/2022 (1 week)
- Create products page
- As a shopper, I want to see details about each available box
- As a shopper, I want to add products to my bag
- As a shopper, I want to check all available products
- As a shopper, I want to sort a list of products by region (Not done on this sprint. Will be added in future sprints)
- Create products page
-
Sprint 3 and 4 - 17/01/2022 - 24/01/2022 (2 weeks)
- Create order and payment pages
- As a user, I want to pay for my product
- As a user, I want to add my shipping and billing address
- As a user, I want to get a confirmation email with my order and shipping details
- Create order and payment pages
-
Sprint 5 - 30/01/2022 - 06/02/2022
- Create profile
- As a user, I want to create my profile
- As a user, I want to check my previous order details
- Create profile
-
Sprint 6 - 07/02/2022 - 14/02/2022
-
Add products to the box
- As a user, I want to select five products to add to my box
-
Product Management
- As a site admin, I want to create products or add them to the box
- As a site admin, I want to delete created products
- As a site admin, I want to be present on a list of products to edit or delete
-
-
Sprint 7 - 13/02/2022 - 20/02/2022
-
User acceptance
- As a user, I want to use all features on the platform without significant issues
-
Validation
- As a site owner, I want to make sure that all files are validated
-
- A clear and straightforward layout is in place to ensure users can navigate intuitively and have a leisurely experience.
- Navbar is fixed on top to facilitate users easily navigating through pages. Small navigation is the same on all pages to ensure easy navigation.
- Footer is fixed on the bottom with links to social media and newsletter subscription.
Wireframes created with Balsamiq. The project was developed from initial wireframes, and some modifications were made during the development process to respond to user feedback and ensure the best usability.
- UI was changed during the project to ensure a better user experience.
Click to see wireframes (before UI changes):
HomePage
Register Page
Login Page
Reginal items Page
Bag Page
Payment Page
Order Placed Page
Site Map Page
- Colours
The Colour scheme was generated using the eyedropper plugin to get one colour from the logo image and colours to create the colour palette.
- Font Selection
Two complimentary fonts were chosen with Google Fonts to be used across the website.
The chosen fonts were Roboto for headings and navbar and Lato for links, buttons and paragraphs.
- A traditional B2C (Business to Customer) application has been chosen, with a straightforward and user-friendly responsive interface.
- This online store offers regional products to the final customer. The customer can receive five standard products and five chosen products in each box.
-
This site has a Facebook Business Page with a link on the page footer. It can be viewed here
-
Users can subscribe to our newsletter to receive all offers in their email box. Subscription links are available on the footer on all pages.
-
Upon registering, the user is redirected to a new page confirming their subscription. The site owner can now see the new subscriber on their audience dashboard, and new campaigns will be sent to them too.
- Fixed Navbar allow the user easy access to all pages.
-
On the left side, How it works and Boxes links leads the user to these pages;
-
On the right side, Account and Cart buttons are available to the user;
2.1 Not logged user:
- Register and Login options are available
2.2 Admin logged user:
- Product Management, login, and Logout options available
2.2 Customer logged user:
- Login and Logout options available
2.3 Cart Button are available to all users and leads to the respective page
- Collapsed navbar on smaller devices to wrap all options and assure better navbar design.
- Sticky footer present on all pages with a link to subscribe to the newsletter and social media links.
- Homepage jumbotron
- A brief explanation about the store with a button link to the products page
- 3 steps images
- A brief explanation about how the store works
- Cards with all available boxes are present on this page with images, descriptions and prices.
- Buttons are available on each card to lead the user to add the box directly to the cart or customize it
- A card with all box information are available to the user (box name, description, image, standard products, selectable products and price)
-
The user can customize the box by choosing five items from the checkbox list before adding the box to the cart. If the user doesn't customize the box, five surprise items will be added to their box on the cart page.
-
User's reviews are available on the bottom of the box card and can be viewed by all customers (logged or not)
- A logged user can add a review about the box by clicking on Add Product Review button.
-
User can check all data about the boxes in the cart (box name, quantity, selected products, number of items and total price)
-
On the right side, an order summary is available with several items and the total price
- Optional buttons can lead the user back to the box page or checkout
- Shipping address
- Users can add a shipping address and save it on the profile if they didn't do it before.
- user can add the same billing address just by checking the checkbox
- Billing address
- users can add a billing address and save it on the profile if they didn't before.
- User can auto-complete billing address with a saved shipping address from profile
-
All shipping and billing addresses are available to be confirmed by the user
-
If users want to change address user can come back to the last page and change it
- Credit card only payments are available on this page
Click here to check how to test payment with stripe testing card
- To test payment use:
Card number: 4242 4242 4242 4242
MM/YY: 04/24
CVC: 424
Zipcode: 42424
- When payment is confirmed, user will receive an email about it.
- On his page, the admin user can find all options to add, edit or delete products, boxes and products on boxes, and check all sent newsletters or send a new one.
1.1 Send newsletter
- Admin users can send the newsletter to all users or choose some of them.
1.2 Newsletters sent
- Display a list of all sent newsletters
1.3 Add box, product and product on the box
- Admin users can add all products in the database from the frontend.
1.4 Box, product and product on box list to edit or delete
- Admin users can edit or delete all products in the database from the frontend.
1.5 Edit box, product and product on the box
- Admin users can edit all products info in the database from the frontend.
- Paginate Box, Products and Products on boxes list to show the admin user only 20 items per page;
- Create a search feature to the management page to make it easier to find boxes, products and products on boxes;
- Store all orders ins a JSON file to have all data even if boxes or products were deleted;
- Create a wishlist in the user profile;
- Display all users comments on the profile page;
- Only allow users to comment on the product if they have already bought it.
Python 3.0
- Balsamiq: Balsamiq was used to create the wireframes during the design process.
- Favicon Generator: Used to develop favicon used on the website.
- Font Awesome: Font Awesome was used on all pages to add icons for aesthetic and UX purposes.
- Grammarly: Used to correct any spell mistakes on readme and app text.
- Git: Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub: GitHub is used to store the project's code after being pushed from Git.
- Google Fonts: Google fonts are used to add fonts for aesthetic and UX purposes.
- Django: Framework used to add structure to the platform.
- PGAdmin: Used to administer Database and generate DER.
- Multi Device Website Mockup Generator: Used to create mockup image.
All testing and code validation details are described in a separate file called TESTING.md and can be found here.
Bugs | Solutions |
---|---|
Cart count item works when user add the product to the cart, do to cart, come back to the previous page and refresh | Change function on context and add cart count on it |
Get cart total function stop works when ordered box are deleted | Create a exclude item on this property |
This App is deployed using Heroku.
Heroku Deployment steps
- Ensure all dependencies are listed on requirements.txt.
Write on python terminal pip3 freeze > requirements.txt
, and a list with all requirements will be created to be read by Heroku.
-
Setting up your Heroku
2.1 Go to Heroku website (https://www.heroku.com/). 2.2 Login to Heroku and go to Create App.
2.3 Click in New and Create a new app
2.4 Choose a name and set your location
2.5. Navigate to the Resources tab
2.6. Click on Resources and Seach for Heroku Postgres and select it on the list.
2.7. Navigate to the deploy tab
2.8. Click in Connect to Github and search for 'nandabritto' GitHub account and 'PP5' repository
2.9. Navigate to the settings tab
2.10. Click on Config Vars, and add your Cloudinary, Database URL (from Heroku-Postgres) and Secret key.
-
Deployment on Heroku
3.1. Navigate to the Deploy tab.
3.2. Choose the main branch to deploy and enable automatic deployment to build Heroku every time any changes are pushed on the repository.
3.3 Click on manual deploy to build the App. When complete, click on View to redirect to the live site.
Forking the GitHub Repository
-
By forking the GitHub Repository, you will be able to make a copy of the original repository on your own GitHub account, allowing you to view and/or make changes without affecting the original repository by using the following steps:
Log in to GitHub and locate the GitHub Repository At the top of the Repository (not top of page), just above the "Settings" button on the menu, locate the "Fork" button. You should now have a copy of the original repository in your GitHub account.
-
Making a Local Clone
Log in to GitHub and locate the GitHub Repository Under the repository name, click "Clone or download". To clone the repository using HTTPS, under "Clone with HTTPS", copy the link. Open Git Bash Change the current working directory to the location where you want the cloned directory to be made. Type git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/nandabritto/PP5
Press Enter. Your local clone will be created.
- All pictures and images used in this project are from Depositphotos and Unsplash.
JustDjango Youtube Channel - Used as a base to develop cart and checkout features
Dennis Ivy Youtube Channel- Used as a base to develop cart, checkout and confirmation email features
Master Code Online- Used as a base to develop newsletter app
Code With Stein- Used as a base to develop box reviews app
- Stack Overflow is a valuable resource for solving lots of issues.
- W3schools and Django documentation for general reference.
I would also like to thank:
- My husband Guilherme for all the support on stressful moments, helping to figure out lots of bugs and for reviewing everything.
- Code institute tutors and my CI Mentor Daisy Mcgirr for the guidance and help with several issues and bugs.