A luxury fine-jewellery storefront — server-rendered catalogue with shareable faceted filters, per-piece variant and engraving customisation, wishlist, and a full cart-to-returns checkout.
> stack next.js · react · typescript · tailwind css · framer motion
A premium storefront for a fine-jewellery brand, built on the Next.js App Router. Customers browse curated collections, narrow them with faceted filters that live in the URL, customise a piece's metal, stone, and engraving, then move through cart, checkout, and post-purchase returns. The catalogue is server-rendered for SEO and freshness; the brand's content — banners, collections, testimonials — is CMS-driven, and a commerce API backs inventory, pricing, and orders.
URLs use human-readable slugs (?metal=gold) while the API speaks in IDs. The catalogue had to map slugs ↔ IDs on the server for SEO-clean links, yet still feel instant as users toggle facets on the client.
Jewellery prices and stock change from the admin side and must show immediately. Next.js, the browser, and any CDN in front all want to cache server responses — exactly what a live catalogue can't tolerate.
A single piece varies by metal, metal colour, stone, size, and engraving text — each combination with its own availability and price. That state has to stay coherent from the product page all the way through checkout.
The category page resolves filter slugs to API IDs server-side and renders the first paint SEO-ready. A `useFilters` hook then handles toggles on the client, debounced with an AbortController so rapid changes cancel stale in-flight requests instead of racing.
A single shared Axios instance with a request interceptor stamps no-cache / no-store on every server request, and pages run `force-dynamic`. One instance instead of per-call clients cut memory and overhead while guaranteeing every shopper sees live pricing.
Variant, size-chart, and engraving selections are typed from the product page through Context-based cart and wishlist, so the chosen configuration — and its price — carries intact into checkout. Guest carts and wishlists migrate to the account on login.