Full-stack e-commerce

E-commerce Admin & Storefront

Two Next.js 13 apps that work as a pair: an admin dashboard where one account runs several stores, and a storefront that gets every billboard, product and filter from the admin's API.

Overview

2apps: admin and storefront

9Prisma models

5API resources per store

The challenge

A small shop needs two things that usually come from different products: somewhere to manage the catalog and orders, and a fast public store.

I wanted to see how far one Next.js codebase could go as admin, CMS and API at once, with a separate storefront that holds no data of its own.

The approach

I built it in August 2023 following Code With Antonio's tutorial, then connected the admin to a MySQL database on PlanetScale, deployed both apps on Vercel and branded the store as 002. Every table in the Prisma schema carries a storeId, so one login can run several shops and each gets its own /api/{storeId} routes.

Two details stood out. PlanetScale doesn't allow foreign keys, so the schema uses Prisma's relationMode and indexes every relation field by hand. And checkout writes an unpaid Order before sending the shopper to Stripe; the webhook then marks it paid, saves the address and archives the sold products so they drop out of the API.

Multi-store CMSBillboards, categories, sizes, colors and products managed per store, with Cloudinary image uploads.
Generated APIPublic GET routes for the storefront; POST, PATCH and DELETE only for the signed-in store owner via Clerk.
Filterable storefrontCategory pages filter by size and color through URL query params, with a cart persisted in localStorage.
Stripe checkoutCheckout sessions tied to an order id, settled by a signed webhook.

From admin to checkout

01ManageCreate a store, billboards and products
02ServePer-store REST routes over Prisma
03ShopStorefront fetches, filters, adds to cart
04PayStripe Checkout, webhook marks it paid

One admin, one API per store.

The admin writes to MySQL through Prisma and exposes each store's catalog as public routes. The storefront only calls those routes; checkout runs back through the admin and Stripe.

Diagram: admin dashboard writes to a generated per-store API backed by Prisma and PlanetScale, which the storefront reads; four-step Stripe checkout round trip

Store at the root.

Nine Prisma models. Products link to a category, size and color, categories link to a billboard, and orders reach products through a join table.

Data model diagram of the Prisma schema: Store, Billboard, Category, Product, Size, Color, Image, Order and OrderItem

Filters live in the URL.

Each category page shows its own billboard, and size and color filters are query params passed straight to the products API, so a filtered view is just a link.

Category page for Tops filtered to Blue, with size and color filter buttons and two sample products

A cart that survives a refresh.

The cart is a small Zustand store persisted to localStorage. Checkout posts the product ids to the admin, which returns a Stripe Checkout URL.

Shopping cart with three sample products and an order summary with a Checkout button

Tools

Next.js 13
TypeScript
Prisma
MySQL · PlanetScale
Clerk
Stripe
Cloudinary
Tailwind CSS

Built while following Antonio Erdeljac's (Code With Antonio) Next.js 13 e-commerce admin and store tutorial, August 2023; the design and architecture are his. I connected it to PlanetScale, deployed both apps and branded the store. Both deployments are offline, so the storefront screenshots come from a local run of the code against a mock API with sample products. The admin needs Clerk and a live database, so it is shown as diagrams drawn from its code and Prisma schema.

Next projectFusen Gum Shop