Technology Stack
Next.js, React, TypeScript, Tailwind CSS, Shopify Storefront API, GraphQL, Headless UI, Heroicons, Sonner, Playwright, Vercel
Overview
A headless commerce storefront that keeps Shopify as the commerce engine — catalogue, inventory, checkout, payments, tax — while owning the entire customer-facing experience in a Next.js application.
That split is the point of the architecture. A merchant keeps the admin, the fulfilment tooling, and the payment infrastructure their operations team already runs, and gives up nothing on the storefront: no theme constraints, no Liquid, no waiting on a platform release to change how a product page behaves. The trade is that performance, routing, caching, and state become the developer's responsibility — which is where most of the engineering in this build went.
Storefront
- Catalogue and collection pages with server-rendered listings, so category pages are indexable and fast on first load
- Product detail pages with variant selection, media galleries, and availability driven live from Shopify
- Search and filtering across the catalogue
- Cart with optimistic updates — the UI reflects an add or a quantity change immediately and reconciles with the API behind it, so the interaction never feels like it is waiting on a network round trip
- Checkout handoff to Shopify's hosted, PCI-compliant flow, which is the correct boundary: no reason to reimplement payment handling and inherit its compliance burden
Engineering
- GraphQL against the Storefront API — precise queries requesting exactly the fields a page renders, rather than over-fetching a REST resource and discarding most of it
- Rendering strategy chosen per route — static generation for stable catalogue content, server rendering where data must be current, so each page pays only the cost it needs
- Dynamic metadata per product and collection, generated from the catalogue data, so every page has correct titles, descriptions, and social previews without manual authoring
- Image optimisation and lazy loading throughout, since product imagery is the dominant page weight in any storefront
- Internationalisation built into the routing layer rather than retrofitted
- Dark mode as a first-class theme
- Typed end to end — the GraphQL schema drives TypeScript types, so a catalogue field change surfaces as a compile error rather than a blank space in production
- Playwright end-to-end tests covering the critical path — browse, add to cart, reach checkout — which is the flow that must never silently break
Architecture Notes
- Component-based composition with a clear separation between server data-fetching and client interactivity
- State handled at the right level — React context and hooks for cart and UI state, server state left to the framework's caching layer rather than duplicated into a client store
- Accessible interactive components built on Headless UI primitives, so keyboard and screen-reader behaviour comes from the library rather than being reimplemented
- Toast feedback on every cart mutation, so an optimistic update always has a visible confirmation
This build is a reference implementation of headless commerce done properly: the merchant keeps the operational platform they depend on, the storefront gets the performance and flexibility a modern framework provides, and the boundary between the two is drawn where it should be.