WebMart is a full-featured e-commerce web application built with Django and PostgreSQL which allows users to browse products,login, manage shopping carts, place orders, and manage their user accounts.
Source code can be found here
The live project can be viewed here
Table of Contents
- Purpose of the project
- Features
- User Experience
- Development Process
- Data Model
- Testing
- Libraries and Programs Used
- AI Usage in Development
- Deployment
- Development Note
- Credits
This project was developed as a learning exercise to demonstrate full-stack web development skills using Python with Django and PostgreSQL. It showcases practical implementation of e-commerce functionality including user authentication, product management, shopping cart operations, and order processing with a modern, responsive user interface.
- User Authentication: User registration, login, and dashboard
- Product Catalog: Browse products by categories with detailed product information
- Shopping Cart: Add/remove items from cart with persistent storage
- Order Management: Place orders and view order history
- Responsive Design: Mobile-friendly interface using Bootstrap 5
- Admin Panel: Django admin interface for managing products, categories, and orders
- Toast Notifications: User feedback with success, error, warning, and info messages
The following pages are visible to all users, logged in or not.
Homepage (landing page)
The landing page offers users different options:
- Navigate through categories
- Navigate through products
- View cart items
- Store
- Search for products
- Sign in
- Register
Store page
Different options available are :
- Product details view option
- View cart
- Search for products
- Sign in
- Register
Products details page
Different options available are :
- Navigate through categories
- Product details view option
- View cart
- Search for products
- Sign in
- Register
Carts page
Different options available are :
- +/- for increase/decrease options
- Remove cart item
- checkout (Login/Register page)
- Continue shopping
The following pages are only available to logged in users.
Dashboard
This page shows details on:
- Total no.of orders placed
- Order history
- User details
- Logout
Checkout
This page offers users different options:
- Enter billing address
- Place order
- Continue shopping
- Logout
This section details the key elements of the user experience (UX) design for the project, including visual design choices, color schemes, typography, and wireframes. It provides insight into the aesthetic and functional decisions made to enhance usability across different devices, ensuring a seamless and accessible experience for users.
-
Inter font This font was used throughout the project for headings and prominent text.This is a great choice for an e-commerce platform as it balances professionalism with modern aesthetics.It is a modern, clean sans-serif font that provides excellent readability for web interfaces.
-
Font Awesome - Icon library The navbar heavily uses Bootstrap Icons for the header elements.
-
Bootstrap Icons - Icon library Throughout the product pages and cart functionality for action-related icons.
The following colour palette was used in the project:
Primary Colors
| Color | Hex Code | RGB | Usage |
|---|---|---|---|
| Blue | #3167eb |
rgb(49, 103, 235) | Primary brand color, buttons, hover states |
| Orange | #ff9017 |
rgb(255, 144, 23) | Accent color, alerts, warnings |
| Green | #00b517 |
rgb(0, 181, 23) | Success states, confirmations |
| Red | #fa3434 |
rgb(250, 52, 52) | Error states, alerts |
These wireframes illustrate how each page is designed to adapt across various screen sizes, including Mobile, Tablet, Desktop, and Larger Screens. While the overall layout remains consistent, adjustments have been made to optimize the user experience for each viewport. Key differences include variations in button placement, layout, and card arrangements to ensure usability and visual clarity across devices.
Desktop
Homepage
Product detail page
Cart Page
Login page
Register
Dashboard
Checkout page
Tablet
Homepage
Product detail page
Cart Page
Login
Register
Dashboard
Checkout page
Mobile
Homepage
Product detail page
Cart Page
Login page
Register
Dashboard
Checkout page
The development process for this project was carefully planned and documented to ensure efficient progress and transparency.
All user stories can be found here.Issues were posted to the board and moved from "Todo" to "In Progress" to "Done" as they were completed. MoSCoW prioritisation was applied using the labels must-have, should-have, and could-have. Project Board
Must have
Could have
This section provides an overview of the data models used in the project, represented through Entity-Relationship Diagrams (ERDs) for each application.
Custom user model for authentication and user management.
- Primary Key: id
- Unique Fields: username, email
- Purpose: Stores user account information
- Special: Uses Django's AbstractBaseUser for custom authentication
Product categorization system.
- Primary Key: id
- Unique Fields: category_name, slug
- Purpose: Organizes products into categories
- Features: Includes images via Cloudinary
Product catalog with inventory management.
- Primary Key: id
- Unique Fields: product_name, slug
- Foreign Keys: category_id → Category
- Purpose: Stores product information and inventory
- Features: Price, stock tracking, availability status
Shopping cart sessions for anonymous and authenticated users.
- Primary Key: id
- Purpose: Maintains shopping session
- Features: Can be associated with cart_id (session) or user_id
Individual items within shopping carts.
- Primary Key: id
- Foreign Keys:
- user_id → Account (nullable)
- product_id → Product
- cart_id → Cart (nullable)
- Purpose: Tracks products added to cart with quantities
- Features: Supports both guest and logged-in user carts
Payment transaction records.
- Primary Key: id
- Foreign Keys: user_id → Account
- Purpose: Stores payment information and status
- Features: Tracks payment method, amount, and status
Customer order details.
- Primary Key: id
- Foreign Keys:
- user_id → Account (SET_NULL on delete)
- payment_id → Payment (nullable)
- Purpose: Stores order information and shipping details
- Status Options: New, Accepted, Completed, Cancelled
- Features: Complete shipping address, order tracking
Junction table linking orders with products.
- Primary Key: id
- Foreign Keys:
- order_id → Order
- payment_id → Payment (nullable)
- user_id → Account
- product_id → Product
- Purpose: Tracks individual products within orders
- Features: Stores quantity and price at time of purchase
| Relationship | Type | Description | On Delete |
|---|---|---|---|
| Account → Order | One-to-Many | User places multiple orders | SET_NULL |
| Account → Payment | One-to-Many | User makes multiple payments | CASCADE |
| Account → CartItem | One-to-Many | User has multiple cart items | CASCADE |
| Account → OrderProduct | One-to-Many | User purchases multiple products | CASCADE |
| Category → Product | One-to-Many | Category contains multiple products | CASCADE |
| Product → CartItem | One-to-Many | Product in multiple carts | CASCADE |
| Product → OrderProduct | One-to-Many | Product in multiple orders | CASCADE |
| Cart → CartItem | One-to-Many | Cart contains multiple items | CASCADE |
| Payment → Order | One-to-Many | Payment for multiple orders | SET_NULL |
| Payment → OrderProduct | One-to-Many | Payment covers multiple products | SET_NULL |
| Order → OrderProduct | One-to-Many | Order contains multiple products | CASCADE |
- Account: username, email
- Category: category_name, slug
- Product: product_name, slug
- CartItem: user_id, cart_id (supports guest carts)
- Order: payment_id (order can exist before payment)
- OrderProduct: payment_id (order product can exist before payment)
- User Deletion: Orders are preserved with SET_NULL to maintain historical records
- Product Deletion: Cascades to cart items and order products
- Cart System: Supports both anonymous (cart_id) and authenticated (user_id) shopping
- Order Status: Controlled by predefined choices for consistency
- Timestamps: Automatic tracking on most models for audit trail
- Images: Stored externally via Cloudinary CDN for scalability
- RegistrationForm.clean() enforces matching password and confirm_password; all fields use Django’s required-field validation and widget hints for UX.
- Account enforces unique on email and username, EmailField validates email format, and max_length caps names/phone. The custom manager requires non-empty email and username.
- product_name and slug are unique; max_length on text fields; price and stock use IntegerField to enforce numeric input; is_available is a BooleanField.
- Business-rule validation keeps cart item quantity from dropping below 1 (item is removed instead), preventing negative quantities.
RegistrationForm with Password Verification:
This custom clean() method:
- Retrieves cleaned form data
- Compares password fields
- Raises ValidationError if they don't match
- Prevents users from creating accounts with mismatched passwords
The Testing section covers various strategies used to ensure the application's functionality and quality
| User Stories | Status |
|---|---|
| View paginated list of products | ✅ Success |
| Filter products by category | ✅ Success |
| View Product Details | ✅ Success |
| Search Products | ✅ Success |
| Add product to cart | ✅ Success |
| View shopping cart | ✅ Success |
| Increase/decrease cart items | ✅ Success |
| Remove Item from Cart | ✅ Success |
| User Registration | ✅ Success |
| User login | ✅ Success |
| Dashboard | ✅ Success |
| User cart | ✅ Success |
| Checkout Page | ✅ Success |
| User Logout | ✅ Success |
| Messages for action | ✅ Success |
| Cart Persistence for Logged-in Users | ✅ Success |
| Browse Categories through sidebar | ✅ Success |
| Cart item auto‑added on login | ✅ Success |
All pages on the live site were tested with the default list of devices in Chrome Devtools.
Desktop
Tablet
Mobile
The Lighthouse testing was carried out using a chrome extension .The results are displayed by page below:
Lighthouse results
All python code is validated by the Flake8 linter (installed in VSCode) and CI Python Linter. The exceptions to this were django migration files, urls and similar files. However, any custom models, views and forms were validated.
webmart
views.py
store
views.py
accounts
views.py
carts
views.py
orders
views.py
All JavaScript code is validated by the ESLint (installed in VSCode) and jshint.
Main templete - base.html
Contains global JavaScript that runs on all pages - Bootstrap functionality and toast notifications
Checkout page - checkout.html
Contains page-specific JavaScript for order success modal display
All HTML was validating using the page source of the deployed project using W3C Markup Validation Service. All pages were clear of all errors/warnings.
Results
The single CSS file was validated using the W3C Validation Service
Results
The W3C CSS validation error shown above are due to the Inter font stylesheet use : @font-feature-values
This rule belongs to CSS Fonts Module Level 4, which browsers support but the W3C CSS Validator does not. The validator only checks CSS Level 3 + SVG, so anything newer is labeled “Unrecognized”.
Info from Copilot
This section highlights the key libraries, tools, and platforms utilised throughout the development of the project. These technologies played an essential role in various aspects of the project, from wireframing and version control to deployment and testing.
- Balsamiq: Wireframing tool used to design all project pages
- dbdiagram.io: Online tool for converting text into visual database diagrams
- Git: Version control system implemented via GitHub terminal
- GitHub: Cloud repository for code storage, deployment via GitHub Pages, and project tracking (User Stories, Epics, bugs)
- VS Code: Primary IDE with ESLint and Flake8 linters configured for JavaScript and Python validation
- Heroku: Deployment platform for the live application
AI tools, particularly GitHub Copilot, were used throughout the development of this project to improve productivity, support learning, and enhance overall code quality. Below is a summary of how AI contributed across different areas.
AI also acted as a learning companion by:
- Explaining CSS properties and Bootstrap utilities
- Highlighting accessibility considerations
- Providing multiple approaches to solve implementation challenges
- Helping reinforce clean, maintainable coding patterns
- Speeding up development through predictive "ghost text" suggestions
AI played a practical role in resolving technical challenges, such as:
- Identifying and fixing Python and Django errors
- Suggesting improvements to views, models, and template logic
- Assisting with debugging issues encountered during Heroku deployment
- Offering alternative solutions when facing implementation roadblocks
AI assisted with several non‑code elements of the project, including:
- Generating logo and icon concepts
- Creating initial drafts for user stories
- Helping structure and refine the README file
- Improving clarity and consistency in written documentation
AI tools like GitHub Copilot served as an efficient coding partner, helping to accelerate development, reduce syntax errors, and support best‑practice learning. All AI‑generated suggestions were reviewed, tested, and adapted to meet the specific requirements of this project.
The site was deployed to Heroku from the main branch of the repository early in the development stage for continuous deployment and checking.
1 . Login to Heroku and navigate to the Dashboard.
2 . Click the New button.
3 . Choose a unique app name and select the region relevant to you.
4 . Go to the Settings tab, and click Reveal Config Vars. Add the following config variables, if not already present:
- Django secret key
- Database URL
- Cloudinary API
5 . In your local repository, add a Procfile to the root directory with this content:
web: gunicorn webmart.wsgi
6 . Add your Heroku app URL to the ALLOWED_HOSTS list in settings.py.
7 . Set DEBUG to False in settings.py, then commit and push your changes to GitHub.
8 . Navigate to the Deploy tab in the Dashboard. Under Deployment Method, click the GitHub icon to connect your Heroku app to your GitHub repository.
- Enter your repository name, click Search, then click Connect. 9 . Under the Manual Deploy section, click Deploy Branch. Once deployed, you should see the message "Your app was successfully deployed".
10 . Click Open App to open the app in the browser.
1 . Create a virtual environment in the newly cloned project folder using : python -m venv venv
2 . Activate the virtual environment : source venv/bin/activate
3 . Install the project dependencies : pip3 install -r requirements.txt
4 . Run the server : python manage.py runserver
During development, a configuration file containing environment variables was unintentionally included in a commit. The issue was identified quickly, and immediate corrective action was taken. A new database was created, and all sensitive credentials were securely regenerated and updated. This ensured the system remained protected and followed best‑practice security standards.
Below are key reference sources which gave me the confidence for completing this project