Build Your Own Product Catalog

Product listings, categories, cart, and Stripe checkout.

Time: 3-5 hours
Stack: Next.js + Stripe
Vibe Score: 6/10
⚠️ This gets you a basic storefront. For production e-commerce, strongly consider Shopify or Medusa. Checkout optimization alone is worth the platform fees.

The Prompt

Copy this prompt into Cursor, Claude, or your AI tool:

Build me a simple e-commerce storefront with the following specifications:

## Tech Stack
- Next.js 14 with App Router
- Prisma with PostgreSQL
- Stripe for payments
- Tailwind CSS + shadcn/ui

## Core Features

### 1. Product Catalog
- Product listing page with grid
- Product fields: name, description, price, images, category, inventory
- Category filtering
- Search
- Sort by price, name, newest

### 2. Product Detail Page
- Image gallery
- Product info and description
- Price display
- Add to cart button
- Related products

### 3. Shopping Cart
- Add/remove items
- Update quantities
- Cart sidebar or page
- Persistent cart (localStorage + DB for logged in)
- Cart total with tax estimate

### 4. Checkout
- Stripe Checkout integration
- Guest checkout
- Shipping address form
- Order summary
- Payment processing

### 5. Orders
- Order confirmation page
- Order history (for logged in users)
- Order status tracking
- Email confirmation

### 6. Admin (basic)
- Add/edit products
- View orders
- Update order status
- Inventory management

## Database Schema
```prisma
model Product {
  id          String   @id @default(cuid())
  name        String
  slug        String   @unique
  description String
  price       Decimal
  images      String[]
  categoryId  String
  category    Category @relation(fields: [categoryId], references: [id])
  inventory   Int      @default(0)
  active      Boolean  @default(true)
  orderItems  OrderItem[]
  createdAt   DateTime @default(now())
}

model Category {
  id       String    @id @default(cuid())
  name     String
  slug     String    @unique
  products Product[]
}

model Order {
  id             String      @id @default(cuid())
  status         String      @default("pending")
  email          String
  shippingAddress Json
  subtotal       Decimal
  tax            Decimal
  total          Decimal
  stripeSessionId String?
  items          OrderItem[]
  createdAt      DateTime    @default(now())
}

model OrderItem {
  id        String  @id @default(cuid())
  orderId   String
  order     Order   @relation(fields: [orderId], references: [id])
  productId String
  product   Product @relation(fields: [productId], references: [id])
  quantity  Int
  price     Decimal
}
```

## Stripe Checkout
```typescript
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

// Create checkout session with line items from cart
```

Please generate all files for a working storefront.

What You'll Get

✅ Included

  • Product catalog
  • Shopping cart
  • Stripe checkout
  • Order management
  • Basic admin
  • Category filtering

❌ Not Included

  • Inventory sync
  • Shipping rates API
  • Tax calculation
  • Multi-currency
  • Reviews
  • Wishlist

← Back to all prompts