I Built an E-commerce App Without Writing Code – Here's
......
Loading...
Similar articles
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
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.
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.
Our goal was simple: build a working e-commerce app with product listings, categories, filtering, and a shopping cart.
Our tech stack:
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.
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:
npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir to scaffold the projectnpm install prisma --save-dev
npm install @prisma/client
npx prisma initWhat normally takes 20-30 minutes of setup happened in under 2 minutes.
The database schema it created was clean and logical:
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model Category {
id Int @id @default(autoincrement())
name String
slug String @unique
description String?
products Product[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Product {
id Int @id @default(autoincrement())
name String
slug String @unique
description String?
price Decimal @db.Decimal(10, 2)
image String
categoryId Int
category Category @relation(fields: [categoryId], references: [id])
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
@@index([categoryId])
}Perfect for our needs. No overthinking. No analysis paralysis.
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:
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.
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.
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.
The final application included:
Everything you'd expect from a solid e-commerce MVP.
This experiment taught me several things about working with AI effectively:
Starting with "You are a software architect" completely changed the quality of responses. The AI stopped generating random code and started thinking systematically.
Asking for multiple features in one prompt led to confusion and errors. Single-focus prompts got better, cleaner results.
Mentioning Next.js 15, Prisma, and TypeScript upfront prevented the AI from suggesting incompatible patterns or tools.
Instead of getting frustrated by mistakes, I started viewing errors as quick feedback loops. Paste the error, get the fix, move on.
The AI-generated seed data with real product names and categories helped surface UI bugs that generic "Product 1" data would have missed.
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.
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/
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.