Back to Workshops

Brownfield E-Commerce Modernization

Use AI-DLC Workflow to analyze and modernize an existing e-commerce codebase

This workshop uses an existing brownfield codebase. Clone the repo before starting.

Workshop Overview

A sample e-commerce application with user authentication, product catalog, shopping cart, checkout, order history, and category filtering. Use AI-DLC Workflow to analyze and modernize it — the workflow automatically reverse-engineers the codebase before you start building.

Prerequisites

  • AI-DLC Workflow rules installed (setup instructions)
  • The brownfield repo cloned locally
  • Node.js v18+ and npm
  • Access to an AI assistant (Kiro, Claude, Cursor, etc.)

How AI-DLC Workflow Handles Brownfield

When you start the workflow in this repo, Workspace Detection finds existing code (Node.js backend, React frontend, SQLite database) and flags it as a brownfield project. The workflow then automatically runs Reverse Engineering before Requirements Analysis — it analyzes all packages and components, generates architecture documentation, code structure docs, API documentation, component inventory, interaction diagrams, technology stack docs, and dependency documentation.

All of this goes into aidlc-docs/inception/reverse-engineering/. You don't need to tell the AI about the codebase — it reads it and documents it for you. The reverse engineering output becomes the foundation for whatever you build next.

What to Expect

When you paste any of the intents below, AI-DLC Workflow will:

  1. Workspace Detection — scans the repo, finds existing code, flags as brownfield
  2. Reverse Engineering — analyzes the entire codebase and generates architecture docs, component inventory, API documentation, technology stack, and dependencies. Automatic for brownfield.
  3. Requirements Analysis — asks clarifying questions about your intent, referencing the reverse engineering output to understand what already exists
  4. User Stories — creates stories that build on the existing system, not from scratch
  5. Workflow Planning — determines which Construction stages to run, noting which existing files to modify vs create new
  6. Construction — designs and generates code that integrates with the existing codebase. Modifies existing files in-place rather than creating duplicates.

The AI will present approval gates at each stage — review and approve to continue, or request changes if needed.

Pick What to Build

These are ready-to-use intents. Pick one, paste it into your AI assistant in this repo, and the workflow takes over.

Product Reviews & Ratings
Using AI-DLC, add a product review system where customers can rate products from 1-5 stars, write text reviews, see average ratings on product cards, and filter/sort products by rating. Only allow reviews from customers who purchased the product.
Wishlist
Using AI-DLC, add a wishlist feature where users can save products to a wishlist, view all wishlist items on a dedicated page, and move items from wishlist to cart.
Order Tracking
Using AI-DLC, implement order tracking where customers can see real-time order status (Processing, Shipped, Delivered), view estimated delivery date, and receive notifications on status changes.
Advanced Search & Filtering
Using AI-DLC, add advanced product search with full-text search across name and description, filter by category, price range, and stock availability, sort by price, rating, or newest, and search suggestions as user types.
Admin Dashboard
Using AI-DLC, create an admin dashboard to view sales analytics (daily, weekly, monthly), see top-selling products, monitor inventory levels, track user registrations, and export reports as CSV.
Performance Optimization
Using AI-DLC, optimize the application for better performance — add caching for the product catalog, implement pagination for product lists, add lazy loading for images, and optimize database queries with indexes.
Security Enhancements
Using AI-DLC, improve application security — add rate limiting, implement CSRF protection, add input validation and sanitization, add security headers, and implement a password reset flow.
Responsive Design
Using AI-DLC, make the application fully responsive with a mobile-first design approach, touch-friendly UI elements, hamburger menu for mobile, and optimized images for different screen sizes.
Migrate to TypeScript
Using AI-DLC, convert the codebase from JavaScript to TypeScript — add type definitions for all components, define interfaces for API responses, add strict type checking, and maintain backward compatibility.
Add Testing Suite
Using AI-DLC, implement comprehensive testing — unit tests for services with 80% coverage, integration tests for API endpoints, E2E tests for critical user flows, and test documentation.
Containerize the Application
Using AI-DLC, dockerize the application — create Dockerfiles for backend and frontend, add docker-compose for local development, configure environment variables, add health checks, and document the deployment process.
Recommendation Engine
Using AI-DLC, add a product recommendation engine — "customers also bought" suggestions, similar products section, trending products widget, and recently viewed items.

Tips for Brownfield

  • Let Reverse Engineering finish before doing anything. It produces the foundation that all later stages reference. Don't skip it.
  • Reset context after Reverse Engineering. The output can be large. Start a fresh chat and resume from the state file.
  • Watch for file modifications vs new files. AI-DLC Workflow should modify existing files in-place, not create copies like CartService_modified.js. If you see duplicates, flag it.
  • The AI knows what exists. After reverse engineering, it understands the current architecture, services, routes, and components. Your intent just needs to say what to add or change.
  • Start with a smaller intent. If you're new to AI-DLC Workflow, pick something like "Add product reviews" before attempting "Migrate to TypeScript."
  • Check aidlc-state.md to see where you are at any point.
  • File names and structure will vary. AI-DLC Workflow determines what to create or modify based on the existing codebase.