Optional Technical Read · For Developers & Hiring Managers
Under the hood.
This section covers the implementation decisions behind the business outcomes described above. The main case study is intentionally written for nontechnical readers — everything below is for developers or hiring managers who want to understand the architecture.
Routing & URL State
Both the style and category dimensions are encoded as URL search params on the /products route. TanStack Router's validateSearch defines the shape at the route level — { style: InteriorStyle | undefined, category: CategorySlug | undefined }. TypeScript will not compile if any <Link> to the catalog is missing either param, which enforces consistency across the navbar, footer, hero, best-sellers, and inspiration sections.
Category chips use TanStack Router's function-form search: search={(prev) => ({ style: prev.style, category: slug })}. This preserves the active style filter when the customer changes category. Both dimensions are independent and combinable without any client-side state management library.
Shopify Integration
Products, variants, prices, and availability are fetched via Shopify's Storefront API using a GraphQL query on the /products and /product/$handle routes. The frontend reads the custom.interior_styles metafield to determine style mood associations. If the metafield is absent, the frontend falls back to product tags so products remain filterable before metafields are fully configured.
Color and stitching options are Shopify metaobjects — reusable entries referenced by any product that needs them. Adding a new color in Shopify propagates to every product that references that metaobject without a code change.
Variant strategy: Vehicle details (Year, Make, Model, Trim), color, and stitching are saved as cart-line attributes, not Shopify variants. Native variants are reserved for choices that affect price, SKU, inventory, weight, or fulfillment. The vehicle is resolved to a pricing class (Sedan / SUV / Pickup/Truck), which — combined with Set and Material — selects the actual Shopify variant. This keeps the variant matrix manageable regardless of how many vehicle makes and models the business supports.
Application Architecture
TanStack Start
File-based routing with server loaders
The storefront uses TanStack Start (React 19, TypeScript, Vite) with file-based routing. Product pages use server-side data loading so Shopify data is available on first render without a client-side fetch waterfall.
Accessibility
Focus restoration on the help drawer
The help drawer tracks whichever button opened it using a mutable lastHelpTrigger ref, updated at click time. When the drawer closes, focus returns to that element — compliant with WCAG focus management guidelines.
Navigation Integrity
Footer audit
The footer was fully audited and rebuilt. All href="#" dead links, an unconnected newsletter form, unverified payment badge icons, and duplicate navigation columns were removed. Every rendered link has a real destination.
Education
/how-it-works page
A dedicated page explains the difference between vehicle-customized, vehicle-compatible, and standard products — including which ones need vehicle details, the 4-step order flow for custom items, and the return policy difference between custom and standard orders.
What this demonstrates
- Rapid prototyping in Lovable to validate direction before investing in a custom build
- Evaluating and improving AI-generated UX through audit and structured critique
- Applying CRO and consumer psychology to architecture decisions, not just visual design
- Translating a prototype into a structured, type-safe TypeScript application
- Building backend-driven Shopify product experiences with metafields and metaobjects
- Designing URL state that is type-safe, composable, and shareable without a state management library
- Choosing the appropriate tool for each phase of a project
