Modern Abaya E-commerce

The problem

A modern abaya retail business needed a complete e-commerce presence — not just a storefront, but a full operational system including an admin dashboard for product management, a payment flow, image handling at scale, and product ordering logic that gave the business control over how items appeared to customers.

My role

I built the entire system end to end — storefront frontend, backend API, admin dashboard, payment integration, media pipeline, and deployment.

What I built

Customer-facing storefront

• Product catalog — responsive grid with search, filtering, and pagination
• Dynamic product detail pages — matching a shared design system across the application
• Cart and checkout — real-time cart state management with quantity updates, item removal, and order summary
• Paystack payment integration — secure checkout flow with payment verification and order confirmation

Admin dashboard

• Product CRUD — full create/read/update/delete interface for managing the product catalog
• Image upload pipeline — multi-image upload to AWS S3 with preview, reordering, and deletion
• Product priority and reorder logic — drag-and-drop or manual ordering to control which products appear first in the storefront
• Order visibility — admin view of completed orders with status tracking

Backend and data layer

• Express API — RESTful endpoints for products, orders, cart, and image management
• MongoDB schemas — structured data models for products, orders, and user state
• S3 integration — direct upload with signed URLs, file validation, and cleanup on deletion

Cart state architecture

One of the more interesting technical decisions was the real-time cart state system. Instead of a simple local-state cart, the implementation ensured:

• Cart badge updates immediately across all pages when items are added or removed
• Quantity changes reflect in real time without page refresh
• Cart state persists correctly across sessions
• Admin can see successful orders as soon as payment completes

What this project proved

This is one of the strongest full-stack product delivery examples in my portfolio because it combines:

• Storefront UX — responsive, search-enabled, with a coherent design system
• Payment integration — real money flow with Paystack, not just a mock
• Media management — S3 pipeline handling multiple images per product
• Admin operational tools — not just a public-facing site but backend business logic
• Product ordering logic — business-controlled display priority, not just database insertion order
• State management — real-time cart behavior across the application

Outcome

The business received a complete, operational e-commerce platform — from storefront to admin — that could be managed independently after handoff. The combination of payment handling, media pipeline, product ordering, and admin tooling made this a real business tool, not just a website.