I Built a Full-Stack E-Commerce Website Entirely with AI. Here's What Actually Happened

Everyone is talking about AI replacing developers. I wanted to test that claim with a real project — not a tutorial, not a todo app, but a production-grade full-stack application with real business requirements. The result is Craftura Fine Furniture: a complete furniture manufacturing website with B2B and B2C ordering, an admin panel, analytics dashboard, CMS, SEO, dark/light mode, email notifications, and WhatsApp integration. Built with Next.js 14, Prisma ORM, and SQLite.

This is the honest account of that experience. What AI built brilliantly. Where it fell short. The bugs it introduced that only a developer could catch. And the final cost comparison that will surprise you.

The Project Scope — What Was Actually Built
Before evaluating AI's contribution, it is worth being specific about what Craftura actually contains. This was not a simple storefront. The final application has:

Customer-facing: Product browsing with search and category filters, product detail pages with image galleries, an inquiry cart (multi-item, B2B-style), order tracking with animated status progression, order self-cancellation, a project gallery with masonry layout and lightbox, a bulk orders page for B2B quote requests, WhatsApp integration on every key action, and dark/light mode persisted across sessions.

Admin panel: Analytics dashboard with charts (bar, donut, trend line), manufacturing cost report, repeat customer detection, revenue forecast widget, data export to CSV and Excel, product CRUD with drag-and-drop image upload, category management, order status management, inquiry management, gallery management, and a CMS for editing site content and toggling navigation items on and off.

Technical: 9 Prisma database models, JWT authentication with middleware route protection, Nodemailer email notifications, dynamic sitemap.xml, robots.txt, JSON-LD structured data, per-page Open Graph metadata, and PostgreSQL-ready schema migration in 2 line changes.

That is a serious amount of software. Let me tell you how AI contributed to building it.

How AI Actually Helps — The Real Workflow
The workflow was not "tell AI what to build and deploy what it gives you." That is a fantasy. The real workflow was iterative — describe a requirement, review the output, test it, identify what was wrong, correct it, and move on. Think of AI as an extremely fast junior developer who writes code instantly but needs careful supervision.

Where AI genuinely accelerated development:

Boilerplate and structure — setting up the Next.js 14 App Router structure, configuring Prisma with the initial schema, wiring up Tailwind CSS, creating the base layout components. Work that would have taken half a day manually was done in minutes.

Repetitive CRUD operations — once the pattern for one API route was established (say, products), AI generated the equivalent for categories, orders, inquiries, and gallery items in seconds. Clean, consistent, following the same patterns.

Boilerplate-heavy features — the email notification templates, the WhatsApp link builder, the JWT auth utilities, the Prisma client singleton — all of these are well-understood patterns that AI executes reliably.

// Example: AI generated this Prisma schema from a plain description
// "I need products with multiple images, categories, B2B/B2C ordering,
// and a gallery with featured items"

model Product {
  id          String         @id @default(cuid())
  name        String
  slug        String         @unique
  description String?
  price       Float?
  minOrderQty Int            @default(1)
  isFeatured  Boolean        @default(false)
  isActive    Boolean        @default(true)
  categoryId  String
  category    Category       @relation(fields: [categoryId], references: [id])
  images      ProductImage[]
  orderItems  OrderItem[]
  createdAt   DateTime       @default(now())
  updatedAt   DateTime       @updatedAt
}

model Order {
  id           String      @id @default(cuid())
  orderNumber  String      @unique
  customerName String
  email        String
  phone        String?
  orderType    String      @default("B2C") // B2C | B2B
  status       String      @default("PENDING")
  // PENDING → CONFIRMED → IN_PRODUCTION → DELIVERED | CANCELLED
  totalAmount  Float?
  notes        String?
  items        OrderItem[]
  createdAt    DateTime    @default(now())
  updatedAt    DateTime    @updatedAt
}

// AI generated all 9 models correctly from plain English descriptions
// This saved approximately 2-3 hours of schema design

What AI Got Wrong — The Bugs Only a Developer Catches
This is the section most AI enthusiasm articles skip. AI makes mistakes. On Craftura, here are the real issues that appeared — and why non-technical users would never have caught them.

Bug 1: The Middleware Import That Broke Everything
AI generated the admin route protection middleware by importing a server-side utility (the JWT verification function) that internally uses next/headers. Next.js 14 middleware runs in the Edge Runtime — it cannot import Node.js APIs or anything that chains into them. The result was a cryptic runtime error that had nothing to do with authentication logic and everything to do with the execution environment.

// WRONG — what AI initially generated
// This crashes because verifyToken uses next/headers internally
import { verifyToken } from '@/lib/auth' // ← chains into next/headers

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('admin-token')?.value
  const user  = await verifyToken(token) // ← crashes in Edge Runtime
  if (!user) return NextResponse.redirect(new URL('/admin/login', request.url))
}

// CORRECT — after identifying and fixing the issue
// Manually decode JWT in middleware without importing server utilities
import { jwtVerify } from 'jose'

export async function middleware(request: NextRequest) {
  const token  = request.cookies.get('admin-token')?.value
  if (!token) return NextResponse.redirect(new URL('/admin/login', request.url))

  try {
    const secret = new TextEncoder().encode(process.env.JWT_SECRET)
    await jwtVerify(token, secret)
    return NextResponse.next()
  } catch {
    return NextResponse.redirect(new URL('/admin/login', request.url))
  }
}

// This fix required understanding Next.js Edge Runtime constraints
// A non-developer would have no idea why the original code failed

Bug 2: The Infinite Redirect Loop
The middleware AI generated also caused an infinite redirect loop because it matched too broadly — intercepting even the login page itself and redirecting unauthenticated users to login, which then matched again, which redirected again. A browser hard refresh would spin forever. The fix required understanding how Next.js middleware matchers work and explicitly excluding the login route from protection.

// WRONG — matches /admin/login too, causes infinite redirect loop
export const config = {
  matcher: ['/admin/:path*']
}

// CORRECT — explicitly exclude the login page
export const config = {
  matcher: [
    '/admin/:path*',
    '/((?!admin/login|api/auth|_next/static|_next/image|favicon.ico).*)'
  ]
}

// Or more precisely — protect specific admin paths only:
export const config = {
  matcher: [
    '/admin',
    '/admin/analytics/:path*',
    '/admin/products/:path*',
    '/admin/orders/:path*',
    '/admin/categories/:path*',
    '/admin/inquiries/:path*',
    '/admin/gallery/:path*',
    '/admin/content/:path*',
  ]
}

Bug 3: The Analytics Charts Without a Library
The analytics dashboard required charts — bar charts for order volume over time, a donut chart for B2B/B2C split, a trend line for revenue. AI's first attempt imported Chart.js. When asked to build without any external library (to avoid bundle size overhead), it generated pure SVG charts. These looked correct but had a calculation error in the SVG coordinate mapping that caused bars to render at wrong heights when values were not evenly distributed. Finding this required reading the SVG path math and understanding how SVG viewBox coordinates work — not something a non-developer would spot visually until a client pointed out that the chart showed wrong numbers.

The Accuracy Question — What Can You Trust?
After building Craftura, my honest assessment of AI accuracy breaks down into three tiers:

High accuracy (trust but verify):
Database schema design, API route structure, Prisma queries, Tailwind CSS styling, TypeScript type definitions, email templates, environment variable setup. AI handles these reliably. Review them but expect them to work.

Medium accuracy (always test thoroughly):
Authentication flows, form validation, client-side state management, Next.js App Router patterns. AI gets these mostly right but introduces subtle issues — especially around Next.js-specific constraints like Edge Runtime, server vs client components, and caching behaviour. Always test end-to-end.

Lower accuracy (expect to rewrite):
Complex business logic, data visualisation calculations, performance optimisation, security hardening. AI gives you a starting point but the logic will often have edge cases or calculation errors. Plan to spend real development time on these.

The Cost Comparison — What This Would Have Cost
Let me be specific. Craftura has approximately 50+ files of production TypeScript code across the app, components, lib, prisma, and API directories. This includes 17+ pages, 20+ API routes, 9 database models, and a full admin panel.

Estimated development time breakdown:

Without AI assistance (senior developer estimate):
Database schema + Prisma setup: 1 day
Customer-facing pages (8 pages): 4–5 days
Admin panel (10 pages): 5–6 days
API routes (20+ endpoints): 3–4 days
Authentication + middleware: 1 day
Email + WhatsApp integration: 1 day
SEO + metadata + JSON-LD: 1 day
Analytics dashboard with charts: 2–3 days
Testing + debugging: 3–4 days
Total: approximately 21–26 days

With AI assistance (what actually happened):
AI generation + review + iteration: approximately 8–10 days

Time saved: roughly 60–65%

At a senior developer rate of $55–70/hr, 15 saved days represents $6,600–$8,400 in development cost. The AI subscription cost for the same period: under $50.

Why Technical Knowledge is Still Non-Negotiable
This is the part I want to be honest about — because the "anyone can build anything with AI" narrative is genuinely misleading and setting people up for problems.

On Craftura alone, catching and fixing the real issues required knowing:

Next.js Edge Runtime constraints — understanding that middleware cannot use Node.js APIs and why, then knowing how to use jose instead of a custom JWT utility

HTTP security principles — recognising that the default admin password and JWT secret should never appear in a public repository, even in example files

Database design — reviewing the generated Prisma schema and understanding whether the relationships, indexes, and cascade rules were appropriate for the actual access patterns

SVG coordinate systems — reading the chart math and identifying where the viewBox calculation was wrong

Next.js caching behaviour — knowing when to add revalidate or cache: 'no-store' to API calls that return real-time data like order statuses

None of these are things a non-developer would know to look for. AI would have happily shipped all of them. The middleware bug in particular would have meant the admin panel appeared to work but was not actually protected — any path traversal would have exposed the admin to unauthenticated access.

The Right Mental Model for AI-Assisted Development
After building Craftura, here is how I think about AI as a development tool:

AI is a force multiplier, not a replacement. A senior developer with AI assistance can do the work of 2–3 developers. A non-developer with AI assistance will produce code that appears to work but contains security vulnerabilities, logic errors, and architectural problems that they cannot identify.

The value is in the review, not the generation. Anyone can generate code with AI. The skill is knowing what to ask for, reading what comes back, identifying what is wrong, and knowing how to fix it. That skill requires the same technical foundation it always did.

AI accelerates the known, not the unknown. For established patterns — CRUD APIs, authentication, form handling, database queries — AI is extraordinarily fast and accurate. For novel problems, complex business logic, or framework-specific edge cases, AI is a starting point that needs significant developer input.

The cost saving is real, but so is the responsibility. Craftura was built significantly faster and cheaper with AI. But it was also built correctly because a developer reviewed everything. The cost saving disappears rapidly if you have to fix production bugs that a code review would have caught.

What I Would Do Differently
If I were to build Craftura again with AI assistance, I would change three things:

Define the architecture first, then generate. I would write a complete technical specification — database schema, API contract, component hierarchy — before generating any code. AI follows a good spec precisely. Asking it to figure out the architecture as it goes produces inconsistencies.
Generate one module at a time and test before proceeding. I would not generate the full admin panel and then start testing. I would generate one route, test it completely, then generate the next. Bugs compound when you generate everything first and test later.
Keep a context file for long sessions. I actually did this for Craftura — the .ai/ folder in the repository contains session context files that I gave to the AI at the start of each development session so it had the full architecture, schema, and patterns in context. This was one of the biggest productivity improvements — the AI produced consistent, pattern-following code because it knew the existing codebase.

推荐订阅源

DEV Community