Build Your Own Product Catalog
Product listings, categories, cart, and Stripe checkout.
⚠️ 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