Demo E-Commerce Website
Relevant source files
The following files were used as context for generating this wiki page:
The Demo E-Commerce Website is a specialized React-based application designed to serve as a target environment for synthetic user testing and automated conversion optimization. It provides a standard retail user journey—including product browsing, cart management, and a multi-step checkout process—to validate the performance of autonomous browser agents and code-modification engines.
Within the broader project, this website serves as the primary "Local Target Site" for the optimization loop. It is intentionally tracked via Git to allow the Code Modification Agent to safely apply, verify, and revert UI changes based on friction points identified during synthetic user sessions.
Sources: plan.md, src/test-demo-site.ts:13-16
Architecture and Technical Stack
The application is built using a modern frontend stack designed for rapid UI iteration and clear structural patterns that are easily interpretable by AI code analyzers.
Core Technologies
- Framework: React 18 with TypeScript.
- Build Tool: Vite.
- Styling: Tailwind CSS with
shadcn-uicomponents. - Routing:
react-router-domfor client-side navigation. - State Management: React Context API (specifically for
CartContext).
Sources: demo-website/package.json:37-90, demo-website/README.md:65-72
Application Structure
The routing logic is centralized in App.tsx, defining a standard e-commerce flow:
The diagram shows the user navigation flow defined in the application routes.
Sources: demo-website/src/App.tsx:18-35
Key Modules and Components
Cart Management
The Cart.tsx module handles the logic for viewing items, adjusting quantities, and calculating totals. It utilizes a CartProvider context to maintain state across different pages.
- Logic: Users can increase/decrease quantities via
updateQuantityor remove items entirely usingremoveFromCart. - Navigation: If the cart is empty, users are redirected back to the collection. If items are present, they can proceed to the
demo-checkoutroute.
Sources: demo-website/src/pages/Cart.tsx:7-10, demo-website/src/pages/Cart.tsx:50-70
Checkout Flow
The checkout experience is simulated via the DemoCheckout.tsx and Success.tsx pages.
| Component | Responsibility | Key Elements |
|---|---|---|
| DemoCheckout | Collects user information and processes the order. | Email Input, "Complete Demo Order" button. |
| Success | Confirms order completion and provides return path. | CheckCircle icon, "Return Home" button. |
Sources: demo-website/src/pages/DemoCheckout.tsx:12-25, demo-website/src/pages/Success.tsx:10-25
User Conversion Logic
The website's primary success metric is the completion of the "Goal," defined as reaching the /success route. The following sequence illustrates the successful conversion path an autonomous agent must navigate:
The sequence illustrates the interaction between the agent and the application's state/routing.
Sources: demo-website/src/pages/DemoCheckout.tsx:14-18, src/test-demo-site.ts:15
Testing and Optimization Integration
The website is specifically designed to be analyzed by the codeAnalyzer.ts and modified by the codeModifier.ts.
Automated Analysis
The readSiteCode utility scans the website directory, filtering for specific source extensions while ignoring build artifacts. This creates a text-based representation of the site that is fed into Claude-3.5-Sonnet to identify friction points.
Modification Safety
To ensure the site remains functional after automated edits, the system employs a Git-based safety mechanism:
- Commit: The current state is committed before any change.
- Apply: The
Code Modification Agentreplaces exact string matches in the source files. - Verify: The
verifySiteLoadsfunction checks if the site still returns valid HTML. - Revert: If verification fails, the system executes
git checkout -- .to restore the previous state.
Sources: src/engine/codeModifier.ts:11-40, src/engine/optimizationLoop.ts:69-105
Summary
The Demo E-Commerce Website acts as the controlled environment for the SynthCrowd platform. By providing a standard React/Vite structure, it allows the synthetic testing engine to measure conversion rates, identify specific UI hurdles for different personas (e.g., tech-illiterate users struggling with complex forms), and verify that proposed code fixes actually resolve user friction without breaking the application.