minimalist clothing store with working cart
A clothing storefront built to push the visual side — editorial typography, filtered collections and a slide-out cart that actually keeps count.
Demonstration build. Designed and built by me to show capability — not commissioned by a client. Everything you see is functional.
- Type
- Demonstration build
- Stack
- JS · Serverless API · Blobs
- Products
- 8, across 4 categories
- Backend
- 4 endpoints
Recorded from the live build, desktop and phone · try it yourself ↗
Why I built it
Retail is where design does the selling. This one was a deliberate exercise in restraint — serif display type, a lot of negative space, and no colour beyond warm neutrals — to prove a store can look expensive without looking busy.
Editorial, not catalogue
The hero sets the tone: a serif display face, an italic second line, and copy that sits left with room to breathe. Most storefront templates fill every pixel; this one does the opposite and reads as more expensive for it.
Eight products run across four categories — outerwear, knitwear, trousers and essentials — filterable in place with the same fade pattern used on the restaurant menu.
The cart works
Add an item and the bag counter in the header increments, the drawer slides in from the right over a dimmed overlay, and the subtotal recalculates. Remove an item and it reverses cleanly. Empty state included, because that is the state most demos forget.
It is a front-end cart — there is no payment step and no inventory behind it. What it demonstrates is the interaction layer, which is the part a client is actually judging.
Restraint as a technique
No framework, no animation library. The tilt and depth come from CSS transforms and layered translucent panels with backdrop-filter.
The whole store is 31 KB of code. A comparable template built on a storefront platform would load several hundred kilobytes of JavaScript before showing a product.
How it looks on a phone
Most of the people who will open a site like this are on a phone, on mobile data, standing up. Every layout here is checked down to 360px.
The backend
The cart only sends product ids and quantities. Prices, discounts, shipping and stock all live on the server, so editing the page cannot change what you pay.
What the server does
- Prices every bag on the server from its own catalogue — a tampered price in the request is simply ignored.
- Keeps live stock that sells down with each order and refuses an order the shelf cannot fill (HTTP 409, with what is left).
- Validates promo codes server-side, including minimum spends, and applies free shipping over the threshold.
- Restocks every day at midnight UTC so the demo never empties. No payment is taken.
- catalogue + live stock
- price a bag (no side effects)
- place an order · try it on the demo
- order status (id + email) · try it on the demo
// pick an endpoint marked GET/POST above to see the real responseThe decisions behind it
Slide-out cart
Add, remove, live subtotal and a real empty state — all in plain JavaScript against an in-memory basket.
CSS-only depth
Transforms, translucency and backdrop-filter instead of an animation library.
31 KB total
Smaller than a single product photograph on most retail sites.
Other builds
Need one of these for real?
Tell me what the business does and who it is for. I will tell you what it costs and how long it takes — no charge for the conversation.