I built a luxury fine jewelry e-commerce storefront with an editorial-driven design language, full product catalog with variant selection, cart and wishlist flows, a comprehensive admin dashboard for orders/products/customers/inventory management, blog system, and gift card support
Direct ClientPersonal ProjectFebruary 2026
Tech Stack
Next.js
React 19
TypeScript
Tailwind CSS v4
Zustand
Framer Motion
E-Commerce
Jewelry
Luxury
Why I Built a Luxury Jewelry Store
Jewelry e-commerce is one of the most design-sensitive verticals. Customers aren't buying commodities — they're purchasing emotion, craftsmanship, and identity. The experience of browsing a jewelry store online should feel tactile and intimate, like being guided through a private showroom. Most jewelry websites I'd seen were either gaudy templates or sterile product grids. I wanted to build something that felt like walking into a boutique on a quiet Parisian street.
The Brand: Lumière
Lumière — French for "light" — became the fictional brand. The positioning: Indian luxury. Handcrafted pieces, ethically sourced stones, heirloom-quality craftsmanship. The brand tagline I wrote — "Where Precious Meets Timeless" — guided every design decision from typography to micro-interactions.
Why the Design System Matters More Than Code
Before writing a single component, I spent time defining the visual DNA. Luxury design is about restraint, not excess:
Typography — I paired Cormorant Garamond (display/headings) with DM Sans (body). The serif gives editorial gravitas; the sans-serif provides clean readability. This pairing whispers luxury without being pretentious.
--color-rose:#B76E79;/* Accent for feminine touches */
No harsh whites. No pure blacks. The palette feels warm, like candlelight on gold.
Spacing & Layout — Generous whitespace everywhere. Sections breathe with py-32 padding. Product cards have subtle borders and rounded corners. Nothing feels cramped. Luxury is space.
Building the Homepage as an Editorial Story
I designed the homepage as a narrative journey, not a product dump:
Hero Section — Full-height editorial hero with "Since 2018" provenance badge, the tagline, and two CTAs (explore collection + book consultation). A decorative gold-dot radial pattern adds tactile depth. Includes a scroll indicator animation.
Category Row — Six circular category thumbnails (Rings, Necklaces, Earrings, Bracelets, Custom, Gifts) with hover-to-zoom transitions.
New Arrivals — Product grid with horizontal scroll capability, showing the latest additions.
Brand Story — A full-width editorial spread with workshop photography and the brand narrative. "Crafted with intention. Worn for a lifetime."
Best Sellers — Another product section, community-validated.
Testimonial Carousel — Horizontally scrollable testimonial cards with real customer photos, star ratings, and locations.
As Seen In — Social proof strip featuring luxury publication names (Vogue India, Elle, Harper's Bazaar).
Newsletter — "Join the Inner Circle" signup with ornamental diamond icons and a confetti success state.
The Product System I Designed
Jewelry products aren't simple SKUs. Each piece has genuine complexity:
exportinterfaceProduct{ metalType: MetalType[];// gold-18k, silver-925, platinum, rose-gold stoneType: StoneType;// diamond, ruby, sapphire, emerald, pearl ringSizes:string[];// Available ring sizes variants: ProductVariant[];// Each combination has stock + price adjustment availability:'in-stock'|'made-to-order'; careInstructions:string;// Jewelry-specific care guidance materialDetails:string;// Carat weight, clarity, origin// ... plus standard e-commerce fields}
A single ring might exist in platinum, 18K gold, and rose gold — each at different price points — and in six ring sizes. The variant system handles this with per-variant stock tracking and price adjustments:
exportinterfaceProductVariant{ metalType: MetalType; ringSize?:string; stock:number; priceAdjustment:number;// +8000 for platinum, -5000 for gold variant}
The Product Detail Page
The product detail page is where I spent the most effort on UX:
Image Gallery — Four product images with thumbnail navigation and smooth transitions. Main image updates on thumbnail click.
Metal Type Selection — Visual selector pills showing available metals with price adjustments displayed.
Ring Size Selection — Grid of size options, only shown for ring category products.
Pricing Display — Shows original and sale prices with calculated discounts. Prices formatted in INR with ₹ symbol.
Add to Cart/Wishlist — Full validation ensuring metal type and ring size are selected before cart addition.
Material Details & Care — Expandable accordion sections showing carat weight, clarity, origin, and care instructions.
Related Products — Same-category recommendations at the bottom.
State Management with Zustand
I chose Zustand over Context API or Redux for client-side state. For a frontend-only project, it's the perfect balance of simplicity and power:
Cart Store — Items with quantity management, metal type and ring size selection, subtotal calculation, and count tracking. Uses persist middleware for localStorage persistence.
Wishlist Store — Toggle-based add/remove with timestamp tracking. Products can be moved from wishlist to cart directly.
Search Store — Real-time search query with debounced filtering across product names, descriptions, categories, and tags.
Auth Store — Simulated authentication state management — login, register, logout flows with user profile data.
The Admin Dashboard
I built a full admin panel at /admin with a professional sidebar navigation and 10+ management pages:
Dashboard Overview — KPI cards showing total revenue (₹29.2L), orders (156), customers (1,247), and average order value (₹18,750). Revenue chart by month and recent orders feed.
Product Management — Full CRUD interface with table view showing product image, name, category, price, stock, and status. New product form with all variant fields. Individual product edit page.
Order Management — Order list with status badges (paid/pending/failed, processing/shipped/delivered). Individual order detail page showing timeline tracking, customer info, and shipping details. Status update functionality.
Customer Management — Customer table with total orders, lifetime spend, status, and join date. VIP tagging notes.
Inventory Tracking — Stock level monitoring with low-stock alerts. Filtered views for critical stock items.
Coupon System — Create and manage discount coupons with percentage/fixed types, minimum order values, usage limits, category restrictions, and first-order-only flags. Usage analytics.
Blog Management — Create and manage blog posts with rich content, cover images, categories, tags, and SEO metadata.
Store Settings — Configure store name, currency, timezone, contact email, social links, GST rate, free shipping threshold, and payment methods.
The Storefront Pages
Beyond the homepage, I built a complete set of customer-facing pages:
Products Listing — Grid layout with category filtering, sorting (price, name, newest), and search integration. ProductCard components with hover effects, quick-add-to-cart overlay, wishlist toggle heart, sale badges, and star ratings.
Search — Full-screen search overlay accessible from the header. Real-time filtering with result count and product grid display.
Cart Drawer — Slide-in cart panel from the right side. Shows item details with metal type and ring size. Quantity adjustment, item removal, subtotal calculation, and checkout CTA.
Wishlist — Full page wishlist display with product cards and move-to-cart functionality.
Checkout — Multi-section checkout with shipping address form, shipping method selection (standard/express/same-day), payment method selection (UPI/card/netbanking/COD), order summary with GST calculation, and coupon code application. Celebration confetti animation on successful order placement.
Custom Orders — Consultation booking page for bespoke jewelry. Form capturing jewelry type, metal preference, stone preference, budget range, timeline, occasion, and design inspiration upload.
Gift Cards — Purchase gift cards with custom amounts, recipient email, sender name, and personal message.
About — Brand story page with workshop imagery and artisan narrative.
Blog — Blog listing and individual post pages with category filtering.
Contact — Contact form with store address, hours, and social links.
Category circles scale from w-20 to w-32 across breakpoints
Cart drawer is full-width on mobile, fixed-width on desktop
Admin sidebar collapses to top bar on mobile
Font sizes scale gradually with text-xs sm:text-sm md:text-base pattern
Animations with Framer Motion
Framer Motion handles page transitions and component animations:
Fade-up animations on section entries
Smooth height transitions on accordion components
Cart drawer slide-in/slide-out
Search overlay fade transition
Product card hover lift and image zoom
Confetti animation on checkout success
Why Static Data Instead of a Backend
This is deliberately a frontend showcase. All 12 products, 5 testimonials, 4 blog posts, 3 orders, 5 customers, and 3 coupons live in a seed data file. This approach lets me:
Deploy instantly on Vercel with zero backend costs
Demonstrate full UI/UX without API dependencies
Focus purely on design, interactions, and component architecture
Serve as a production-ready template for any jeweler
A backend integration (Prisma + PostgreSQL, or Sanity CMS, or Shopify Storefront API) could be plugged in by replacing the seed imports with API calls — the component architecture is already structured for it.
Tech Stack Used
Next.js 16 (App Router)
React 19
TypeScript (Strict Mode)
Tailwind CSS v4
Zustand 5 (State Management with Persistence)
Framer Motion 12 (Animations)
Lucide React (Icons)
next-intl (i18n ready)
Vercel (Deployment)
Key Features Delivered
Luxury editorial homepage with hero, brand story, and testimonial carousel
Complete product catalog with 12 handcrafted jewelry items
Product variant system (metal types, ring sizes, price adjustments)
Product detail pages with image gallery and material specifications
Shopping cart with slide-in drawer and quantity management
Wishlist with toggle functionality and move-to-cart
Full-screen search overlay with real-time filtering
Multi-step checkout with address, shipping, payment, and GST calculation