WIP
The Cocker House
A conversion-focused storefront that turns short-form social traffic (TikTok, Reels, Shorts) into email subscribers and merch sales, built backend-free by leaning on Shopify, Gelato and Resend so the codebase stays a fast, static marketing layer rather than a system to maintain.
- Type
- Marketing storefront + lead-magnet site (content & commerce, no backend of its own)
- Status
- In active development (WIP), pre-launch
- Role
- Solo design + full-stack build
// what it does
The Cocker House is the storefront for a small lifestyle brand themed around a cocker spaniel called Milo. Its only job is to convert social traffic into two things: email subscribers and merch orders. Everything is written in the brand's voice: cheeky, warm, narrated by the dog.
Free printables, email-gated
A bundle of printable PDFs (a care-planner plus wall-art prints and a greeting card) given away as lead magnets. The visitor drops their email, gets added to the list, and receives the download links by email. The freebies are genuinely free: the email is the price.
Print-on-demand merch shop
T-shirts, sweatshirts, mugs, posters and tote bags sold via embedded Shopify Buy Buttons and fulfilled by Gelato. The site renders branded product cards; Shopify owns product display, variants, pricing, cart and checkout; Gelato owns printing and shipping. No payment, cart, or fulfilment code lives in the repo.
Brand-forward content
A home page, an about page narrated by Milo, and a consistent warm-editorial design system: friendly print-magazine, not luxury SaaS or minimal-Scandi.
Backend-free by design
Products and printables are typed data in the repo. The single piece of server code is one email route. No database, no ORM, no auth, no sessions.
Built to convert on mobile
Most traffic arrives from social on a phone, so the whole thing is mobile-first.
// screenshots
Home page: the warm editorial hero, written in the brand's voice.
// tech stack
- Framework
- Next.js 16 (App Router, Server Components, Route Handlers)
- Language
- TypeScript (strict mode)
- UI
- React 19, Tailwind CSS v4 (CSS-first @theme tokens), custom component system (no UI kit)
- Commerce
- Shopify Buy Button SDK (embedded product + checkout)
- Fulfilment
- Gelato print-on-demand (via Shopify, no direct integration)
- Resend (audience subscribe + transactional PDF-delivery email)
- Fonts
- Inter + Fraunces via next/font/google (Fraunces with optical sizing)
- Social images
- next/og (ImageResponse): OG/Twitter cards generated at build time
- Analytics
- Vercel Analytics
- Hosting
- Vercel
- Data
- Typed TypeScript modules, no database, ORM or CMS
// architecture & engineering
Static-first, backend-free
Almost every route is prerendered as static HTML at build time; the only server function is the /api/subscribe email handler. There's no database, auth or cart to operate: commerce is delegated to Shopify, fulfilment to Gelato, email to Resend. The result is a marketing layer that's cheap to run, fast to load, and has a tiny attack surface.
Token-driven design system
The whole visual identity lives in Tailwind v4 @theme tokens (warm off-white background, near-black ink, rust accent, Fraunces/Inter type scale) plus a small set of primitives: Button, Card, and a styleguide page cataloguing every component, the type scale, colour swatches and spacing. Because everything reads from tokens, a full brand rename and an accessibility-driven accent change each flowed through the system from a single source of truth rather than a find-and-replace across components.
Placeholder-safe third-party integration
The Shopify Buy Button component lazy-loads the storefront SDK once per page and mounts a live product embed when the store domain, Storefront token and a real product ID are present. When they're not, which is the entire pre-launch phase, it renders a clean branded placeholder (faux product photo, title, price stand-in, disabled add-to-basket, and a status note) instead of breaking. Every page stays fully reviewable and deployable before the Shopify store exists, and the cards go live the moment the environment variables are filled in.
Lead-magnet email pipeline
The subscribe route validates the address, adds the contact to a Resend audience (tolerating the already-subscribed case so re-submits still work), and sends a branded HTML and plain-text welcome email containing the download links, with graceful handling for invalid input, missing configuration, and Resend being unreachable. PDFs are served as static assets, so delivery is just links, not file streaming.
SEO & social infrastructure
Per-route metadata, a generated sitemap.xml and robots.txt, and dynamic Open Graph / Twitter card images rendered per page with next/og, all driven from the same site and brand constants used everywhere else.
Accessibility baked in
WCAG AA contrast (the rust accent was deliberately darkened so small text and buttons pass AA against the warm background, a single token change that cascaded everywhere), a skip-to-content link, prefers-reduced-motion handling, a semantic heading hierarchy, visible focus states, and proper labelling on the email form.
Phased, review-gated delivery
Built in explicit, individually-committed phases with a dedicated /styleguide review gate before any real pages were created, so the visual direction could be signed off before pages were built on top of it.
// notable problems solved
- Re-platforming the business model mid-build: it began as a paid digital-PDF storefront with a hosted checkout, then pivoted to free PDFs (lead magnets) plus physical print-on-demand merch. Because product data was typed and isolated and checkout sat behind a component boundary, the old payment integration was excised and the new Shopify/Gelato model dropped in without a rewrite.
- Reviewable-before-live commerce: embedding a third-party storefront usually means nothing works until the store exists. The placeholder-safe Buy Button inverts that, so the shop is designed, reviewable and shippable before a single Shopify product is created.
- AA contrast on a deliberately warm palette: hitting accessible contrast without losing the friendly, un-corporate aesthetic, solved by tuning the accent to a value that passes AA for normal text, applied once at the token level.
- Genuinely backend-free commerce and capture: real email capture and real product sales with no database, auth or server cart, by treating the site as a presentation layer over managed services.
// scope & results
- Design system, component library and styleguide.
- Home, About and legal page templates.
- Physical-merch shop with placeholder-safe Shopify Buy Button cards.
- Restructured, typed data model for merch and free printables.
- Email subscribe route wired to Resend.
- SEO infrastructure (metadata, OG images, sitemap, robots).
- Accessibility and brand-token passes.
// what's next
- Connect the live Shopify store and Storefront token, and swap placeholder product IDs for real ones.
- Build the dedicated /free lead-magnet page and finalise the PDF-delivery email.
- Drop in real product photography and the final PDF files (currently branded placeholders).
- Finalise legal copy (privacy / terms / refunds are structured templates with clearly-marked TODOs, not invented legal text).
- Production Lighthouse pass against the 95+ target across Performance, Accessibility, Best Practices and SEO.
// selected features
Storefront
Warm editorial design system · Fraunces display + Inter body via next/font · token-based theming (Tailwind v4 @theme) · reusable Button / Card primitives · mobile-first responsive layout · sticky header, branded footer · custom 404 · /styleguide review gate.
Commerce
Shopify Buy Button embeds (product image, variants, price, add-to-basket, cart, checkout) · Gelato print-on-demand fulfilment · brand-styled embed theming · placeholder-safe rendering before the store is live · category-tagged merch grid · lazy-loaded SDK.
Free printables & email
Email-gated PDF lead magnets · Resend audience subscribe · branded HTML + plain-text welcome email with download links · inline success state (no thank-you page) · graceful handling of duplicate / invalid / service-down cases · static PDF delivery.
SEO, performance & accessibility
Per-route metadata · dynamic OG/Twitter images (next/og) · generated sitemap and robots · static prerendering across the site · WCAG AA contrast · skip link · reduced-motion support · semantic headings · focus-visible states.