I Built an E-commerce App Without Writing Code – Here's
I Built an E-commerce App Without Writing Code - Here's What Happened
How we used AI + Prisma's MCP server to "vibe code" a full Next.js application in under 2 hours
Last week I tried something that felt like magic.
Instead of grinding through another coding session, I described what I wanted to an AI and watched it build an entire e-commerce application. No manual coding. No stack overflow searches. Just plain English prompts.
The process is called "vibe coding" - and it's exactly what it sounds like.
What is Vibe Coding?
Think of vibe coding as having a conversation with an incredibly fast developer who never gets tired.
You describe the feature you want. The AI builds it. You point out what's wrong. It fixes everything instantly.
Instead of coding everything manually, we embraced "vibe coding," allowing an AI to implement features based on our prompts rapidly.
For our experiment, we used Windsurf with Claude 3.5 Sonnet, plus Prisma's new MCP (Model Context Protocol) server to handle all the database work.
The Setup: Next.js + Prisma + AI
Our goal was simple: build a working e-commerce app with product listings, categories, filtering, and a shopping cart.
Our tech stack:
- Next.js 15 with App Router and TypeScript
- Prisma ORM with their new MCP server
- TailwindCSS for styling
- Claude 3.5 Sonnet for the AI heavy lifting
The first prompt set the tone for everything:
"You are a software architect. Your task is to provide clear, precise specifications for engineers to implement. You will receive feature descriptions and tech stack. Only respond with structured technical specifications per feature, no code yet."
This simple role-setting prompt changed everything. Instead of getting messy, generic code, the AI started thinking like an actual architect.
Building the Foundation in Seconds
Here's where things got interesting.
I described what I wanted: "A simple ecommerce homepage with a hero section, featured products grid, and cart functionality."
Within seconds, the AI:
- Ran
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dirto scaffold the project - Initialized Prisma with :
1npm install prisma --save-dev
2npm install @prisma/client
3npx prisma init- Connected to a new Postgres database via Prisma's MCP server
- Generated a complete database schema with Product and Category models
What normally takes 20-30 minutes of setup happened in under 2 minutes.
The database schema it created was clean and logical:
1generator client {
2 provider = "prisma-client-js"
3}
4
5datasource db {
6 provider = "postgresql"
7 url = env("DATABASE_URL")
8}
9
10model Category {
11 id Int @id @default(autoincrement())
12 name String
13 slug String @unique
14 description String?
15 products Product[]
16 createdAt DateTime @default(now())
17 updatedAt DateTime @updatedAt
18}
19
20model Product {
21 id Int @id @default(autoincrement())
22 name String
23 slug String @unique
24 description String?
25 price Decimal @db.Decimal(10, 2)
26 image String
27 categoryId Int
28 category Category @relation(fields: [categoryId], references: [id])
29 createdAt DateTime @default(now())
30 updatedAt DateTime @updatedAt
31
32 @@index([categoryId])
33}Perfect for our needs. No overthinking. No analysis paralysis.
The Magic of AI + MCP Integration
Prisma's MCP server allows you to chat in natural language through database provisioning, data modeling and migration workflows.
This integration was the real game-changer. The AI could:
- Spin up new database instances instantly
- Generate and run schema migrations
- Seed realistic test data
- Handle all the database complexity behind the scenes
When I asked for seed data, it didn't just create basic examples. It generated realistic product information with proper categories, pricing, and even working image URLs.
Building Features at Lightning Speed
Each feature request followed the same pattern:
Me: "Build a /shop page that lists products with category filtering"
AI: Generates server component with Prisma queries, filter logic, and responsive UI components
Me: "Add a persistent shopping cart using Zustand"
AI: Creates full cart system with localStorage persistence, quantity management, and header integration
The speed was addictive. Instead of spending hours on each feature, I was seeing working implementations in minutes.
When Things Went Wrong (And How AI Fixed Them)
It wasn't perfect. The AI made several classic mistakes:
Problem 1: Invalid Image URLs
Some product images were showing alt text instead of pictures.
My prompt: "Looks like we're hitting an error. Here's the error message: [pasted error]"
AI response: Fixed all URLs and re-ran the seed script automatically.
Problem 2: Client/Server Component Confusion
The cart hook was being called from a server component.
My prompt: Same approach - just pasted the error.
AI response: Added the missing "use client" directive and explained the fix.
Problem 3: Async SearchParams Issues
Next.js routing was throwing errors on our filter page.
Again, pasting the error got an instant, working solution.
The pattern was clear: treat errors as feedback, not roadblocks.
What We Built in Under 2 Hours
The final application included:
- Homepage with hero section and featured products
- Shop page with category filtering and product grid
- Shopping cart with persistent state across page reloads
- Responsive design that works on mobile and desktop
- Proper Next.js 15 patterns with server/client components
- Working database with realistic seed data
Everything you'd expect from a solid e-commerce MVP.
The Real Lessons
This experiment taught me several things about working with AI effectively:
1. Set Clear Roles
Starting with "You are a software architect" completely changed the quality of responses. The AI stopped generating random code and started thinking systematically.
2. One Feature at a Time
Asking for multiple features in one prompt led to confusion and errors. Single-focus prompts got better, cleaner results.
3. Include Your Stack Early
Mentioning Next.js 15, Prisma, and TypeScript upfront prevented the AI from suggesting incompatible patterns or tools.
4. Errors Are Your Friend
Instead of getting frustrated by mistakes, I started viewing errors as quick feedback loops. Paste the error, get the fix, move on.
5. Use Realistic Data
The AI-generated seed data with real product names and categories helped surface UI bugs that generic "Product 1" data would have missed.
Is This the Future of Development?
For production applications? Probably not yet.
But for prototyping, learning, or building MVPs? This changes everything.
The combination of AI assistants and tools like Prisma's MCP server makes it possible to go from idea to working application faster than ever before.
You still need to understand what you're building. You still need to guide the AI and catch its mistakes. But the grunt work - the tedious setup, boilerplate code, and repetitive patterns - that can all be automated now.
Result
Just after a few hours of adapting and modifying my code, I created an almost complete e-commerce site. I had to update the UI components to give it a modern, practical look. I know there are still some features missing to call it a complete site, there are still some bugs to fix, but it's something. You tell me.
Here's the link if you'd like to check out the site: https://hollo-plus.vercel.app/
What's Next?
Vibe coding has received significant attention in the first half of 2025. As these tools get better, the line between describing what you want and having it built will continue to blur.
The developers who learn to work with AI effectively - who master the art of prompting and architectural thinking - are going to build things faster than anyone thought possible.
Want to try this yourself? Start with Prisma's MCP server and a clear mental model of what you're building. Set the AI's role, focus on one feature at a time, and treat every error as a step forward.
The future of development isn't about replacing programmers. It's about making us 10x more productive.
Ready to dive deeper into AI-assisted development? Subscribe to my newsletter for more experiments, techniques, and insights on building with AI. Plus, I'll send you the exact prompts I used for this entire project.
"All this is a third of the tasks I performed during the process. Of course, it depends on the inspiration of each developer. The best thing is to practice and find your way. I wish you all the best in achieving your goals through practice. And don't forget to subscribe to our newsletter so you don't miss out on any news about code developments and, above all, Next.js."
Found this helpful? Share it with other developers who are curious about AI-assisted development.
