[{"data":1,"prerenderedAt":332},["ShallowReactive",2],{"work-posh-and-paws":3},{"id":4,"title":5,"body":6,"category":5,"challenge":297,"codeSnippet":298,"description":302,"extension":303,"featured":304,"finalScreenshot":305,"gridOrder":306,"isDemo":307,"isDemoURL":308,"liveUrl":306,"meta":309,"mockupImage":310,"navigation":307,"nextProject":306,"order":311,"path":312,"results":306,"schneiderFeatured":307,"schneiderOrder":313,"seo":314,"solution":315,"stem":316,"subtitle":288,"tags":317,"techStack":322,"thumbnail":305,"thumbnailVideo":329,"year":330,"__hash__":331},"works/works/posh-and-paws.md","Headless Commerce",{"type":7,"value":8,"toc":287},"minimark",[9,14,18,21,26,33,39,45,51,57,63,69,71,75,83,85,89,104,106,110,113,115,119,195,197,201],[10,11,13],"h1",{"id":12},"posh-paws-headless-shopify-storefront","Posh & Paws — Headless Shopify Storefront",[15,16,17],"p",{},"A production-grade headless commerce storefront for a luxury apparel brand, built on Shopify Hydrogen with React, TypeScript, and deployed to Cloudflare Workers via Shopify Oxygen.",[19,20],"hr",{},[22,23,25],"h2",{"id":24},"full-e-commerce-feature-set","Full E-Commerce Feature Set",[15,27,28,32],{},[29,30,31],"strong",{},"Homepage"," — Hero section with video background, featured collections grid, bestseller products, brand story, customer testimonials, and newsletter signup.",[15,34,35,38],{},[29,36,37],{},"Product Pages"," — Image gallery, variant selection (size/color), dynamic pricing with sale indicators, add-to-cart with slide-out drawer.",[15,40,41,44],{},[29,42,43],{},"Collection Pages"," — Filterable product grid with sorting options and cursor-based pagination.",[15,46,47,50],{},[29,48,49],{},"Cart System"," — Slide-out cart drawer with quantity controls, discount code support, and Shopify checkout redirect.",[15,52,53,56],{},[29,54,55],{},"Search"," — Full-page search results plus predictive autocomplete with instant suggestions.",[15,58,59,62],{},[29,60,61],{},"Customer Accounts"," — OAuth 2.0 passwordless login via Shopify's Customer Account API, order history, profile management, saved addresses.",[15,64,65,68],{},[29,66,67],{},"Blog"," — \"The Posh Post\" — article listing and full article pages powered by Shopify's CMS.",[19,70],{},[22,72,74],{"id":73},"design-system","Design System",[15,76,77,78,82],{},"Built from scratch with Tailwind CSS v4: a warm luxury palette (cream, sand, caramel, terracotta, charcoal) paired with Playfair Display for headlines, DM Sans for body text, and Josefin Sans for CTAs. Consistent 8-point spacing grid. Framer Motion animations that respect ",[79,80,81],"code",{},"prefers-reduced-motion",". WCAG 2.1 AA target with focus-visible styles and semantic HTML throughout.",[19,84],{},[22,86,88],{"id":87},"architecture","Architecture",[15,90,91,92,95,96,99,100,103],{},"32 route files using file-based routing with typed loaders and deferred streaming. Parallel data fetching via ",[79,93,94],{},"Promise.all()"," for independent queries with ",[79,97,98],{},"Suspense"," boundaries for non-critical content. GraphQL fragments for composable queries across products, collections, and variants. Automatic TypeScript codegen from Shopify's GraphQL schema. Code splitting per route, Hydrogen ",[79,101,102],{},"\u003CImage>"," with auto srcset/WebP/AVIF, lazy loading, and Cloudflare edge caching.",[19,105],{},[22,107,109],{"id":108},"ai-generated-product-media","AI-Generated Product Media",[15,111,112],{},"All product videos and images across the storefront were generated using Higgsfield AI. This eliminated the traditional creative production bottleneck entirely — no studio shoots, no post-production pipeline, no waiting on assets. Combined with AI-directed development, the entire storefront (code + content) shipped from zero to production-ready without external dependencies.",[19,114],{},[22,116,118],{"id":117},"project-stats","Project Stats",[120,121,122,135],"table",{},[123,124,125],"thead",{},[126,127,128,132],"tr",{},[129,130,131],"th",{},"Metric",[129,133,134],{},"Value",[136,137,138,147,155,163,171,179,187],"tbody",{},[126,139,140,144],{},[141,142,143],"td",{},"Components",[141,145,146],{},"58 TSX files",[126,148,149,152],{},[141,150,151],{},"Routes",[141,153,154],{},"32 pages",[126,156,157,160],{},[141,158,159],{},"Utility modules",[141,161,162],{},"21 files",[126,164,165,168],{},[141,166,167],{},"Total TS/TSX files",[141,169,170],{},"~100",[126,172,173,176],{},[141,174,175],{},"Custom CSS",[141,177,178],{},"~670 lines",[126,180,181,184],{},[141,182,183],{},"Design tokens",[141,185,186],{},"30+ CSS custom properties",[126,188,189,192],{},[141,190,191],{},"GraphQL queries",[141,193,194],{},"Storefront + Customer Account APIs",[19,196],{},[22,198,200],{"id":199},"tech-stack","Tech Stack",[120,202,203,213],{},[123,204,205],{},[126,206,207,210],{},[129,208,209],{},"Layer",[129,211,212],{},"Technology",[136,214,215,223,231,239,247,255,263,271,279],{},[126,216,217,220],{},[141,218,219],{},"Framework",[141,221,222],{},"Shopify Hydrogen 2 (React Router / Remix)",[126,224,225,228],{},[141,226,227],{},"Language",[141,229,230],{},"TypeScript (strict mode)",[126,232,233,236],{},[141,234,235],{},"UI",[141,237,238],{},"React 18, Framer Motion",[126,240,241,244],{},[141,242,243],{},"Styling",[141,245,246],{},"Tailwind CSS v4 with custom design tokens",[126,248,249,252],{},[141,250,251],{},"API",[141,253,254],{},"Shopify Storefront GraphQL API",[126,256,257,260],{},[141,258,259],{},"Auth",[141,261,262],{},"Shopify Customer Account API (OAuth 2.0 passwordless)",[126,264,265,268],{},[141,266,267],{},"Build",[141,269,270],{},"Vite 6, GraphQL Codegen",[126,272,273,276],{},[141,274,275],{},"Hosting",[141,277,278],{},"Shopify Oxygen (Cloudflare Workers)",[126,280,281,284],{},[141,282,283],{},"AI Media",[141,285,286],{},"Higgsfield AI (all product videos and images)",{"title":288,"searchDepth":289,"depth":289,"links":290},"",2,[291,292,293,294,295,296],{"id":24,"depth":289,"text":25},{"id":73,"depth":289,"text":74},{"id":87,"depth":289,"text":88},{"id":108,"depth":289,"text":109},{"id":117,"depth":289,"text":118},{"id":199,"depth":289,"text":200},"Theme-based Shopify stores constrain the experience to Liquid's rendering model — limited animation control, rigid layout systems, and performance ceilings imposed by the theme architecture. For a luxury brand where the shopping experience needs to feel as polished as the product, headless commerce removes those constraints entirely.",{"language":299,"filename":300,"code":301},"typescript","app/routes/products.$handle.tsx","export async function loader({ params, context }: LoaderFunctionArgs) {\n  const { product } = await context.storefront.query(\n    PRODUCT_QUERY,\n    { variables: { handle: params.handle } }\n  )\n\n  if (!product) throw new Response(null, { status: 404 })\n\n  const selectedVariant = product.selectedOrFirstAvailableVariant\n  const relatedProducts = context.storefront.query(\n    RECOMMENDED_PRODUCTS_QUERY,\n    { variables: { productId: product.id } }\n  )\n\n  return defer({\n    product,\n    selectedVariant,\n    relatedProducts,\n  })\n}\n","A luxury apparel storefront built as a fully headless Shopify implementation on Hydrogen — 100+ TypeScript files, OAuth customer accounts, full cart-to-checkout flow, and all product media generated with AI.","md",false,"/images/projects/posh-and-paws.jpg",null,true,"https://poshandpaws.com",{},"/images/projects/posh-and-paws-mockup.jpg",13,"/works/posh-and-paws",1,{"title":5,"description":302},"A complete headless Shopify storefront using Hydrogen 2 (built on React Router/Remix). 58 components, 32 routes, full OAuth customer accounts, cart-to-checkout flow, blog, search with predictive autocomplete, and a custom design system. Every product image and video generated with Higgsfield AI — zero dependency on traditional creative production.","works/posh-and-paws",[318,5,319,320,321],"Shopify Hydrogen","React","TypeScript","Cloudflare Workers",[323,324,320,325,326,254,327,328],"Shopify Hydrogen 2","React 18","Tailwind CSS v4","Framer Motion","Shopify Oxygen","Higgsfield AI","/videos/posh-and-paws.mp4","2026","mskbZh7vqlU9-uj-aiMyuTupGchvgAww5zLXIFWCkdk",1773700381144]