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
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.
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.
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 Palette — Every color serves the brand:
--color-gold: #C9A84C; /* Primary accent — warmth, luxury */
--color-cream
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.
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.
Jewelry products aren't simple SKUs. Each piece has genuine complexity:
export interface Product {
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:
export interface ProductVariant {
metalType: MetalType;
ringSize?: string;
stock: number;
priceAdjustment: number; // +8000 for platinum, -5000 for gold variant
}
The product detail page is where I spent the most effort on UX:
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.
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.
Review Moderation — Approve/reject customer reviews. Admin reply capability.
Store Settings — Configure store name, currency, timezone, contact email, social links, GST rate, free shipping threshold, and payment methods.
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.
FAQ — Accordion-style frequently asked questions.
Legal Pages — Privacy policy, terms & conditions, and return/exchange policy pages.
Account — Customer account page with order history, saved addresses, and profile management.
The header is carefully layered:
Four-column footer matching luxury standards:
Every component is built mobile-first with Tailwind breakpoints. Specific decisions:
w-20 to w-32 across breakpointstext-xs sm:text-sm md:text-base patternFramer Motion handles page transitions and component animations:
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:
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.
Built with excellence in mind
Optimized for speed & scalability
Battle-tested with real users
Responsive across all devices
Maintainable & well-documented
Explore other projects
I rebuilt my brass manufacturing corporate website from scratch — new brand identity, modernized color system, static export optimization, local product photography, and cleaner URL architecture.
I built a production-grade corporate website for a brass component manufacturer and exporter based in Jamnagar, Gujarat. Fully static, zero-backend architecture with a custom design token system, 55+ product catalog with detailed specifications
I built a premium fashion e-commerce template with a complete shopping experience — product catalog with 6-type filtering, cart with promo codes, 4-step checkout, wishlist, collections, quick view, recently viewed tracking, dark mode, and page transitions