SketchAPaw.
Engineering case study by Priyansh Dobariya · Shopify Hydrogen · React Router · TypeScript · AI image generation
A pet photo becomes a portrait.
A headless Shopify experience for creating personalized pet artwork, previewing it, checking out, and tracking production review.
Behind the build.
Guided personalization and upload
Preview-generation jobs
Paid artwork and QA workflow
Tools & technologies
What this solves
Custom pet art requires more than a product page: customers need to supply usable reference photos, choose a style, see a preview, and know what happens after payment.
How it works
The Hydrogen storefront implements a guided build flow for style, background, personalization, preview, format, and checkout. The preview route validates upload context and image bytes, stores references in Shopify Files, and creates image-generation jobs. Shopify metaobjects record jobs and assets; account and admin routes expose status and an artwork review queue.
From input to outcome
A customer chooses artwork options and uploads a pet photo. The preview endpoint validates file type, dimensions, pet context, and requester identity, then starts a generation job. The customer reviews the preview and selects a format for checkout. A paid-order webhook verifies the Shopify event and unlocks the final artwork path; staff can inspect and review production jobs.
Decisions visible in the code
- Upload limits and subject validation reject unusable inputs before invoking image generation.
- Guest and customer ownership checks keep job access tied to the requester.
- A paid-order webhook separates preview access from final artwork entitlement.
What the workflow enables
The workflow connects personalization, preview, payment, and production review in one customer journey, reducing manual handoff between storefront and artwork operations.
The source repository contains a starter README, so this description is based on custom routes and services. Sales, generation quality, and personal feature ownership were not measured here.