All WorkProof of Concept · Headless Storefront

Premium dog apparel, taken fully headless.

Whippet in a quilted cream-and-terracotta coat, editorial studio portrait

Proof of Concept · Hydrogen 2026.4

Type

Proof of concept

Brand

Posh and Paws (demo)

Catalog

Shopify's mock.shop test data

Platform

Hydrogen · Oxygen

Role

Sole engineer

49-second build walkthrough · narrated · tap Sound on to hear it

The Brief

No theme to fight. Every layer under direct control.

Hydrogen 2026.4React Router 7Customer Account APIStorefront MCPDesign SystemSEO & Sitemaps

Posh and Paws is a proof of concept: a demo luxury dog-apparel brand built fully headless to show what Hydrogen looks like when nothing is left on the theme layer. A Shopify Hydrogen 2026.4 storefront on React Router 7, deployed to Oxygen on Cloudflare Workers — no theme, no Liquid, a React application talking directly to Shopify's Storefront and Customer Account APIs on the 2026-04 version, with full control of rendering, performance, and UX.

The build goes well beyond the default Hydrogen scaffold: 25 file-based routes cover the full commerce surface, customer accounts run on Shopify's passwordless OAuth 2.0 flow, and the brand system — Playfair Display headlines, DM Sans body, a warm cream-and-terracotta palette — lives entirely in Tailwind v4 CSS variables.

The timing matters: with Shopify and Vercel now partnering on Hydrogen, this architecture is the one both companies are converging on — a storefront that owns every layer above the commerce APIs, portable across hosts. This POC is my working reference for that pattern.

What Shipped

Routing & data architecture

25 file-based routes on React Router 7, with Hydrogen's infrastructure endpoints wired in through hydrogenRoutes(). Loaders and actions keep data co-located per route, so every page works before JavaScript loads.

Passwordless customer accounts

Shopify's OAuth 2.0 Customer Account API end to end — hosted login, then headless orders, profile, and addresses rendered inside Hydrogen. Passwords never touch the codebase.

Purpose-built homepage sections

Full-bleed video hero, a featured-product spotlight pairing embedded video with product stats, and a two-column brand-story layout — entrance animations throughout, all respecting prefers-reduced-motion.

Commerce surface & SEO

Optimistic variant selection on the PDP, a slide-out cart and predictive search sharing one drawer primitive, and dynamic XML sitemaps streaming straight from the Storefront API — no rebuild when the catalog changes.

Kept current through Hydrogen 2026.4

Four releases walked in one pass: both Shopify APIs from 2025-07 to 2026-04, React Router to 7.16, Vite to 8, and the gift-card flow moved off the replace-the-whole-array mutation. The upgrade also switches on Hydrogen's Storefront MCP proxy at /api/mcp, the endpoint an AI agent uses to browse the catalog and drive a cart.