Lumia Crystal - E-commerce Platform
A headless e-commerce storefront for crystal jewelry — custom Next.js 15 frontend powered by Shopify Storefront API, with a 4-layer caching architecture delivering sub-second page loads across 60+ products.
- Role
- Solo build · frontend architecture
- Year
- 2025
- Type
- E-commerce · Web
- Status
- Live
Shopify handles commerce. The frontend is entirely my own.
A decoupled, headless build: Shopify owns products, inventory, and checkout, while a bespoke Next.js 15 App Router frontend owns every pixel of the experience — real-time catalogue, cart, filtered search, and a layered caching strategy that keeps pages fast without going stale.
My Role
Full frontend architecture and implementation. Designed the headless storefront from scratch — component architecture, Shopify GraphQL integration, caching strategy, cart system, and deployment pipeline. Shopify handles inventory, orders, and checkout on the backend.
Balancing data freshness with performance in an e-commerce context. Product prices and inventory change in Shopify, but every page load hitting the API would be too slow. The 4-layer caching strategy keeps pages fast while ensuring shoppers never see stale prices for more than 30 minutes.
At a Glance
Tech Stack
- Framework
- Next.js 15 (App Router + Turbopack)
- Language
- TypeScript 5 (Strict Mode) · React 19
- Styling
- Tailwind CSS 4 — OKLCH color system, CSS-based config
- E-commerce
- Shopify Storefront API (GraphQL) — products, cart, checkout
- Deployment
- Vercel — ISR, CDN, image optimization, analytics
Headless Architecture
The storefront is fully decoupled from Shopify. Next.js handles all rendering and user experience, while Shopify acts as a headless backend for inventory, orders, and checkout. All product data flows through GraphQL queries to the Storefront API, with cart operations managed via Shopify Cart mutations.
Custom Frontend
- Next.js 15
- Cart System
- Search & Filter
Shopify Backend
- Storefront API
- Hosted Checkout
- Shopify Admin
Infrastructure
- Vercel
- Shopify CDN
4-Layer Caching Strategy
Each request passes through up to 4 cache layers before hitting the Shopify API. This architecture ensures sub-second page loads for cached routes while keeping product data fresh within a 30-minute window.
Router Cache
Client-side · 30min staleTimes
Full Route Cache
ISR · pre-rendered HTML on CDN
Data Cache
Server-side fetch() result cache
Shopify API
GraphQL · source of truth
Trade-offs
Headless over Shopify themes
Shopify Liquid themes are fast to set up but constrain design and interactivity. A headless Next.js frontend gave full control over the browsing experience — custom filtering by element/zodiac, smooth page transitions, and a design system built around the crystal aesthetic with OKLCH colors.
ISR with 30-minute revalidation
Products change a few times per week, not per minute. A 30-minute ISR window means pages are almost always served from the CDN cache while ensuring price and inventory updates propagate within half an hour — an acceptable trade-off for a catalog of this size.
Shopify-hosted checkout instead of custom
Building a custom checkout means handling PCI compliance, payment processing, and fraud detection. Redirecting to Shopify's hosted checkout offloads all of that — customers get a trusted, polished payment flow, and the project avoids months of compliance work.
Tailwind CSS v4 with OKLCH colors
Crystal products demand perceptually consistent colors — a purple amethyst next to a blue sapphire should feel naturally harmonious. OKLCH provides perceptual uniformity that hex/RGB cannot, and Tailwind v4's CSS-based config eliminated the JavaScript theme file entirely.
Want the full walkthrough?
Happy to talk through the architecture, the decisions, and the trade-offs behind this build.
