See it live
The gems platform is a live, fully functional e-commerce site.
Project Overview
Mustard Seeds Group designed and built a custom e-commerce platform for gemstone retail. The platform enables customers to browse a curated catalogue of sapphires, rubies, emeralds, and other precious stones, with member-only pricing for registered buyers.
The project demonstrates end-to-end web development capability — from visual design and responsive front-end implementation to product catalogue management, member authentication, and search engine optimisation.
Key Features
- Product Catalogue — Browse gemstones by type, colour, and size with high-quality photography
- Member-Only Pricing — Registered members see exclusive pricing and availability
- Responsive Design — Fully functional across desktop, tablet, and mobile devices
- Search & Filtering — Find specific gems quickly with real-time search
- Image Galleries — Multiple high-resolution photos per gemstone with zoom capability
- SEO Optimised — Structured data, meta tags, and semantic HTML for organic discoverability
- Fast Loading — Optimised images and static generation for sub-second page loads
Technology Stack
Next.js
React framework with static site generation, server-side rendering, and file-based routing.
React
Component-based UI architecture for interactive product pages and member dashboards.
Responsive CSS
Mobile-first design with CSS Grid and Flexbox for fluid layouts across all screen sizes.
SEO & Structured Data
Schema.org markup, Open Graph tags, and semantic HTML for maximum search visibility.
Challenges & Solutions
Gemstone Photography
Gemstone images are large, high-resolution files. Loading dozens of product images per page would result in slow page loads and poor user experience.
Implemented Next.js Image component with automatic format conversion (WebP), responsive sizing, and lazy loading. Average image payload reduced by over 70% without visible quality loss.
Member Authentication
Wholesale and member pricing must only be visible to authenticated users, while the public catalogue remains accessible to everyone for SEO and discovery.
Built a dual-view system where public visitors see the catalogue with a "Sign in for pricing" prompt, while authenticated members see real-time pricing and availability. Authentication state is managed client-side with secure token handling.
Mobile-First Design
A significant portion of gemstone buyers browse on mobile devices. The catalogue and image galleries needed to work flawlessly on small screens.
Designed mobile-first with progressive enhancement for larger screens. Touch-friendly image galleries, collapsible filters, and responsive grid layouts ensure a smooth experience on any device.
Results
Live & Production
Fully operational e-commerce site serving real customers
Fully Responsive
Seamless experience across desktop, tablet, and mobile
Member System
Secure authentication with tiered pricing access
Fast Performance
Optimised images and static generation for speed