Auré
A fine-jewellery store for a fictional house: procedurally modelled pieces in 3D, exact variants and a checkout that cannot oversell.
- Kind
- Live demo
- For
- A fictional business
- What it is
- Luxury e-commerce
- My role
- Design and engineering
- Built
- 2026
The idea
A cinematic store for a fictional fine-jewellery house: procedurally modelled pieces you can turn in 3D, exact finish-and-size variants and a calm path to checkout. Running as a public demonstration: checkout is simulated in your browser, no money moves and nothing you enter is saved.
- Who it's for
- Boutique fashion, jewellery and lifestyle brands that want a storefront with the feel of a printed lookbook.
- The problem
- Jewellery sells on detail: the finish, the size, the way a stone takes light. Behind the page, a store must never sell the last piece twice, never charge a price the browser invented, and never record a payment it did not receive.
What I built
Everything below works in the public demonstration today.
I designed and built Auré end to end: the storefront, the 3D studio and its models, the shopping and checkout flows, the database engine, the staff console and the tests.
What works in the demo
- Cinematic home with a live 3D ring on desktop and a rendered still on phones and for reduced motion
- 3D studio on product pages: procedurally modelled pieces rendered in a Web Worker, with turn, zoom and finish controls and a photo fallback without WebGL
- Collections, catalogue search and filters (also without JavaScript), quick view and exact finish-and-size variants
- Wishlist and bag kept in this browser, re-priced by the server
- Simulated checkout (demonstration only): signed, expiring browser-local orders with sandbox success, decline, late-payment and cancel outcomes, then order tracking; no payment provider is contacted
- Read-only admin console with fictional data: orders, products, inventory, collections, analytics and settings, where every change is refused by the server
- Content-Security-Policy without eval or third-party origins, keyboard support and reduced-motion support
The experience
Real screens, captured from the live site as a first-time visitor sees them.
The engineering
How it is put together, and the problems that took the most care.
A Next.js storefront over one rule: the browser holds intentions, the server holds prices. The bag keeps only variant ids and quantities, the server prices every quote, and in a real deployment PostgreSQL prices the order again inside the transaction that holds the stock.
Storefront
Next.js 16 with Partial Prerendering. three.js runs in a module Web Worker on an OffscreenCanvas, loaded only when a visitor opens the studio.
Shopping state
One versioned store for the bag and wishlist, shared by every page. It holds variant ids, quantities and times: never prices, names or addresses.
Pricing and checkout
The server issues a signed, expiring quote and re-prices when the order is placed. In the public demonstration, orders are signed and kept in the browser, and editing one to look paid or cheaper is refused.
Database engine
For a real store: PostgreSQL functions hold and release stock with one global lock order, record payments idempotently and audit staff changes. Built and tested, not connected to the public demo.
Technology
- In the public demo
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS v4
- three.js (Web Worker, OffscreenCanvas)
- React Three Fiber
- GSAP
- Motion
- Zustand
- React Hook Form + Zod
- Vitest
- Playwright
- Built and tested, not used by the demo
- PostgreSQL 18
Hard problems, and how I solved them
Jewellery without downloaded models
- Problem
- Bought 3D models bring licence questions and megabytes of data, and their proportions can't be changed for a client.
- Approach
- Each piece is generated in code, in millimetres: the ring's profile, its comfort-fit inside and four claws, and a 57-facet brilliant whose geometry is tested to be closed and convex. The product photographs are renders of the same geometry, so the model and the stills always match.
3D that never blocks the page
- Problem
- Compiling shaders and building geometry can freeze the main thread for most of a second.
- Approach
- The studio renders in a Web Worker on a transferred canvas, draws only while the piece moves, pauses when the tab is hidden and disposes everything on close. Opening it recorded no main-thread long tasks.
Exact variants, never a nearest match
- Problem
- A ring in rose gold, size 14, is a different item from the same ring in another finish or size, with its own price and stock.
- Approach
- Every page resolves the exact finish-and-size variant or nothing. Changing the finish keeps the size only when that exact variant exists, and otherwise says why.
Stock that cannot be sold twice
- Problem
- Twenty buyers can reach for five pieces at once, and payments can arrive late, twice or out of order.
- Approach
- Stock is held under one global lock order, and only one database function can mark an order paid. Concurrency tests on PostgreSQL found a real deadlock in the first expiry job; the fix locks the whole batch first.
The evidence
What can be checked, and what the public version does not do.
- Concurrency
- On PostgreSQL 18: 20 buyers for 5 units gave exactly 5 orders; 10 duplicate submissions gave 1 order
- Automated tests
- 199 unit, 64 on a real PostgreSQL server, 306 browser runs at three widths with axe
- Lighthouse (deployed)
- Desktop 100 on every route; mobile 91–98; accessibility 100
Figures from the project's own release record, written when it shipped. The public demonstration runs on fictional data.
Not in the public demo
- Real orders, stock holds and payments in a store's own Supabase Postgres database (the transactional engine is built and tested against PostgreSQL, but not connected to the public demo)
- Razorpay payments in test mode against a real account
- Staff sign-in with Supabase Auth on a real project
- Order confirmation emails
Explore the product
Selling something that deserves a better store?
Auré shows both halves of a store I would build: product pages with real craft, and the plumbing underneath, with exact variants, prices set by the server and stock that cannot be sold twice.