Hello and welcome to B's Beauty Emporium™ (BBE) eCommerce Website!
At BBE, we harness the power of God's earth to produce vegan, organic, handmade bodycare products that are luxurious, indulgent, and intensely moisturising.
This is a fully functional eCommerce web application that allows buyers to browse products, filter by category / price / rating, register an account, checkout securely, and leave product reviews.
The plaform reflects the brand's values: natural, ethical, handmade, and high-quality.
This website was created using Django and has full Create, Read, Update and Delete (CRUD) functionality with an intuitive User Interface to make purchasing products simple and straightforward!
This is an e-Commerce website built as a fully functional e-commerce platform for the owner of a growing business which produces vegan, organic, handmade bodycare products. The planning phase focused on defining the business goals, shopper needs, and technical constraints. The website was created following the Five Planes of Website Design, ensuring a thoughtful balance between strategy, scope, structure, skeleton, and surface. The project was driven by the following:
- Provide a clean, trustworthy online storefront for handmade vegan bodycare products.
- Enable users to browse by category, price, and rating.
- Offer a seamless shopping experience from discovery to checkout.
- Support shopper accounts, authentication, and basket management.
- Communicate brand values: natural, ethical, handmade, and high-quality.
- Fully deployed Django‑based e‑commerce site.
- Product catalogue with filtering and sorting.
- User authentication (login, signup, account area).
- Basket, checkout, and order confirmation flow.
- Responsive UI for mobile, tablet, and desktop.
- Admin interface for product and order management.
-
Increase visibility for handmade vegan bodycare products.
-
Build customer trust through transparency and product clarity.
-
Encourage repeat purchases through a smooth user journey.
-
Provide a scalable platform for future product expansion.
This section outlines the commercial foundations of BBE Store, the marketing engine that drives customer acquisition and retention, and the newsletter strategy that supports long-term engagement and nurturing.
- Eco-conscious consumers - prioritising ethical sourcing, transparency and ingredient purity
- Vegan-lifestyle consumers - prioritising 100% plant-based
- Sensitive-skin consumers - prioritising non-synthetic, fragrance and paraben free
- Functional - verified reviews and ratings for trust
- Ethical - honest, non-greenwashed messaging
- Emotional - premium self-care experience
- Marketing - SEO-optimised pages and social media
- Partnership - ethical lifestyle communities
- Direct - pop-up markets
- Relationship Style - warm, trust-building through authenticity
- Relationship Mechanisms - Personalised email flows, review request emails
- Retention Mechanisms - Newsletter campaigns, seasonal promotions
- Primary - direct product sales
- Secondary - seasonal offers
- Opportunties - subscription boxes
- Product - formulation & testing, small-batch production, packaging & labelling
- E-Commerce - website maintenance, UX optimisation, product photography, inventory management
- Marketing - SEO optimisation, email
- Operations - order fulfilment, customer support, review moderation, supplier management
- Product - organic raw materials, eco-friendly packaging, production equipment
- Brand - identity & design, product photography, customer reviews
- Technical - e-Commerce platform, hosting infrastructure, analytics, email marketing system
- Human - owner, product maker, marketing, admin, fulfilment
- Suppliers - organic, ethically-sourced, eco-friendly packaging
- Logistics - delivery & courier services
- Marketing - vegan-lifestyle bloggers, ethical product directories
- Technology - payment processors, email marketing, hosting providers
- Fixed - hosting & infrastructure, branding & design assets, admin & moderation time, software subscriptions
- Variable - raw materials, packaging, shipping, marketing, photography
- Future Optimisation - bulk ingredient purchasing, automated fulfilment, subscription-based revenue
-
As a shopper, I want to view available products so I can select something to purchase.
-
As a shopper, I want to search the website so I can quickly locate specific products.
-
As a shopper, I want to read reviews so I know what other shoppers think about the products.
-
As a shopper, I want to review items in my cart so I can make adjustments prior to checking out.
-
As a shopper, I want to checkout so I can have my products shipped to my desired delivery address.
-
As a shopper, I want to leave a review of products so I can contribute my own thoughts and opinions.
-
As a shopper, I want to view past purchases so I can keep track of items I have purchased previously.
-
As a super user, I want to be able to add a product to my database so it is displayed in my store.
-
As a super user, I want to be able to modify the list of products so I can adjust product offerings over time.
-
As a super user, I want to be able to print and keep track of orders so I can effectively fulfill customer orders.
-
As a super user, I want to be able to monitor user reviews with full Create, Read, Update, and Delete (CRUD) functionality.
-
The website should have a navigation menu that is consistent across all pages and devices.
-
The website should have clear messaging to shoppers on what the website is for and provide some information on the owner.
-
The website should provide a succint list of available products at first glance, allowing the shopper to click for more detail.
-
The website should allow for category-based browsing, e.g. Moisturising, Sensitive, Exfoliating, New Arrivals.
-
The website should provide a smooth checkout experience with a summary of all the items purchased in a single order.
-
The website should offer a shopping basket with ability to manage the quantity of items added to basket during each session.
-
The website should offer an Administrative Dashboard for Inventory Management to include full Create, Read, Update, and Delete (CRUD) functionality.
-
The website should promote engagement and collaboration through functionality to leave reviews on products purchased.
-
The website should provide shoppers with a way to get in touch with the owner directly, and explore social media platforms.
This Django project consists of:
Apps - Core products app for handling items, search / sort functionality, rendering primary pages, checkout app for handling store transactions, profiles app for preserving shopper purchase history.
Templates - Modular templates for reusable layouts base.html index.html product.html product_detail.html review_product.html 404.html.
Models - Basic products model for displaying items with fields like name image category price, and reviews model for displaying product reviews.
URLs - Routed with urls.py using meaningful patterns like search filter basket/ checkout/ review/.
Views - Handles logic for rendering page details with views.py and search queries with dynamic responses.
Bootstrap4 - For responsive layout across all screen sizes with context-sensitive image display.
Stripe - For handling payments and keeping track of transactions.
BBE e-Commerce Website uses PostgreSQL from Code Institute for storing data.
BBE e-Commerce Website was developed using Agile methodology. User Stories are accompanied by a set of Acceptance Criteria and Tasks, helping to define and test functionality.
The dominant colours used in this project were inspired by what they symbolise:
- Gold - rgb(248, 196, 64) - used to symbolise earthly riches.
- Ivory - #FDFBED - known for sophistication, evokes feelings of tranquility.
- Black - #0C1618 - used to symbolise elegance, power, authority and sophistication.
The fonts used in this project were inspired by a desire to showcase stylish and legible write up without detracating from the products themselves. After a brief search on Google, the following Google Fonts imports were used:
- 'Roboto' as the main font for all text
- 'Sans-Serif' as the default in case 'Roboto' fails
- 'Lato' as the text to be used in the comments section and the review text containing author, date and time stamp
BBE e-Commerce Website includes a fully responsive navigation bar on all pages and consists of links to the various pages listed on the right and bottom of the Store Name, which doubles up as a Logo. There is also a fully functional 'Search Bar' for quick access to specific products.
On smaller devices, the navigation bar is a burger icon, providing easy transition between various pages without the need of the 'Back' browser button. Clicking the 'Home' icon takes the shopper to the 'Home Page' from anywhere on the website.
The landing page opens with a clear delivery of the purpose of the website - with an invitation to explore the various products available for purchase.
Additionally, there is a live basket view at the top right corner of the screen at all times so shoppers can keep an eye on their spend.
Once in, the shopper is presented with a scrollable view of all products with a maximum of 4 products per row (one on mobile) showing the name of the product, image, category, price, as well as number of reviews and average rating.
To encourage shoppers to engage with content, they are able to view product details, ratings and reviews without an account.
The image above image shows the options available when 'ALL BODY SCRUBS' is selected from the 'BODY SCRUBS' category dropdown options. This also shows clickable sub-category tags for available Body Scrubs which users can browse further, if they so wish.
The image above image shows the options available when 'ALL BODY BUTTERS' is selected from the 'BODY BUTTERS' category dropdown options. This also shows clickable sub-category tags for available Body Butters which users can browse further, if they so wish.
The image above shows the options available when 'ALL NEW ARRIVALS' is selected from the 'NEW ARRIVALS' category dropdown options. This also shows clickable tags from different categories available on the website, indicating to the shopper the type of bodycare products manufactured.
Furthermore, to save shoppers having to scroll back up to the top of the page, the products page, presented in a scrollable view on all devices, has a 'scroll to top' arrow on the bottom right of the screen. This enables shoppers to quickly jump to the top of the page at any point (shown in the products view above for desktop and below for mobile).
The image above shows the dropdown options available in the 'ALL PRODUCTS' category. This is so shoppers can search for products using specific criteria.
The image above shows the dropdown options available in the 'BODY SCRUBS' category. This is so shoppers can search for body scrubs according to their desired effect.
The image above shows the dropdown options available in the 'BODY BUTTERS' category. This is so shoppers can search for body butters according to shopper category.
The image above shows the dropdown options available in the 'NEW ARRIVALS' category. This is particularly useful for returning customers so they can see at a glance, newly added items.
The project includes a 'Search' functionality that allows shoppers to efficiently locate and view products. Appropriate messaging accompanies search results as seen from the above example where product exists in database.
The image above shows the page view when a shopper's search does not produce a match.
BBE e-Commerce Website allows shoppers to quickly sort all available products by price, category, and rating. This provides flexibility for shoppers working to a tight budget, wanting a product that targets a specific skin concern, or wanting to checkout top-rated products.
When logged in, Administrators can perform inventory management tasks such as add, modify, and delete products directly from the User Interface (UI). These actions trigger clear messaging to the Administrator at the start and end of each action.
Provisions have also been made for Administrators to perform CRUD actions on a mobile device, if necessary.
A warning message is shown to the Administrator asking them to confirm if they wish to delete an existing product from the database. It also reminds them that the action is irreversible.
The website offers shoppers the option to register for full access to the site's functionality such as retaining purchase history, and contributing reviews on purchased products.
The above image displays the email received by shoppers when signing up to the store.
The website offers returning shoppers the option to login to continue with access to the site's full functionality such as reviewing previous purchases, and product reviews.
As shown in the image above, incorrect login details are also flagged.
The website offers logged in shoppers the option to update their delivery address on their profile. They can also see their purchase history.
Order Line Items are clickable so shoppers can both reorder quicker, and go directly to the product to leave a review.
Logged in shoppers on mobile can see the first three characters of their username.
BBE e-Commerce Website has a dynamic shopping basket view which allows users to view items in their basket, increase or decrease the quantity of each items, and remove items they no longer wish to purchase. The image above shows the view when an item is added to the basket, and the confirmation message shown to the shopper.
The image above shows the shopping basket not having met the threshold for free delivery, while the image above shows the shopping basket having met the threshold for free delivery.
Alternatively, shoppers may wish to discontinue their shopping expedition and empty their basket completely. The decision was made to not include an 'Empty Basket' option as it was seen as counterintuitive. However, shoppers can delete as many items from their basket as they wish.
The image above is of an empty shopping basket designed to encourage shoppers that reach this point to change their minds.
BBE e-Commerce Website has a fully functional checkout form with, data validation for ensuring key customer details are keyed in correctly. The form also has Stripe integrated for payment handling.
The above image shows the checkout view without any form entries, while the below image shows the view with data validation activated.
BBE e-Commerce Website offers logged in users the option of saving their payment details to their profile for a faster checkout experience. The image above shows this option as 'Save with Link' which shoppers can check or leave unchecked.
Shoppers are able to view product ratings and read reviews without being logged in or signing up. This view displays the number of reviews on the product.
Restrictions are applied to the product review process, ensuring that only logged in shoppers with a purchase history of that specific product can leave a review. Additionally, admin moderation has been applied in order to ensure only useful and honest reviews are displayed on the site.
The above image shows the view for shoppers not logged in, asking them to login to leave a review.
The above image shows the view for a logged in shopper who is yet to purchase the product and so cannot leave a review.
The above image displays an invitation for a logged in shopper to leave a review on a previous purchase.
The above image shows the product review page where shoppers are expected to provide a rating and review text.
The above image shows the review left by a shopper which has been approved and has also received a response from the store admin.
The above image shows a logged in shopper's product review submission awaiting approval from site administrator.
BBE e-Commerce Website has a customised 404 page to enhance user experience.
BBE e-Commerce Website has a clean footer with the year of incorporation, the name and address of the company, socials and acceptable payment methods.
The footer also includes an invitation to subscribe to the store Newsletter. This option is for shoppers who would like to stay informed of new product launches, promotional events, or news about the company and creative process. Email validation is applied to the form to ensure a quality subsriber list, avoid reputation of spamming emails, maximise enagagement and ensure effective campaigns.
- Wishlist functionality
- Inventory status communication
- Blog or educational content on vegan skincare
- Robust delivery and returns information for various locations
|
|
- GitHub: Used to host source code and version control.
- VSCode: Used as Integrated Development Environment (IDE).
- Heroku: Used for deploying the project.
- Font Awesome: Source of icons used in this project.
- Unicode Emoji Characters: Source of emojis.
- Coolors: Used to generate color palette.
- Convertio: Used to compress images used in project for optimal load times.
- Favicon: Used to generate favicon for project.
- drawSQL: Used to create the Entity Relationship Diagram (ERD).
- Google Font: Used for the typography used in the project.
- Bootstrap4: Used for base styling of the blog.
- Cloudinary: Used for storing static files.
- Chrome Developer Tools: Used to debug project.
- Microsoft Copilot: Used for bug fixes.
- PostgreSQL from Code Institute: Used to create database.
- Code Institute Python Linter: Used to validate Python.
- W3C HTML Validator: Used to validate HTML.
- W3C CSS Validator: Used to validate CSS.
- Google Lighthouse: Used to test performance.
- Disposable Temporary Email Address: Used to test user registration functionality.
- Mail Chimp: Used for email marketing via newsletter subscription.
- Word Tracker: Used to search out top ranking keywords for SEO implementation.
- Privacy Policy Generator: Used for GDPR compliance.
- XML-Sitemap Generator: Used to generate sitemap for project.
- Django was used as the framework for the blog.
- Allauth for the login authentication.
- Pillow for rendering images.
- Crispy Forms for collecting and posting comments.
- Cloudinary for hosting shopper images.
- Gunicorn for handling the HTTP requests in production.
- Psycopg2 for aiding communication between Django and PostgresSQL.
- Formtools for additional form utilities.
- Whitenoise for serving static files.
- Countries for Country dropdown options.
For a comprehensive overview of manual and automated testing carried out in this project, including test scenarios and methodologies, please refer to TESTING.md
Development Phase
| Bug | Action | Outcome |
|---|---|---|
| Favicon not rendering to Browser | Moved Favicon images from 'Root' to 'Static' folder of main project | Fixed |
| Virtual Environment Pushed to GitHub | Deleted using git rm command in terminal | Fixed |
| Duplicate base.css file causing styling issues | Deleted duplicate file | Fixed |
| Images not rendering as expected | Reviewed naming conventions and used relative path | Fixed |
| Unable to migrate to secure database | Installed correct version of psycopg | Fixed |
| Fatal error creating processes due to change in project name | Reset VS Code terminal settings.json | Fixed |
| Unable to display individual product details | Updated return url in views.py | Fixed |
| Sort selector on products page fixed to bottom of screen | Added missing div close tag | Fixed |
| Sort selector logic not working on sorting by highest and lowest rated | Renamed database field to 'rating' to avoid formatting issues | Fixed |
| Update functionality in shopping basket view not working | Removed href from anchor tag | Fixed |
| Toast not working for 'remove' functionality in basket view | Updated server return response | Fixed |
| Django returns 'TemplateDoesNotExist' when using Crispy Forms | Installed Django Crispy Forms template packs as separate packages | Fixed |
| Failed to redirect to checkout success page | Corrected indentation issue in checkout views.py | Fixed |
| Images not rendering on Heroku | Set DEBUG environment variable in Heroku to False | Fixed |
| Quantity selector in basket.html allows negative selection | Used ID instead of class for and amended name and value to 'quantity' | Fixed |
| Quantity selector in product_detail.html allows negative selection | Applied similar changes made to basket.html | Fixed |
| Unable to log in or create user | Applied migrations | Fixed |
| Country dropdown in checkout form not showing full vertical text | Update self.fields[field].widget.attrs class in checkout forms.py | Fixed |
| Product form for Inventory Management not rendering | Use setattr() to set class in product forms.py | Fixed |
| Product detail page no longer visible post adding code for shopper reviews | Amended user data field type and deleted migrations | Fixed |
| Product reviews not updating as expected - shows 'NoneType' error | Removed @property decorator from update_rating method in Product models.py | Fixed |
| Review URLs not rendering as expected - shows 'NoReverseMatch' | Updated order_id type to str in urls.py | Fixed |
| Review submissions not posting to database | Restructed save() method in Review models.py to always call super().save() | Fixed |
Deployment Phase
| Bug | Action | Outcome |
|---|---|---|
| Error loading Application in Heroku | Amended project name in Procfile | Fixed |
| Static files not served on Heroku | Wire up WhiteNoise to Django Middleware | Fixed |
| Error loading images on Heroku | Amended media urls | Fixed |
| Error loading Cloudinary files on Heroku | Amended Cloudinary API key in Heroku and set DEBUG to false | Fixed |
| Navigation links not working on mobile devices | Applied necessary indentation to code block | Fixed |
| User registration not working as expected | Imported login_required from django.contrib.auth.decorators in views.py | Fixed |
| Django Allauth signup.html throwing error 500 | Separated transblock tags from django block tags | Fixed |
| Email sending failed but are logged to console and registered in database | Added DEFAULT_EMAIL_HOST to Heroku and removed hyphen from EMAIL_HOST_PASS | Fixed |
| Reviews displayed prior to admin approval | Updated product_detail logic to only display approved reviews | Fixed |
| Error 500 thrown when accessing product_detail view | Corrected typo and applied safe override to user_pending_review conditional logic | Fixed |
| Persistent overlay on checkout page | Implemented overlay on continue to payment page only | Not Fixed |
- Navigate to PostgreSQL from Code Institute
- Input your email address
- Create a database
- Receive database link
- Copy Database URL to add to Heroku
- Navigate to Cloudinary and login.
- Go to the Dashboard.
- Copy the API Environment variable to add to Heroku.
-
In IDE:
- Use
pip3 freeze > requirements.txtin command line to create requirements for Heroku. - Create a
.python-versionfile with the Python version needed for Heroku to run project. - Create a
Procfileand addweb: gunicorn [app name].wsgito file for Heroku.
- Use
-
Navigate to Heroku and login.
-
Click "New" to create a new app.
-
Assign name to application, choose region and Click 'Create New App'.
-
On the next page click on the 'Settings' tab to adjust settings.
-
Click on 'Reveal Config Vars' and add the following keys:
- ClOUDINARY_URL (from Cloudinary)
- DATABASE_URL (from Code Institute PostgreSQL)
- EMAIL_HOST_PASS (generated by Gmail)
- EMAIL_HOST_USER (generated by Gmail)
- EMAIL_PASSWORD (generated by Gmail)
- SECRET_KEY (from OS Environment Variable)
- STRIPE_PUBLIC_KEY (from Stripe)
- STRIPE_SECRET_KEY (from Stripe)
- STRIPE_WH_SECRET (from Stripe)
-
Navigate to the Deploy tab, click Connect to Github.
-
Search for repository, select it and click 'Connect'.
-
To deploy, choose one of the following options:
- Automatic deploys - meaning Heroku will rebuild the app everytime a new change is pushed.
- For this option, choose the branch to deploy and click 'Enable automatic deploys'.
- This can be changed to manual deployment at a later stage.
- Manual deployment - which deploys current state of branch.
- Automatic deploys - meaning Heroku will rebuild the app everytime a new change is pushed.
-
Click 'Deploy branch'.
-
Click 'Open App' to launch application.
To create a copy of the repository in your account so you can modify independently, directly from GitHub:
- Click Fork in the top right of the repository page.
- A forked version of the project will appear in your own GitHub account.
-
Spencer's README was useful for setting up Django on my Windows machine.
-
Dimitris' README inspired the use of toggle view for tables.
-
Dan's README inspired some of the descriptions used in my write up.
-
Maria Pavlenko's Blog inspired User Stories format.
-
Dave Todaro's Article inspired User Stories format.
-Trey Hunner's Contribution helped fix the DjangoTemplateDoesNotExist bug with Crispy Forms.
-
A. Raouf Stack Overflow Contribution inspired method used to fix favicon bug.
-
Blackbull256's Reddit Contribution inspired method used to fix Heroku DEBUG issue.
-
vlogize Tutorial on Django / Heroku Debug = False Issues further clarified resolution of deployment issues on Heroku when working with static and media files.
-
Code Institute's Boutique Ado Walkthrough project created in line with course content and within scope of e-Commerce Specialisation Project.
-
Yuji 'Tomita' Tomita Stack Overflow Contribution inspired code to render Product form for Inventory Management.
-
Django Migrations Documentation provided guidelines on how to make effective changes to database using Django's Migrations commands.
Grateful to God for my sister, Boluwatife Akinmarin and friend, Rebecca Wilson-Kane - who both contributed immensely towards the content, reviews and ratings used in this project, as well as supporting with user testing, feedback on flow, navigation and checkout experiences.
My mentor who provided me with loads of tips and tricks to speed up the development of this project.
Special thanks to Code Institute's Learning Team who delivered the learning material used in the development of this project.