Claude Builds Multi-Store E-Commerce Platform

This guide outlines the steps taken in the 1-hour AI coding challenge to build a multi-store e-commerce platform using Claude AI, as documented in the YouTube video.

Phase 1: Setup and Initial Feature Implementation

This phase involves setting up the development environment and building the initial feature: the store manager login.

Step 1: Set Up the Base Application and Define the Goal

1. Start with an Empty Application: Begin with an empty Node.js application (specifically, a Next.js application in the video) that is running and serving output.

2. Define the Goal and Approach: Clearly state the goal to the AI: "Build an application that would allow a store manager to log in and then enter a prompt and generate a store..."

3. Initiate the AI Session: Provide the initial prompt to Claude AI to begin development:

   "Start building this application. Check the readme file and start on the first feature. Make sure to follow the approach."

4. Confirm Commit Strategy: Instruct the AI to commit changes after each feature: "Don't ask me each time you want to do commit, just do it," and "Don't ask me next time [to get push]."

Step 2: Implement Store Manager Login

1. AI Implementation: The AI implements a basic authentication and state management system.

2. Verification: Test the application to ensure the login page is displayed.

   • Credentials: Use the provided default credentials (e.g., admin@store.com and admin123).

3. Success Check: Verify that successful login redirects to a protected manager path with a store creation prompt area.

4. Commit: Once verified, allow the AI to commit and push the changes for the login system.

Phase 2: AI-Powered Store Generation and Management

This phase focuses on core functionality: generating stores using an LLM and managing multiple stores.

Step 3: Implement AI Store Generation and OpenAI Integration

1. Request Next Feature: Prompt the AI to start the next feature:

   "Let's do the next feature." (The AI self-assigns the task of implementing the store creation form submission).

2. Test and Identify Need for API: Observe the initial implementation (which uses local storage or presets) and realize the need for real-time AI generation.

3. Integrate OpenAI API: Prompt the AI to integrate with an external service:

   "I see that generating the store is an instant action. In reality, this should work by making a request to OpenAI API to fill in the data for the template. Specifically, it should generate the copy for the contacts page and about page and the information for each product in the product sample catalog."

4. Configuration and Troubleshooting:

   • Install Dependencies: Run npm install and configure the API key in an environment file (.env.local).

   • Fix Errors: If an API key error occurs, feed the error back to the AI (e.g., "Open AI API key is not configured") and allow it to fix the code that reads the environment variable.

5. Final Test: Generate a store (e.g., "coffee shop") and verify that a pending API request is made and that the store content (products, copy) is successfully generated and displayed.

Step 4: Implement Multi-Store Management

1. Address the Overwrite Bug: Point out the limitation where a new store overwrites the previous one:

   "One problem I see is that when I generate a new store it overrides the existing store. The manager panel should allow me to generate as many stores as I want and then I can visit them through unique URL paths."

2. Verification:

   • Test by generating multiple stores (e.g., "coffee shop" and "home decor").

   • Ensure each store has a unique ID and can be viewed separately.

   • Verify the Delete functionality works.

3. Commit: Commit the multi-store management changes.

Phase 3: E-Commerce Functionality and Checkout

The final phase adds the essential e-commerce features: shopping cart and checkout flow.

Step 5: Implement Product Management (CRUD)

1. Request Feature: Request the product management functionality: "Yes, let's do that," agreeing with the AI's suggestion to build a Product Management System (adding, deleting, and editing products).

2. Verify CRUD: Test the following actions on the manager's "Manage Products" page:

   • Edit: Update an existing product's details.

   • Delete: Remove a product from the list.

   • Add New Product: Create a new product.

3. Fix Bugs: If necessary, troubleshoot and fix issues (e.g., errors related to missing product images or a non-functional "Add New Product" button) by feeding the problem statement or error URL back to the AI.

4. Commit: Commit the fully working Product Management feature.

Step 6: Implement Shopping Cart Functionality

1. Request Feature: Prompt the AI to implement the shopping cart:

   "Everything looks good, let's commit and push and then move on to building the shopping cart functionality."

2. Verification:

   • Test the "Add to Cart" button on a store page.

   • Check for a visual indication (e.g., a side panel or icon update) that items have been added.

   • Verify that the cart correctly shows items, calculates the total, and allows modifying quantities and deleting items.

3. Commit: Commit the shopping cart feature.

Step 7: Implement Checkout Flow

1. Start Fresh Session (Optional): If the AI runs out of context, start a new session, allowing it to re-read the codebase.

2. Request Feature: Prompt the AI for the final feature:

   "Now let's finish building the very last feature of this application which is the checkout flow."

3. Verification:

   • Click the "Checkout" button from the cart.

   • Verify redirection to a checkout page with an order summary and form fields (name, address, payment info).

   • Complete the form with dummy information and click "Place Order."

   • Verify a confirmation page is displayed, followed by a redirect back to the store.

Phase 4: Conclusion

1. Final Commit: Allow the AI to commit and push the final changes for the checkout flow.

2. Review: Review the complete set of commits on the repository, noting the rapid development enabled by the AI.