A walkthrough of building an e-commerce app using Prisma MCP server, Prisma ORM, Prisma Postgres, and Next.js 15 through vibe coding with VS Code Copilot and Claude 3.5 Sonnet. Covers prompting strategies for AI-assisted development, scaffolding the project, defining a Prisma schema with Category and Product models, seeding the database, building a filterable shop page with server components, and implementing a persistent cart with React Context and localStorage. Also addresses common errors encountered during AI-generated code, such as invalid image URLs, client/server boundary issues, and async searchParams handling.
Table of contents
AI prompting tips (Quick overview)Prompting AI to act like a software architectSetting up Next.js and Prisma ORM to scaffold the projectSetting up categories and products in prisma.schemaHaving AI seed our databaseBuilding a shop page we can filterable shop page with Prisma ORMReact context for persistent cart functionalityResolving invalid image URLs4 Impressions