# How to Vibe Code Your Own Watches & Crystals (and Stop Paying for It)

> Designer Watches For Men & Women

- Site: https://watchesandcrystals.com
- Category: E-commerce
- Verdict: **Solid side project** (75/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

You can build a fully functional, beautiful e-commerce clone of this storefront over two weeks, but you will need to mock out the complex authorized brand inventory and FCA-regulated credit agreements.

Replicating the frontend presentation, product filtering matrix, database schema for products/orders, and shopping cart functionality is straightforward with modern AI coding tools. However, integrating real merchant-of-record compliance, automated buy-back evaluation flows, and exact BNPL risk engines requires careful mock handling for a personal project.

### What you can't replicate

- Authorized brand reseller contracts and manufacturer warranties
- Real physical inventory stock in Shoreham-By-Sea warehouse
- FCA-regulated lending integrations with Klarna and Kandoo

## What it does

An e-commerce storefront offering designer and luxury timepieces, sunglasses, pens, and jewelry from authorized brands with flexible financing options.

### Core features

- Catalog management with deep variant filtering (case size, strap material, movement type, price range)
- Multi-brand storefront navigation and search
- Dynamic currency and discount/sale pricing display
- Shopping cart and checkout integration
- Buy-back and upgrade valuation request flow
- Financing calculator for BNPL (Klarna and Clearpay widget preview)
- User accounts, registration, and order history

## The business

### Pricing

- Standard Retail Order: Variable
- Clearpay Installments: 0% Interest
- Klarna Installments: 0% Interest

Founded 2024.
Team size: SME Scale.

## The hard parts

- Complex relational database schemas modeling nested product variants (size, color, dial, strap)
- FCA-regulated financing broker compliance disclosures and third-party widget embeds
- Accurate real-time inventory tracking and order status workflows

## How to vibe code Watches & Crystals

### Prerequisites

- Node.js (free): Runtime environment required for running the Next.js framework.
- GitHub (free): Source code repository and deployment hook connector.

### Recommended AI 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.

### Stack

- Frontend: Next.js with Tailwind CSS
- Backend: Next.js API Routes
- Database: Turso (SQLite at the edge)
- Auth: better-auth
- Payments: Stripe
- Other: Resend for transactional order confirmation emails

### Hosting

- Vercel (Hosting the Next.js e-commerce storefront frontend and serverless API endpoints.): $0-20/mo
- Cloudflare (Edge DNS, CDN asset caching, and image optimization for product media.): $0/mo

### Build guide

1. **Project 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.
```

2. **Storefront 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.
```

3. **Product 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').
```

4. **Product 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.
```

5. **Shopping 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.
```

6. **Customer 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.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom domain registration: $12 one-time
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Vercel Hobby / Cloudflare Hosting: $0/mo
- Turso Database Tier: $0/mo
- Total: ~$0/mo

- Paying for the SaaS instead: $0/mo (Transactional storefront)
- Build time: 25-35 hours
- AI tool credits: $20 (Claude Pro / Cursor)
- Break-even: N/A (Personal project)

## Sources

- [Watches & Crystals Homepage & Product Pages](https://watchesandcrystals.com)
- [UK Companies House - WP WATCHES LTD](https://find-and-update.company-information.service.gov.uk/company/15444428)
- [FCA Register - WP WATCHES LTD](https://register.fca.org.uk/)