Case study
Modern E-Commerce Platform
A full e-commerce storefront on the Shopify Storefront API — catalog, cart, customer accounts, orders and search, typed end-to-end.
Design & development (solo) · 2026
App routes
GraphQL contracts
UI components
Lighthouse a11y
Overview
The problem & the approach
A complete storefront built on Next.js 16 (App Router) and the Shopify Storefront API, with a Shopify Admin API integration for delegated operations. The goal was to mirror the depth of a real storefront — not stop at a product grid and a cart.
It follows the full shopper journey: browse and filter collections, open a product, manage a persistent cart, sign in, track orders, keep a wishlist and recover an account. Content, contact and legal pages are part of the same system.
What I owned
Architected the App Router structure, data-fetching and revalidation strategy
Integrated the Shopify Storefront and Admin GraphQL APIs end-to-end
Built the component system on Radix UI + shadcn/ui primitives
Implemented accessibility, testing and delivery hardening
Owned deployment, environment validation and SEO plumbing
Product
What it does
Collections & merchandising
01Index and per-collection pages driven by Shopify menus and handles, with paginated product grids (16 per page) and filter parsing.
Product detail
02Variant selection, pricing, inventory awareness and product media, wired to the Storefront API with ISR for fast repeat views.
Persistent cart
03Cart state in React Context, synced to the Shopify cart and persisted across sessions so items survive reloads and redeploys.
Predictive search
04Instant suggestions backed by a dedicated API route that queries the Storefront API as the shopper types.
Customer accounts
05Register, login, password recovery and reset, plus a signed-in account dashboard — all through Server Actions.
Orders & address book
06Order history and full address CRUD (list, create, edit) against the Shopify Customer API.
Wishlist
07Saved products tied to the customer account, with add/remove flows.
Content & legal
08A contact form (Nodemailer + durable rate limiting) alongside privacy, terms, refund and shipping pages.
Dark mode & consent
09Theme switching via next-themes that follows system preference, plus a cookie-consent flow gating Google Tag Manager.
Screens
Product walkthrough
Engineering
How it is built
Typed GraphQL end-to-end
GraphQL Code Generator turns the Shopify Storefront and Admin schemas into a typed SDK, so every query and mutation is checked at build time. Codegen runs as part of the build.
Storefront API + Admin API
Catalog, cart and customer flows use the Storefront API; selected operations use the Admin API through short-lived (24h) delegate tokens rather than exposing admin scope to the client.
Server-first data, actions for mutations
Server Components fetch through the SDK while forms and mutations go through Server Actions validated with Zod, keeping credentials off the client.
Targeted ISR
Per-resource revalidation windows (search 5 min, product 1 h, Shopify data 10 min) keep the catalog fresh without giving up static speed.
Hardened delivery
Nonce-based Content-Security-Policy, robots rules that keep cart/account/search out of the index, and an explicit trust boundary for the Shopify buyer IP.
Serverless-safe rate limiting
Contact submissions are throttled with Upstash Redis so limits hold across serverless instances instead of resetting on every cold start.
Quality
Tested, typed and accessible
Unit tests across cart, auth and wishlist services, Shopify helpers, env validation and utils
Strict TypeScript with generated GraphQL types — no hand-written API shapes
ESLint and Stylelint in CI, plus build-time codegen
Lighthouse accessibility and best-practices 100 on desktop and mobile
Metadata, sitemap, robots and canonical URLs wired per route
Want to see it live?
The full storefront is deployed and open to explore — browse the catalog, add to cart and sign in.