Fashion / E-Commerce
CRASH SITE WORLDWIDE
A streetwear storefront with product browsing, a cart, and drop mechanics that match how the label actually sells.
- Year
- 2026
- Status
- Case study
- Category
- Fashion / E-Commerce
- Stack
- React / Next.js, TypeScript, Tailwind CSS
The brief
Overview
A storefront for a streetwear label that sells in limited runs. It had to carry the brand without getting in the way of seeing the piece and buying it before it sells out.
Problem
Off-the-shelf themes flattened the brand into another product grid, and none of them handled drops honestly: limited sizes, fast sell-outs, restocks.
Solution
A custom catalogue and cart built around per-size stock, with product pages that treat each piece as a photo rather than a thumbnail.
Request path
One request, start to finishWhat actually happens between a click and a response.
- 01 / Client / Add to cart
- Cart state updates immediately and persists across reloads, because waiting on a round trip to see your own click feels broken.
- 02 / Server / Order route
- Checkout posts to a Node handler. Prices come from the catalogue on the server, never from the cart the client sent.
- 03 / Server / Validation
- The payload is parsed before anything else runs. Quantities, variant ids and totals all have to survive it.
- 04 / Data / Stock check
- Availability is confirmed per size at order time, not at add-to-cart time. During a drop that is the difference between an honest sold-out and an oversell.
- 05 / Data / MongoDB
- The order is written with the variants embedded, so a piece and its sizes come back in one read rather than a join.
- 06 / Server / Response
- Either a confirmation or an explicit message about what is no longer available. The UI never silently drops a line item.
Features
05 items- 01
Per-size stock
Stock is tracked per variant, so a sold-out size is disabled at selection instead of failing at checkout.
- 02
Persistent cart
Cart state survives reloads and is reconciled against current stock before checkout rather than trusted.
- 03
Product pages
Large imagery, restrained type, and a buy panel that stays reachable while the photos scroll.
- 04
Filtering
Filter and sort state lives in the URL, so any view can be shared or reopened.
- 05
Drop states
Products carry an explicit state: upcoming, live, sold out. The store says so rather than quietly hiding items.
Architecture
- 01
Frontend
Next.js for routing and rendering. Client interactivity is limited to cart and variant selection.
- 02
API
Node.js handlers for catalogue reads, cart operations and order creation, validated at the boundary.
- 03
Data
MongoDB, with variants embedded in the product so a piece and its sizes come back in one query.
- 04
Media
Responsive lazy-loaded images with explicit dimensions, so heavy product photography does not shift the layout.
Technology
- React / Next.js
- TypeScript
- Tailwind CSS
- Node.js
- MongoDB
Screens
SchematicsNo screenshots have been uploaded for this project yet. The plates below are generated schematics, not captures of the interface.
Challenges
- 01
Stock truth during a drop
Lots of people hold the same size at once. Availability is confirmed at order time, and the UI is explicit when something is lost.
- 02
Image weight
The brand lives on big photos. Formats, sizes and loading priority are tuned per breakpoint so the first view stays fast on mobile data.
- 03
Attitude without noise
Motion is used to punctuate, not to decorate, so the buy action never gets buried.
Result
A storefront that reads as the label's own, with stock accuracy and drop states handled by the system instead of by hand.