Full-Stack E-CommercePersonal Project · 2024

Forever

A production-grade full-stack e-commerce platform with a separate admin dashboard, Stripe payments, and persistent cart sync — three interconnected apps built as one system

What is it?

Forever is a fully-featured MERN stack e-commerce application covering everything a real online store needs — a customer-facing storefront, a separate admin control panel, a RESTful backend API, Cloudinary media management, and live Stripe payment processing with webhook-based order confirmation. This is not a tutorial clone — it's a complete, multi-application architecture with dual authentication flows, persistent cart logic that survives sessions and merges on login, and real order management built to production standards.

What I Did

I architected and built three interconnected applications from scratch — the customer storefront, the admin dashboard, and the backend API — as one cohesive system. I handled the full stack: MongoDB schema design, REST API development, dual-tier JWT authentication, Cloudinary media pipeline, Stripe checkout integration with webhooks, and a persistent cart system that merges guest and user carts seamlessly on login.

  1. Three-Application Architecture

    Designed the project as three separate applications sharing one backend — a customer frontend, an admin dashboard, and a Node.js/Express API. This clean separation means admins and customers hit different React apps but talk to the same RESTful API with role-aware middleware controlling access.

  2. Dual-Tier JWT Authentication

    Built two completely separate authentication flows — one for customers and one for administrators — both powered by JWTs. Custom Express middleware validates both the token and the admin role flag, so a customer JWT can never access admin endpoints even if intercepted.

  3. Dynamic Product Management

    Engineered a product model supporting multi-image carousels, category taxonomy, size selection logic, and a bestseller flag. Admins upload multiple product images in one flow — sent to Cloudinary, auto-optimised, and stored as URLs in MongoDB.

  4. Persistent Cart with Session Sync

    Built cart logic using React Context API and a custom ShopContext provider. Cart state persists across browser sessions and syncs automatically on login — merging guest cart items with the user's saved cart from MongoDB so shoppers never lose what they added before signing in.

  5. Stripe Payment Integration with Webhooks

    Implemented a secure Stripe checkout flow with server-side payment intent creation and real-time webhook verification. The order is only confirmed in MongoDB after Stripe confirms the charge — preventing order creation on failed or abandoned payments.

  6. Admin Dashboard

    Built a dedicated admin panel where administrators can add and manage products, monitor live order statuses across all customers, update delivery stages, and manage inventory — all through a purpose-built interface separate from the customer storefront.

Applications Built as One System
3
Authentication Architecture
2-Tier
Live Payment Processing
Stripe
Cart Persistence
Zero Loss
  • Customer storefront with product browsing and search
  • Multi-image product carousels with size selection
  • Bestseller flagging and category filtering
  • Persistent cart — survives browser sessions, merges on login
  • Stripe checkout with server-side payment intent creation
  • Webhook-based order confirmation after payment success only
  • Separate admin dashboard application
  • Admin product management — upload, edit, delete
  • Multi-image upload via Cloudinary with auto-optimisation
  • Live order status monitoring for all customers
  • Delivery stage management from admin panel
  • Dual JWT auth — separate flows for customers and admins
  • Role-based API middleware blocking cross-tier access
  • Fully responsive across mobile, tablet, and desktop
  • Three-application system (storefront, admin, API) built as one cohesive architecture

  • Dual-tier JWT auth — customer tokens can never access admin endpoints by design

  • Cart merge on login — guest cart items preserved and synced with user's saved cart

  • Stripe webhooks confirm payment server-side before any order is written to MongoDB

  • Custom Express middleware stack handles auth, role checks, and error boundaries independently

Ready to build something amazing?

Interested in learning more about this project or starting a new full-stack development journey? Let's talk.