Full-stack
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.
Next.jsTypeScriptTailwind CSSShopify APIReact
My Role
What I ownedFull 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.
The hard partBalancing 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
60+
Products
4
Cache Layers
30min
ISR Revalidation
4
Collections
12
Zodiac Guides
1
Developer
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 15App Router · SSG/ISR/CSR hybrid rendering
Cart SystemReact Context + Shopify Cart API + localStorage
Search & FilterElement · function · zodiac classification
Shopify Backend
Storefront APIGraphQL · products, collections, metafields
Hosted CheckoutShopify-managed payments and order processing
Shopify AdminInventory, pricing, and product management
Infrastructure
VercelCDN · ISR · image optimization · analytics
Shopify CDNProduct images served from Shopify edge network
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.