# How to Vibe Code Your Own WatchPilot (and Stop Paying for It) > Luxury & Designer Watch Shop - Site: https://www.watchpilot.com - Category: E-commerce - Platforms: Web app - Verdict: **Weekend build** (88/100 vibecodeable) - Estimated effort: 1 weekend ## Verdict You can build a fully functional personal clone of this e-commerce catalog in a weekend, as the core value is a clean product showcase rather than proprietary software. Because the real product runs on Shopify, building a personal-use clone of the frontend interface and catalog filtering is an ideal weekend build. You will set up a modern full-stack web framework, seed a local database with watch data and multi-variant attributes, and build responsive product listing and detail views. The primary friction points are not technical; rather, they involve populating clean product metadata, images, and precise filtering parameters for dozens of watch brands. ### What you can't replicate - Authorized stockist agreements and official brand distribution rights - Physical store inventory sync in Richmond, London - Established brand trust and thousands of verified external customer reviews ## What it does Authorized stockist specializing in luxury and designer watches, sunglasses, and watch accessories with flexible financing and delivery options. ### Core features - Multi-brand watch catalog (40+ brands across luxury and designer) - Advanced faceted search and filtering (movement, strap, case, price range) - Detailed product pages with variant selectors (case size, strap material) - Shopping bag and simulated checkout flow - Currency and regional tax-handling logic - Trust indicators, customer reviews, and brand storytelling sections ## The business ### Pricing - Standard Catalog: Free Browse — Public catalog browsing and filtering. Founded 2020. Team size: 11-50. ## The hard parts - Complex multi-attribute product taxonomy across diverse luxury and designer brands - High-performance catalog filtering and instant search over thousands of SKUs - Robust responsive layout preserving luxury e-commerce aesthetic across devices ## How to vibe code WatchPilot ### Prerequisites - Node.js (free): Runtime required for running the Next.js development server and build tools. - GitHub (free): Repository hosting for version control and CI/CD deployments. ### Recommended AI tools - Cursor: AI-native code editor ideal for iterative UI design and rapid component assembly. - Claude Code: Agentic coding CLI tool capable of multi-file scaffolding and schema setup. ### Stack - Frontend: Next.js with Tailwind CSS - Backend: Next.js Server Actions - Database: Turso (SQLite at the edge) - Auth: better-auth - Payments: Stripe - Other: Vercel AI SDK ### Hosting - Vercel (Hosting the Next.js e-commerce frontend and serverless API endpoints.): $0/mo - Cloudflare (Edge caching and DNS management for static assets and product imagery.): $0/mo ### Build guide 1. **Project Scaffolding and Database Schema** — Initialize the Next.js project with Tailwind CSS and configure the Turso SQLite database schema for products, brands, variants, and categories. ``` Create a new Next.js 16 project using TypeScript and Tailwind CSS. Configure a Turso database client using Drizzle ORM. Define the database schema with tables for 'brands' (id, name, type [luxury/designer], slug), 'products' (id, brand_id, name, price, sale_price, description, category, movement, strap_material, case_material, image_url), and 'product_variants' (id, product_id, attribute_name, attribute_value). Ensure all fields have proper TypeScript types and create a seed script with sample luxury and designer watches from brands like TAG Heuer, Tissot, Gucci, and Casio. ``` 2. **Catalog Listing and Faceted Filtering UI** — Build the main product catalog page with responsive grid layouts and sidebar filters for brand, movement, strap, case material, and price range. ``` Build the responsive e-commerce catalog page in Next.js matching a luxury watch retailer layout. Implement a sticky sidebar for filtering products by brand, movement type (Automatic, Quartz, Chronograph), strap material (Leather, Stainless Steel, Rubber), case material, and price range checkboxes. Create a product grid component with responsive image cards showing brand name, title, regular price, sale badge, and quick-view action. Ensure filter state updates URL search parameters so filtered views are shareable. ``` 3. **Product Detail Page and Variant Selector** — Create individual product pages with high-resolution image galleries, specification tables, and variant pickers for watch sizes and materials. ``` Create a dynamic product detail page route [slug] for watches and accessories. Implement an image gallery component with thumbnail switching. Add a product information section displaying brand heritage, pricing, authenticity guarantees, and delivery thresholds (e.g., free UK delivery over £100). Build interactive variant selectors for case sizes or strap options that update the displayed SKU and price dynamically. Include an 'Add to Bag' button with smooth state feedback. ``` 4. **Shopping Bag and Simulated Checkout Drawer** — Implement a slide-out shopping bag drawer with quantity adjustments, subtotal calculations, and a simulated checkout flow. ``` Implement a slide-out shopping bag drawer and a dedicated shopping bag page. Use React state or local storage to manage cart items, quantities, and price calculations including tax and delivery fee logic (free delivery threshold at £100). Build a simulated checkout form supporting shipping address entry, order summary review, and mock order confirmation. Ensure the cart total updates instantly when items are added, modified, or removed. ``` 5. **Brand Storytelling and Trust Banner Sections** — Add homepage marketing blocks, trust badges (Trustpilot rating, authenticity guarantee), and featured brand showcase carousels. ``` Build the homepage components for the watch retailer clone. Include a hero banner highlighting luxury and designer watch collections, a 'Most Popular Brands' grid with logo placeholders, trust indicator banners ('Rated Excellent by our customers on Trustpilot', 'Authenticity Guarantee', 'Free UK Delivery over £100'), and a featured editorial section highlighting watch guides and brand retrospectives for Maurice Lacroix, Rotary, Versace, and Spinnaker. ``` ### Cost vs paying **Starting costs (one-time):** - Custom Domain Name: $12 - Total: ~$12 one-time **Ongoing costs (monthly):** - Hosting & Database (Vercel + Turso Free Tiers): $0/mo - Total: $0/mo - Paying for the SaaS instead: $0/mo (Retail Store) - Build time: 12-16 hours - AI tool credits: $20 - Break-even: N/A ## Sources - [WatchPilot Official Website](https://www.watchpilot.com) - [WatchPilot About Page](https://www.watchpilot.com)