How to vibe codeWatches & Crystals

Prerequisites

• Node.jsfree

  Runtime environment required for running the Next.js framework.

• GitHubfree

  Source code repository and deployment hook connector.

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding full-stack e-commerce apps, database schemas, and checkout APIs.

• Cursor

  Ideal AI code editor for fine-tuning responsive Tailwind CSS layouts and product filtering components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS and configure Turso SQLite to manage products, variants, categories, and customer orders.

   Create a new Next.js 16 project using TypeScript, App Router, and Tailwind CSS. Initialize a Turso database schema using Drizzle ORM to model an e-commerce catalog. Define tables for 'products' (id, brand, title, description, price, compare_at_price, category, in_stock, is_best_seller, is_new), 'variants' (id, product_id, sku, case_size, strap_material, movement_type, dial_color, price), and 'orders' (id, user_id, total, status, created_at). Seed the database with realistic watch inventory items such as Casio, Tissot, and Herbelin with accurate variant attributes and pricing.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Storefront Layout & Navigation Header

   Build the main responsive navigation header, mega-menus for Men's/Women's watches, search bar, and announcement ticker.

   Build a responsive header component matching a high-end luxury watch e-commerce storefront. Include a top announcement ticker ('Free UK delivery over £100 | Minimum 2 years warranty'). Add navigation links for All Brands, New Arrivals, Men's Watches (with dropdown filters for movement like Automatic/Quartz, type like Diver/GMT, and price tiers), Women's Watches, Sunglasses, and Sale items. Implement a search input and slide-out cart drawer trigger.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Product Listing Page & Advanced Filtering Matrix

   Implement the catalog grid with dynamic multi-faceted filters for brand, movement, material, and price ranges.

   Create a product listing page with a sidebar filtering matrix. Users must be able to filter products by brand checkboxes, movement type (Automatic, Quartz, Chronograph, Hand Wound), case size, and price ranges (e.g., Under £100, £100-£200, £1000+). Ensure the product cards display discount badges (e.g., '-26% OFF'), brand name, product title, current price, compare-at price, next-day delivery badges, and calculated BNPL installment previews (e.g., 'Payments from £11.00 bi-weekly with Clearpay').

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Product Detail Page & Buy-Back Widget

   Build the individual product view with image gallery, specification table, and the buy-back/upgrade guarantee banner.

   Develop a detailed product view page for a selected watch. Include a multi-angle image gallery, variant selection buttons (case size, strap material), stock status indicators, SKU display, pricing blocks, and Clearpay/Klarna installment breakdown boxes. Add a dedicated 'Buy-back & Upgrade Guarantee' callout box explaining the 10% bonus valuation trade-in program. Below the fold, render a comprehensive specification table mapping attributes like Case Width, Case Material, Movement, Water Resistance, and Warranty.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Shopping Cart & Checkout Integration

   Implement the shopping cart drawer, cart management logic, and Stripe checkout session integration.

   Implement a fully functional shopping cart state management system using Zustand or React Context, accessible via a slide-out drawer or dedicated cart page. Add quantity adjusters, item removal, subtotal calculation, and free delivery progress bar ('Spend £X more for free UK delivery'). Integrate a Stripe checkout API route that processes test mode payments for the cart contents and redirects to an order confirmation success page.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Customer Authentication & Account Orders

   Set up user registration, login, and order history dashboards using better-auth.

   Integrate better-auth to handle user registration, secure sign-in, and password recovery. Create an account dashboard route where authenticated users can view their past orders, track simulated shipments, and manage their saved shipping addresses.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Watches & Crystals