Skip to content

Full-Stack case study

Shop-Zone

MERN e-commerce storefront with a JWT-secured REST API

Full-StackDeployedLive demo (opens in a new tab)React frontend (opens in a new tab)Express API (opens in a new tab)
Shop-Zone storefront showing the welcome banner and navigation
Commits
49

across 2 repositories

Build window
14 days

7 Jun 2026 to 20 Jun 2026

Lines of code
1,481

hand-written source

Technologies
12

in the stack

01

Overview

A React storefront with real-time search, category filters, product pages and a cart, backed by a separate Node/Express REST API on MongoDB Atlas that implements user auth, admin-only product management and order processing.

Goal. I built this to learn React and then Node/Express properly by shipping one complete application: a catalogue and cart on the front, authentication and orders on the back.

My role

Solo developer: frontend and backend, deployed separately

02

What it does

  • 01Product catalogue loaded from the REST API
  • 02Real-time search and category filtering
  • 03Product detail pages with description and rating
  • 04Cart with add, remove and quantity controls and a live total, shared through React Context
  • 05API: register, login and profile with bcrypt-hashed passwords and 30-day JWTs
  • 06API: public product reads; create, update and delete restricted to admins
  • 07API: create orders, list my orders, fetch an order; admin lists all orders and marks delivery
  • 08CORS allow-list for the deployed frontend and a product seeder script
03

Architecture

CLIENT (VERCEL)EXPRESS API (RENDER)DATAReact appRouter, Context cartMiddlewareCORS, JWT protect, adminAuth routesregister, login, profileProduct routesCRUD, admin writesOrder routescreate, mine, adminMongoDB AtlasUser, Product, Order models
The React app talks to an Express API protected by JWT and admin middleware; Mongoose models persist users, products and orders in MongoDB Atlas.
04

Engineering decisions

MVC folder layout

Routes, controllers, models and middleware are separate folders so each route file only wires URLs to handlers.

Stateless auth

JWTs signed with a server secret protect routes; an admin middleware checks the isAdmin flag for write operations.

Separate deployments

Frontend on Vercel and API on Render, with the API's CORS allow-list limited to the deployed frontend.

05

Tech stack

  • React 18
  • Vite
  • Tailwind CSS
  • React Router
  • Context API
  • Axios
  • Node.js
  • Express
  • MongoDB Atlas
  • Mongoose
  • JWT
  • bcrypt
06

Timeline

  1. 7 Jun 2026

    Frontend started

    React project setup, structure and product data.

  2. 11 Jun 2026

    Cart and navigation

    Cart in the main app, navbar, product details and footer fixes (11-13 Jun).

  3. 13 Jun 2026

    Backend started

    Express server, modules and MongoDB connection (13-14 Jun).

  4. 14 Jun 2026

    Auth and controllers

    Auth middleware, login, product and order controllers.

  5. 15 Jun 2026

    Routing and seeding

    Product routing and a seeder for product data.

  6. 16 Jun 2026

    Frontend uses the API

    Home page now loads products from the backend.

  7. 20 Jun 2026

    Deployed

    Deploy links and READMEs for both repositories.

07

Scope and next steps

  • The frontend currently consumes the product API only; login, checkout and order screens are not wired to the API yet, and checkout is a demo flow.
  • The API is hosted on a free tier, so the first request can take a few seconds.
08

Related notes

Building the Shop-Zone REST API with Express, JWT and MongoDB

MVC folders, bcrypt, JWT middleware and admin-only routes in a first Node.js backend.

Next project

Developer Portfolio