How to vibe codeGR8 Sunglasses

Prerequisites

• Node.jsfree

  Runtime environment for building and running the Next.js web application.

• GitHubfree

  Version control and repository hosting to deploy directly via Vercel.

AI coding tools

• 

  Cursor

  AI-native code editor ideal for iteratively building React components, Tailwind styling, and catalog filtering logic.

• Claude Code

  Terminal coding agent capable of scaffolding the entire e-commerce database schema and setting up API routes.

Build guide

1. 01Project Scaffolding and Layout

   Initialize a Next.js project with Tailwind CSS and configure the core layout including header announcement bar, navigation menu, search bar, and footer links.

   Create a new Next.js 16 app with Tailwind CSS and TypeScript. Build a responsive e-commerce layout featuring a top announcement bar ('30% OFF SECOND PAIR with code 30PERCENT'), a sticky header with navigation links ('Home', 'All Brands', 'For Him', 'For Her', 'Watches'), a search input, and a footer with policy links and social icons. Ensure clean component structure using Lucide React icons.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Database Schema and Product Seeding

   Define Turso SQLite schema for products, brands, variants, and categories, and populate initial luxury eyewear and watch data.

   Connect Turso SQLite to the Next.js project using Drizzle ORM. Define tables for products (id, name, brand, description, regular_price, sale_price, category, gender, images, specs JSON, stock_status), brands, and categories. Write a seed script that populates realistic luxury items like Giles Deacon sunglasses, Ann Demeulemeester frames, and Burberry watches with sample image URLs and metadata.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Catalog Browsing and Filtering

   Implement product listing pages with filtering by brand, gender, category, and price range, plus sorting options.

   Build a dynamic catalog listing page that fetches products from Turso. Add a sidebar filtering component allowing users to filter by Brand (Ray-Ban, Gucci, Balenciaga, etc.), Gender (Men, Women, Unisex), Category (Sunglasses, Watches), and Sale status. Include sort dropdowns for price and popularity. Ensure URL search parameters sync with active filters.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Product Detail Page and Image Gallery

   Create a rich product detail page featuring thumbnail image switching, detailed technical specifications, and related product recommendations.

   Create a product detail page route at /products/[id]. Display an interactive image gallery with a main preview and thumbnail selector, product title, regular price vs. sale price savings banner, detailed material specifications (frame color, lens type, size measurements, made in country), and an 'Add to Cart' button. Below the details, render a 'Similar Products' carousel featuring items from the same brand or category.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Shopping Cart Drawer and Promo Code Engine

   Build a slide-over shopping cart drawer supporting quantity modifications, subtotal calculations, and discount code application.

   Implement a slide-over shopping cart drawer state managed via React Context or Zustand. Support incrementing and decrementing quantities, removing items, and calculating subtotal totals. Add a coupon code input box that validates codes like '30PERCENT' to dynamically apply a 30% discount on qualifying items (such as a second pair). Persist cart state in localStorage.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Mock Checkout and Order Confirmation

   Integrate Stripe or a streamlined checkout flow to handle mock purchases and order success states for personal use.

   Build a checkout page and Server Action that integrates Stripe Checkout for processing test payments. Collect shipping address and customer contact details. Upon successful payment completion, clear the local cart state and redirect the user to an order confirmation summary page displaying ordered items and estimated shipping times.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for GR8 Sunglasses