E-commerce · MERN Stack

ShopZen — Full-Stack E-commerce Platform with Admin Dashboard

Client

Retail Client (Dummy)

Industry

E-commerce / Retail

Type

Full-Stack Web Application

Delivered

8 Weeks · 2024

shopzen.vercel.app

Live Storefront Preview — Product grid, real-time inventory alert, cart sidebar

</> Project Overview

⚠ The Challenge

A growing online retailer was running their store on a generic template platform that couldn't support their custom discount logic, multi-image product variants, or the real-time inventory alerts their warehouse team needed. They required a custom-built solution.

💡 Our Solution

We built ShopZen — a full-stack MERN e-commerce platform with a customer-facing storefront, a seller dashboard, and an admin panel. Features include product variant management, a cart and checkout flow, Stripe payment integration, order tracking, and a real-time inventory alert system.

✓ The Outcome

ShopZen replaced their template platform entirely. The custom discount engine handles all their promo logic. Inventory alerts have eliminated stockouts. Order processing time dropped by 60% with the new admin panel, and the customer checkout experience improved measurably — cart abandonment fell by 35%.

MongoDBExpress.jsReactNode.jsRedux ToolkitStripeJWTTailwind CSSCloudinarySocket.ioVercelRailway

</> Key Results

-60%

Order Processing Time

-35%

Cart Abandonment Rate

Real-Time

Inventory Alert System

8 Weeks

Full Build Timeline

</> Build Process

Phase 01

Discovery & Planning

The client came with a detailed list of pain points from their existing platform — primarily around product variants, discount rules, and inventory. We ran a 2-day discovery sprint to map the full customer journey (browse → cart → checkout → delivery tracking) and the admin workflow (product management → order fulfillment → reporting). The data model was designed around products with nested variant arrays, order state machines, and inventory thresholds.

Phase 02

Design & Build

The storefront was built in React with a clean, minimal UI — product grid, filter sidebar, product detail with image gallery, and a multi-step checkout. Redux Toolkit managed cart state with localStorage persistence. The backend handled product CRUD, order lifecycle, and a custom promo/discount engine supporting percentage and flat-rate codes. Stripe handled payment processing. Socket.io powered real-time inventory alerts to the admin panel. Cloudinary managed all product images with transformation on delivery.

Phase 03

Testing & Launch

We stress-tested the checkout flow and payment webhook handling. Discount edge cases (expired codes, minimum order thresholds, stacking rules) were unit tested. The inventory alert system was tested under concurrent order simulation. Full cross-device QA before deployment. Deployed on Vercel + Railway with automated GitHub Actions CI/CD pipeline.

"ShopZen gave us everything our old platform couldn't. The discount engine alone handles scenarios we had to manually manage before. Our team loves the admin panel."

E-commerce Director

Retail Client

</> Tech Stack Breakdown