Initialize your Next.js project and set up the database schema for products, users, and orders.
⏱️ 2-3 hours
npx create-next-app@latest ecommerce-store
cd ecommerce-store
npm install @prisma/client stripe @stripe/stripe-js
npx prisma initmodel Product {
id String @id @default(cuid())
name String
description String
price Decimal @db.Decimal(10, 2)
imageUrl String
stock Int
category String
createdAt DateTime @default(now())
}Make sure Node.js is installed (v18 or higher)
Use npx to ensure latest create-next-app version
Run "npx prisma generate" after creating schema
⚠️ Common Pitfalls:
Build a responsive product grid.
⏱️ 3-4 hours
const products = await prisma.product.findMany()Use async/await in server components
Add loading.tsx for loading states
⚠️ Common Pitfalls:
Add cart functionality.
⏱️ 4-5 hours
export const useCart = create((set) => ({ items: [] }))Consider using Zustand for state
Persist to localStorage
⚠️ Common Pitfalls:
Set up payments.
⏱️ 5-6 hours
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)Get test keys from Stripe
Never expose secret keys
⚠️ Common Pitfalls:
Manage orders.
⏱️ 6-7 hours
const orders = await prisma.order.findMany()⚠️ Common Pitfalls:
Add search.
⏱️ 3-4 hours
where: { name: { contains: query } }⚠️ Common Pitfalls:
Production deployment.
⏱️ 2-3 hours
vercel --prod⚠️ Common Pitfalls: