AI E-Commerce Website Builder

Case study

Problem

Small merchants could not afford a developer or a web agency to stand up a store. Existing no-code builders made you click through templates, and you still ended up with generic pages that ranked nowhere.

My role

Lead frontend engineer. Owned the Next.js frontend, the prompt-to-storefront pipeline and the onboarding flow.

Stack

Next.js
TypeScript
MongoDB
LLaMA3
Firebase

Decisions

Generate structured store data, not HTML. A prompt returns schema — products, theme, SEO — and the same React renderer draws every tenant, so a bad model response can never produce broken markup.
Keep tenant configuration stateless. Store config lives in the database and is read per request rather than cached at the edge, trading a little latency for the guarantee that two merchants can never see each other's store.
Fix the empty states before adding features. New merchants were hitting a dead end at signup; unblocking that moved activation more than any new capability.

Outcome

10K+ monthly active users, onboarding time cut by 40–50%, Core Web Vitals held above 90 while rendering dynamically per tenant.

Building an online store from scratch remains a high-friction bottleneck for traditional merchants, who are typically bottlenecked by rigid page builders or expensive custom development. To solve this, our engineering team sought to eliminate manual design setups by abstracting the entire onboarding and layout generation pipeline behind a highly responsive Large Language Model wrapper.

The engine processes unstructured natural language prompts specifying brand persona, industry category, and target demographics. This input is structured using automated system formatting and sent to LLaMA3, which returns a deterministic JSON schema containing typography configurations, component placement maps, and tailored semantic color tokens.

"Translating natural language into deterministic UI schemas was the key to eliminating design friction for merchants."

The JSON Generation Pipeline:

LLM Mapping: Transforms human intent into strict JSON.
Schema Validation: Verifies generated structures using Zod before rendering.
Dynamic Compilation: Next.js Edge functions compile the validated schema into React DOM.

json

{
  "theme": {
    "primaryColor": "#0F172A",
    "fontFamily": "Inter, sans-serif"
  },
  "layout": [
    { "type": "Hero", "headline": "Premium Coffee Delivered" },
    { "type": "ProductGrid", "maxItems": 4 }
  ]
}

A primary engineering challenge was preventing client-side performance degradation while rendering highly fluid, AI-generated DOM trees. I resolved this by pre-compiling common layout blocks using Next.js Server Components, dynamically fetching layout variations on the Edge, and isolating heavy editor states into client-side dynamic hydration regions.

By production wrap-up, this generative onboarding system had halved the average time-to-publish for active storefronts and scaled seamlessly to handle over 10,000 distinct merchants.