Lumia Crystal - E-commerce Platform

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.

Stack: Next.js
TypeScript
Tailwind CSS
Shopify API
React
Category: Full-stack

My Role

Frontend · integration

What I owned

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.

The hard part

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

By the numbers

Products: 60+
Cache Layers: 4
ISR Revalidation: 30min
Collections: 4
Zodiac Guides: 12
Developer: 1

Tech Stack

Layer by layer

Framework: Next.js
React
App Router · Turbopack
Language: TypeScript
Strict mode
Styling: Tailwind CSS
OKLCH colour system · CSS-based config
E-commerce: Shopify
GraphQL
Storefront API — products, cart, checkout
Deployment: Vercel
ISR · CDN · image optimization · analytics

Headless Architecture

Decoupled by design

Next.js owns rendering and the whole experience; Shopify is a backend for inventory, orders and checkout. Everything between them is GraphQL.

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

Fast, not stale

A request crosses up to four caches before it reaches Shopify — sub-second on a cached route, never more than 30 minutes stale.

Router CacheClient-side · 30min staleTimes

Full Route CacheISR · pre-rendered HTML on CDN

Data CacheServer-side fetch() result cache

Shopify APIGraphQL · source of truth

Trade-offs

Decisions that held

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.

Live site

Want the full walkthrough?

Happy to talk through the architecture, the decisions, and the trade-offs behind this build.

Visit project →Get in touch