Sun & Rain Works
A headless storefront with a public-domain farm library attached.
A custom Next.js 16 storefront for a farm-rooted apparel brand, wrapped around Shopify and Printful so the team keeps inventory and fulfillment in the tools built for them. Shopify stays the system of record, and the storefront owns brand identity, product storytelling, search, cart, and checkout handoff. A bespoke image pipeline replaces bland Printful mockups with custom AI product photography on every variant. Alongside the shop sits an annotated archive of the USDA's wartime victory garden library plus a set of growing, seed-saving, and farm-economics guides built from public-domain sources, so the brand's agricultural claim has something real behind it.
A custom storefront without owning the commerce backend
A stock Shopify theme is fast to launch but boxes in the brand. A fully custom store is expressive but drags inventory and fulfillment into code. This project takes the middle path: a thin, typed Next.js layer over Shopify.
Sun & Rain Works is a heritage agricultural apparel brand, and the storefront had to carry that identity, farming, weather, soil, and honest craft, while staying easy to run. Shopify owns products, collections, carts, and checkout, and Printful handles drop-ship fulfillment. The Next.js app is a brand-first front end that renders catalog data server-side, hands cart and checkout back to Shopify, and revalidates its cache when Shopify webhooks fire. The result is a storefront the brand can evolve freely, with commerce operations left where they belong.
The second half of the site is not a shop at all. A brand that claims a farming heritage should be able to say something useful about farming, so the storefront carries an annotated library assembled from public-domain material: the USDA's victory garden campaign, growing-season data, seed-saving practice, crop nutrition, and the plain arithmetic of what farming actually pays. Every reading states what still holds after eighty years and what has been superseded.
Headless commerce on Vercel, Shopify as system of record
A Next.js front end on Vercel, backed by Shopify for commerce and Printful for fulfillment, joined by a typed data layer and webhook-driven cache invalidation.
Next.js 16 on Vercel
App Router with Cache Components (Partial Prerendering) and Tailwind CSS v4, deployed on Vercel. Server Components render branded story pages, product grids, search, and the cart shell, with dynamic reads wrapped in Suspense boundaries.
Shopify Storefront API
A centralized lib/shopify layer talks to the Shopify Storefront GraphQL API (version 2024-10), shaping responses, filtering hidden products, and keeping all fetches behind typed helpers.
Printful drop-ship
Printful designs are synced to Shopify as products, then published to the Storefront API sales channel. Inventory and fulfillment stay in Printful and Shopify, the storefront never owns that workflow.
Tag-based revalidation
Catalog and CMS reads are cached with Next.js cache tags. Shopify product and collection webhooks hit /api/revalidate, an HMAC-verified endpoint that revalidates exactly the affected data.
Everything a brand storefront needs, nothing it doesn’t
Branded storytelling and full commerce flow on the front, a bespoke media pipeline and operational tooling behind it.
Branded home & story pages
A storytelling homepage plus About and Farm Gallery routes built around the brand’s agricultural heritage.
Product & search
Server-rendered product pages with variant selection and structured data, plus catalog search with sort and responsive grids.
Cart & checkout
Shopify-backed cart with line mutations and a drawer, handing off to Shopify checkout, the cart identity lives in a cookie.
Custom AI product photography
A generator pulls each product’s color variants from Shopify and produces reviewable model images to replace flat Printful mockups.
Dynamic social previews
A branded Open Graph image is generated per page, with a static fallback for platforms that don’t run the OG route.
Health & diagnostics
A /api/health endpoint and a gated Shopify-status check report boolean configuration state without ever exposing secrets.
The Victory Garden Archive
103 USDA wartime documents catalogued from National Agricultural Library metadata and linked to their scans, with twenty annotated readings covering the programs, bulletins, and radio scripts.
Growing & seed-saving guides
Crop pages, growing-season data, seed-saving practice, crop nutrition against daily values, and a seed-catalogue timeline, each tied back to its public-domain source.
What farming pays
A plain-arithmetic look at farm economics, built from published figures rather than sentiment, so the brand's agricultural claim carries something checkable.
Size guides & policies
Real measurement tables on every product that has usable ones, plus served shop policies for shipping, refunds, privacy, and terms rather than 404s answered with a 200.
Measured conversion
GA4 with the session carried into Shopify's hosted checkout so purchases attribute, a Meta pixel for the events Meta already tracks, and a checkout pixel named for what it actually fires.
Built like production software, not a brochure
- Typed, centralized commerce layer. All Shopify access flows through one data layer with GraphQL operations, pagination, retry-with-timeout transport, response reshaping, and hidden-item filtering, so commerce logic lives in one place.
- Custom AI product photography pipeline. A generator reads a product’s colors from Shopify, expands a prompt template once per color, casts a diverse mix of model ethnicities, and writes images plus a resumable manifest.json, runs are resumable, with a CI mock provider so the pipeline is exercised without API quota.
- Secure webhook boundary. The revalidation endpoint verifies Shopify’s X-Shopify-Hmac-Sha256 signature against a signing secret and rejects unsigned requests with a 401, query-string secrets are not accepted.
- Modern Next.js 16 caching. Cache Components and Partial Prerendering are enabled, with "use cache", cache-tag invalidation, and Suspense boundaries around every dynamic read so static prerendering holds.
- Structured observability. The app emits filterable JSON logs for cart, checkout, health, and webhook events, and can post alerts to a webhook for high-value failures like checkout-handoff errors.
- Quality discipline. 317 Vitest cases across 41 files plus Playwright browser smoke tests run in CI, covering the failure-prone seams: cart reducers, pagination, retry transport, webhook HMAC, policy serving, size-guide derivation, structured data, and the live cart-to-checkout path.
- A brand system drawn, not licensed. The badge family was rebuilt from scratch, an eight-spoke sprocket knocked out of solid marks, despeckled by 162,000 stray pixels, sized for a fifteen-inch print area, and stamped with real DPI. Design decisions were reversed on evidence, including one wrong archiving call that turned out to be a whole state-badge line.
- Attribution that survives the handoff. The GA4 session is carried into Shopify's hosted checkout so purchases attribute rather than landing as direct traffic, and a missing analytics tag now fails a check instead of failing silently. The readiness scripts tell apart a missing variable from a stale build, and list near-miss variable names so a typo stops looking like an absence.
- Reversible pricing. A repricing pass wrote a full variant-level snapshot of 1,351 prices before it changed anything, so the rollback path exists as data rather than as a plan.
- Stated limits on synthetic imagery. The generator casts a deliberately diverse range of model ethnicities, recorded per image in the filename and manifest, and the synthetic-model exception is written down as stopping at adults. A CI mock provider exercises the whole pipeline without spending quota.
The library was complete, and it was missing two thirds of itself
The Victory Garden catalogue was built from one search, returned 33 documents, and presented itself as the whole collection. It was not close.
The query asked the National Agricultural Library for USDA items with "victory garden" in the title. That is a reasonable thing to ask and it returns real results, which is exactly what made it dangerous. The campaign’s radio output almost never carries the phrase in its title, so the entire corpus of scripts, the weekly talks, the Question Box series, the NBC broadcasts, was invisible to it.
Searching the "Victory gardens" subject heading instead finds 87. Neither query is sufficient alone, because two Question Box scripts carry the phrase in their title and are not subject-tagged. The catalogue is the union of both, 103 documents, generated from Archive.org metadata rather than hand-typed so identifiers, years, page counts, and broadcast dates come from the source of truth.
Completeness also meant deciding what to leave out. Around a hundred further items match "victory garden" as a keyword, and they are commercial seed and nursery catalogues that borrowed the slogan to sell things. They are excluded deliberately, alongside two hand-suppressed records: a duplicate scan that would have implied two documents rather than one, and a fire-prevention poster carrying the subject tag in error.
A search that returns results is not evidence that it returned all of them. This failure was silent, and it looked exactly like success.
Live, branded, and operable
Sun & Rain Works runs in production at sunandrainworks.com. It showcases headless commerce design, a custom Next.js front end on Vercel over Shopify and Printful, alongside a bespoke AI product-imagery pipeline, secure webhook-driven caching, measured conversion attribution, and the observability and tests that make a storefront safe to operate. The annotated farm library beside the shop is the part that makes the brand's agricultural claim checkable rather than decorative.