Skip to content
UPPER LAYER®

Case study · Fashion e-commerce · Product Build

StyleNestFashion e-commerce Case Study

A full-stack fashion store: a storefront with Stripe checkout, a separate admin dashboard for products and orders, and an Express + MongoDB API.

Type
Own product
Role
Design, backend, frontend, deployment
Status
Live on Vercel
Service
Product Build
Last updated
StyleNest e-commerce browser home page featuring Latest Arrivals hero banner and clothing collections
StyleNest mobile home page featuring Latest Arrivals banner and navigation menu

The problem

A small fashion store needs an online shop for customers and a separate back office to manage products and orders.

What I built

A monorepo with three parts that deploy separately: a React storefront, a React admin dashboard and an Express + MongoDB API. Customers browse, add to cart and check out with Cash on Delivery or Stripe; admins manage the catalog and order statuses.

Walkthrough

See it working

From browsing to checkout and the admin dashboard, in one minute.

What it does

The features that matter

What it actually does, one feature at a time.

01

Catalog

Pagination, search, category and sub-category filters, price sorting, and detail pages with size selection.

02

Cart that follows you

The cart syncs between local state and the signed-in customer's account.

03

Checkout

Cash on Delivery or Stripe Checkout, with server-side payment verification that clears the cart.

04

Order history

Customers see each order's status, payment method and items.

05

Secure sign-in

JWT auth with bcrypt-hashed passwords, and Redis-backed login rate limiting by IP.

06

Admin dashboard

Add products with up to four Cloudinary image uploads, delete products, and view and update order status.

Under the hood

How it works

The part nobody sees, step by step.

01

Browse

The storefront asks the API for products; lists are cached in Redis and invalidated when the catalog changes.

02

Cart

Items live in local state and sync to the customer's account once they sign in.

03

Pay

Cash on Delivery, or Stripe Checkout with the payment verified on the server before the cart is cleared.

04

Fulfil

The order lands in MongoDB, and the admin dashboard moves it through its statuses.

Screens

Every screen, as shipped

Captured from the live product at style-nest-frontend-rho.vercel.app.

Shop

The home page, the latest collection and the full catalog with filters.

StyleNest storefront hero banner displaying Latest Arrivals collection with Shop Now link
The home page
StyleNest Latest Collections product grid showcasing apparel items with prices and ratings
The latest collection
StyleNest All Collections catalog with sidebar category filters, sorting menu, and apparel cards
The catalog, with filters and sorting

Check out

Pay with Stripe Checkout; the payment is verified on the server before the cart is cleared.

Stripe Checkout sandbox payment page for StyleNest order with card entry and currency selection
Stripe Checkout
StyleNest customer authentication portal with email login, password recovery, and sign-up form
Sign in to keep your cart and orders

Run the store

A separate admin dashboard to add products, manage the catalog and move orders along.

StyleNest admin panel product creation form with image uploaders, category fields, and pricing
Add a product with up to four images
StyleNest admin catalog management table displaying inventory items, prices, and edit actions
The catalog
StyleNest admin order dashboard listing customer orders, payment status, and fulfillment options
Orders, with a status to update

The rest of the store

About and contact pages.

StyleNest About Us page detailing company mission, brand vision, and product photography
About
StyleNest Contact page displaying customer support email, store address, and careers link
Contact

On mobile

The same store on a phone.

StyleNest mobile storefront showing responsive header, cart counter, and hero arrival card
Home
StyleNest mobile collections page with filter button, sort dropdown, and clothing catalog grid
The catalog
StyleNest mobile contact screen with store location details and email inquiries
Contact

The stack

Frontend
React 18 · Vite 5 · React Router · Tailwind CSS · Axios
Backend
Node.js · Express 4 · JWT · bcrypt · Multer · Stripe
Data
MongoDB (Mongoose) · Redis (ioredis) · Cloudinary
Delivery
Vercel (API, storefront and admin deployed separately)

The result

3

separate deployments on Vercel: the API, the storefront and the admin dashboard, each with its own config

Source: Storefront and admin both returned HTTP 200 on 4 Oct 2026

Related Service

Service 04

Product Build

Need a system like StyleNest? I audit your workflows, build custom integrations, and hand over the keys in your accounts.

Start a project

Tell me what needs to change

Share your product and the work you need. I'll help you find the right scope and next step.