Jewels Ring Builder

A high-end e-commerce platform for custom diamond rings. Users pick a setting, choose a real certified diamond from live global inventory, and the system bundles them into a single product with calculated pricing. Includes a virtual ring styler and an AI shopping assistant.

The ring builder funnel

Step 1 — Choose setting

Browse a gallery of settings (Halo, Solitaire, Vintage). Filter by metal, price, style. Images and videos load instantly from Cloudflare R2.

Step 2 — Choose diamond

Select a diamond from the Nivoda API — live global inventory of certified stones. Filter by cut, color, clarity, carat. View 360° videos of the actual diamond.

Step 3 — Review and buy

The app bundles setting + diamond, calculates total price, and adds to cart.

Virtual ring styler

An interactive visualization tool where users can see how a ring looks on a hand model.

• Skin tone slider: Adjust the hand model's skin tone
• Diamond size slider: Drag to resize from 0.5ct to 3.0ct
• Shape/metal toggles: Switch between Oval/Princess cuts and Gold/Platinum metals

Key technical decisions

• Cloudflare R2 over S3: Cheaper egress, faster global delivery for high-res ring media and 360° videos
• Nivoda API: Real-time certified diamond inventory — not a static database. Prices and availability update live.
• AI assistant: Gemini-powered chatbot that recommends products based on budget, style preference, and occasion
• State management: React Context for cart, URL params + session storage for builder state (so users can share their in-progress build)

Stack

Layer	Technology
Framework	Next.js 15.2.8 (App Router) + React 19
Language	TypeScript
Styling	Tailwind CSS + shadcn/ui
Assets	Cloudflare R2 (global CDN)
Diamonds	Nivoda API (live inventory)
Database	MongoDB (users, orders, blog)
AI	Google Gemini (product recommendations)