Software Development

Full-Stack E-Commerce & Custom CMS Platform

Published on March 04, 2026

Ready to see it in action?

Opens in a new tab

Important License & Branding Notice: 

The underlying code and architectural concepts of this project are open-source and provided for educational and portfolio demonstration purposes. However, the name "Afrostreet", along with its associated branding and business identity, belongs to a legally registered business. You are welcome to study or adapt the open-source code, but you must strictly remove and replace the "Afrostreet" name, branding, and logos before deploying it for any personal or commercial use.

Scroll down to see the setup for the project.

Project Overview

This project is a high-performance, full-stack e-commerce and content management platform tailored specifically for the Kenyan market. The objective was to build a system that bypassed the limitations of generic platforms (like Shopify or WordPress) by engineering a bespoke public storefront with native Safaricom M-Pesa integration, paired with a custom, Single-Page Application (SPA) style Admin Dashboard.

The resulting platform allows business owners to manage inventory, process mobile payments, publish rich-text articles, and generate real-time financial reports—all without unnecessary page reloads or complex backend navigation.

Core Features: Public Storefront

  • Dynamic Catalog & Smart Discovery: A highly responsive grid layout that allows users to browse categories, view high-quality product imagery, and discover new items via a smart-matching "Related Products" algorithm.
  • Marketing & Promotions Engine: Auto-scrolling Featured Highlights (Hero Banners), Top Deals, and Exclusive Offers that the admin can dynamically control and swap out in real-time.
  • Native M-Pesa Integration: * STK Push: Instant phone prompts for frictionless, real-time checkout.
    • C2B Paybill Fallback: A robust background system for manual payments, featuring automated Safaricom validation (C2B Validation) and confirmation callbacks to instantly update order statuses.

Core Features: Custom Admin Dashboard (HQ)

Designed to completely replace the default Django admin, this control center operates asynchronously for maximum efficiency.

  • Advanced Image Processing Engine: Integrated a custom frontend image manipulation tool (Cropper.js). This forces strict aspect ratios (e.g., 1:1 for products, 16:9 for blogs, 4:5 for banners) before securely uploading the cropped image to the server via Base64 data streams.
  • Live Order Management (POS): A real-time data table allowing admins to view, filter, and instantly update order statuses. It includes a manual "Admin Checkout" flow to auto-generate user accounts and build carts for customers ordering over the phone.
  • Rich Content CMS: Full CRUD capabilities for a fashion and lifestyle blog utilizing CKEditor 5. It includes a custom-built Base64 upload adapter, allowing authors to securely drag and drop inline images directly into their articles.
  • Real-time Analytics & Reporting: Visualized revenue, order volume, and user growth metrics using Chart.js. Includes a one-click PDF Report Export engine powered by xhtml2pdf for stakeholders.

Technology Stack

  • Backend: Python 3, Django, Django REST Framework (DRF)
  • Database: SQLite / PostgreSQL
  • Frontend: Vanilla JavaScript (ES6+ async/await), Bootstrap 5 (CSS Grid, Modals, Offcanvas)
  • Key Libraries: Cropper.js (Image handling), Chart.js (Data visualization), CKEditor 5 (Rich text), xhtml2pdf (PDF generation).

Technical Highlights & Problem Solving

One of the major technical hurdles was ensuring consistent UI/UX across the storefront despite admins uploading images of varying sizes. Instead of relying on heavy backend image resizing (which often distorts images and drains server resources), I engineered a forced-cropping mechanism on the frontend. By intercepting file uploads, capturing the user's crop selection, and sending it to the Django REST API as a Base64 string, the platform guarantees that every product, banner, and article cover perfectly matches the site's layout structure before it ever hits the database.



🚀 Local Setup & Installation

⚠️ Important Note Regarding the Live Demo The live demo of this project is hosted on Heroku. Due to Heroku's ephemeral file system in this configuration, image storage and file uploads are not supported in the live environment. To test the full functionality of the custom Cropper.js image engine and the CKEditor Base64 upload adapters, please download the source code and set it up on your local machine using the instructions below!

Prerequisites

Make sure you have Python 3.10+ and Git installed on your machine.

Step-by-Step Installation

1. Clone the repository:

git clone https://github.com/saulnyongesa/afrostreet_project_ecommerce.git
cd afrostreet_project_ecommerce

2. Create and activate a virtual environment:

For Windows:

python -m venv env
.\env\Scripts\activate

For macOS and Linux:

python3 -m venv env
source env/bin/activate

3. Install the required dependencies:

pip install -r requirements.txt

4. Apply database migrations: This will generate the local SQLite database.

python manage.py makemigrations
python manage.py migrate

5. Create an admin account: You will need these credentials to log into the custom dashboard.

python manage.py createsuperuser

6. Start the development server:

python manage.py runserver

🌐 Accessing the Application Locally

Once the server is running, open your web browser and navigate to:

You can find me and follow my journey here:

  • 💼 Connect on LinkedIn: For professional networking, insights on software architecture, and discussions on the business side of web development. Let's connect here

  • 📺 Subscribe on YouTube: For full video tutorials, system design breakdowns, and deep dives into Python and Django. Click here to subscribe
  • 📱 Follow on TikTok: For quick, bite-sized coding tips, debugging hacks, and a behind-the-scenes look at my day-to-day life as a developer. Follow me here
  • 📘 Connect on Facebook: Join the conversation, ask questions about this tutorial, and interact with other developers. Like the page here

Need a similar solution?

I can help you build scalable and efficient systems like this one.

Hire Me