Building a Full-Stack AR E-Commerce Platform with Kiro

Source: Dev.to

Picture this: you need to build a complete e‑commerce platform with augmented reality try‑on capabilities. Traditionally, this would be a 3–6‑month project for a small team. With Kiro, I built Spooky Wigs in just a few weeks.

Spooky Wigs is a year‑round e‑commerce platform for wigs with AR try‑on capabilities.

Key Features

• 2D AR Try‑On – Real‑time face tracking with wig overlay
• Full E‑Commerce – Shopping cart, checkout, order management
• Guest Checkout – Purchase without creating an account
• Payment Processing – Stripe integration
• Admin Dashboard – Product management, inventory tracking, analytics
• Mobile‑First Design – Optimized for phone cameras

Four Kiro Features That Changed Everything

Spec‑Driven Development

Instead of throwing random feature requests at Kiro, I structured the entire platform around two comprehensive specs that formalized requirements, design, and implementation tasks.

Steering Documents

Steering documents are the “always‑on” context that shaped every Kiro response. Think of them as a persistent knowledge base about your project.

Model Context Protocol (MCP)

MCP allowed Kiro to interact directly with Git, which is an external tool. MCP is also capable of interacting with cloud‑based databases such as Supabase. In my case, I was working with a database that was running locally on my machine.

Vibe Coding: Conversational Development

Beyond structured specs, I used conversational development for rapid iteration and problem‑solving. I made changes and requested additional features using Vibe coding, which was fast and ideal for troubleshooting.

Challenges Encountered

1. MCP PostgreSQL Issues

I initially configured PostgreSQL MCP to connect to the Supabase database, but encountered connection issues with the pooler (SSL/TLS certificate validation, timeout problems).

Solution: Switched to a local PostgreSQL database running on Docker, which resolved the issue.

2. Context Window Management

Large specs and steering docs consumed context, requiring strategic file reading and selective context inclusion.

Solution: Used file references in specs and read files only when needed.

Lessons Learned

1. Invest in Steering Early – The time spent creating comprehensive steering docs paid off exponentially. Every hour spent on steering saved hours of repetitive explanations.
2. Specs for Complex Features – Formal specs are worth it for features with > 10 components. The upfront investment in requirements and design documents resulted in architecturally sound code.
3. Vibe Coding for Exploration – Use conversational development for prototyping, bug fixes, and documentation. Don’t over‑engineer specs for simple tasks.
4. MCP Requires Infrastructure – Ensure MCP servers are compatible with your setup. Have fallback strategies for when MCP doesn’t work.
5. Documentation Is Free – Ask Kiro to document everything—it costs nothing and saves time later. I generated 100+ documentation files with zero extra effort.
6. Mobile‑First Matters – Building mobile‑first from the start (as specified in steering docs) meant the AR experience worked beautifully on phones, where camera quality is superior to webcams.

Kiro transformed the development of Spooky Wigs from a daunting multi‑month project into a manageable multi‑week effort. More importantly, it changed how I think about software development.