Can I vibe code Front-Commerce?

Build a modern headless ecommerce PWA frontend framework using Remix (or Next.js App Router) and TypeScript. 1. DATA ARCHITECTURE: Design a unified GraphQL gateway layer that stitches data from three distinct sources: a primary commerce platform (e.g., Magento/Shopware API), a CMS (e.g., Storyblok/Contentful), and a PIM system. Define explicit TypeScript interfaces for Product, Category, Cart, User Session, and Checkout. Implement schema masking to expose uniform client-facing GraphQL fields regardless of backend changes. 2. CORE FEATURE SET: Include dynamic SSR routing for PDP, PLP, and CMS content pages. Build a robust client-side state engine for cart operations with offline optimistic updates and synchronization on reconnection. Build an extensible payment connector module supporting tokenized card flows and redirect gateways. Implement dynamic image optimization with fallback support for WebP/AVIF formats. 3. CACHING & PERFORMANCE: Implement an edge-compatible caching strategy utilizing surrogate keys (Cache-Tags) for PDPs and PLPs. Provide explicit webhook handlers to invalidate specific product cache tags upon backend stock or price updates. Configure service workers for asset prefetching and dynamic offline fallback routes. 4. FAILURE HANDLING: Gracefully handle downstream backend timeouts by serving stale cached data with a warning flag. Handle checkout state validation errors by presenting inline recovery steps to the client. Out of scope: proprietary admin dashboards, physical warehouse sync engines.

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs