Accelerating Your Web App Launch: Lessons from AI Development

When I code, I typically use AI as an assistant. For this project, I decided to flip the script and let AI take the lead as the primary programmer, while I played the roles of Product Owner and, amusingly, code copy-paster (a legitimate new role in the age of AI).

The results exceeded my expectations. In just three days, we launched a moderately sophisticated MVP (minimum viable product) web app. This post outlines the techniques we used to accelerate development, overcome roadblocks, and learn from the process.

The Project: A Beerati Revival

Over 15 years ago, when LevelTen first explored Drupal, we created Beerati, a social site where members could post, rate, and share unique beers and pubs. While Drupal was an excellent platform for prototyping, it required significant expertise.

The vision for this project was to recreate Beerati using AI and WordPress, leveraging modern tools to simplify the process and accelerate development.

Project Planning

Since this was a relaunch, planning was streamlined. I revisited the original project, created a project guide document with user roles and stories, and imported it into Claude for reference.

Tip: Use Multiple LLMs

AI is incredibly capable but not infallible. Using multiple LLMs helps mitigate hallucinations and facilitates better reasoning. For this project, I used:

• Claude 3.5 Sonnet as my primary coder / assistant,
• ChatGPT 4o and o1 as a backup, and
• Perplexity for handling recent or niche topics.

This strategy felt like pair programming with AI, boosting confidence and reducing errors.

Development Techniques and Insights

Tip: Choose an AI-Friendly Stack

The first AI startup project I worked on last year was also built on WordPress. It used a Divi theme, a lot of plugins, and Make for AI integration. The stack had already been set up using many popular components of traditional websites.

However, I quickly realized that many components of the stack weren’t well understood by AI. While the AI often sounded confident, its responses were sometimes hallucinated or inaccurate. This experience taught me an important lesson: choosing a stack that LLMs are well-trained on can greatly accelerate development.

I now prefer to use a minimal stack. For WordPress projects, this means minimizing the number of plugins and consolidating as much custom functionality as possible into a single plugin and theme. I avoid page builder themes and instead opt for a simple Bootstrap child theme. AI understands Bootstrap remarkably well and can often handle all necessary styling using just markup without requiring custom CSS or JavaScript.

For Beerati, which required moderate content architecture, I consulted the AI on whether to build the architecture from scratch or use ACF (Advanced Custom Fields). The AI provided solid arguments in favor of ACF, and we chose to go that route.

Tip: Plan for Context

AI is an exceptionally capable coder, but its effectiveness often hinges on the quality of the context provided. The key to unlocking its full potential lies in clear prompts and well-structured context. This is where many efforts falter. For optimal results, the AI must have access to all relevant code and support documents.

Adding support materials like user stories and project summaries to an AI workspace (e.g., a Claude project) helps establish a strong foundation. However, keeping the AI updated with current code can be more challenging. While emerging tools aim to streamline this process, I find that good code organization often does the trick in a pinch. The goal is to provide enough context for precise answers without overloading the AI with unnecessary information that could dilute its reasoning.

For Beerati, I structured the project into focused areas like content architecture, key features, and UI. Here’s how I organized some of the files:

Plugin Files:

• brai.content_archecture_config.php: Contains post types, taxonomies, and ACF field declarations.
• brai.content_archtecture_features.php: Includes code to extend or modify post types.
• brai.content_archtecture_views.php: Supports content listings (e.g., archive filters).
• brai.reviews.php: Handles the reviews feature.

Theme Files:

• functions.php: Contains only UI support code for templates.
• Templates:
  • single-brewery.php
  • archive-brewery.php

This modular organization allowed me to provide AI with just the necessary files for each specific feature. For instance, AI initially designed the brewery type with a taxonomy for locations, using terms like “Texas” and “Central Texas.” I wanted to switch to geolocation fields (latitude and longitude). By uploading only the content_architecture_config.php and content_architecture_features.php files, I ensured the AI could focus on the relevant changes. The result? Accurate updates to each file, complete with Google Maps integration for geocoding breweries.

By planning for context and organizing code effectively, I was able to maximize the AI’s efficiency while minimizing errors.

Tip: Move Config to Code

Having a mix of configurations, such as post types, split between the database and code complicates providing context to AI. Always aim to move as much critical database configuration into code as possible. For example, define your post types, taxonomies and ACF fields directly in code instead of using the WordPress admin interface.

As a bonus, this approach allows you to version control critical site configurations in a tool like Git, making the development process more collaborative and reliable.

Tip: Ask AI Early and Often

One habit I developed during this project was to consult AI even when I thought I already had a good solution. This practice often revealed insights I wouldn’t have considered otherwise.

For example, take the beer availability data. Initially, availability was a simple selection between options like "year-round," "seasonal," and "limited." I wanted to expand this to specify seasonal availability with more precision. My first idea was to use a "from" and "to" month/day range.

I ran this idea past AI, and it suggested switching to a full date field that included the year. When I expressed concern about the overhead of updating the year for seasonal beers annually, it provided a script to automate this process using AI, ensuring all seasonal beers would have their dates updated effortlessly each year.

Asking AI early and often not only saved time but also enhanced the quality of the solutions implemented in the project.

Tip: Be Flexible on the Must-Haves

This is solid advice for any MVP development. Overall, AI greatly accelerated the development of Beerati, but there were a couple of features I wanted to include that it struggled with.

For example, I wanted to create an interactive brewery map. The initial response from AI came close but got a few aspects of the UX wrong. I experimented with multiple prompt strategies and switched between LLMs. After an hour, I still wasn’t getting the desired result.

Eventually, AI asked if the feature was critical. This question was prompted, in part, because I had marked the user story as a "should have" in the project guide. The map wasn’t critical, so I moved it to the product backlog and focused on maintaining the iron triangle of scope, time, and resources.

Being flexible on must-haves is crucial for keeping momentum and ensuring the MVP stays on track.

Tip: Rethink Scalability and Technical Debt

Overall, the speed and quality of the features AI coded were impressive. However, code organization was lacking in several areas. For example, when creating brewery listing filters, AI embedded too much functionality directly into the template file. While it did break out some functions into other files, the overall structure felt very "cowboy coding."

When I asked AI to create the venue listing page, which shares many similarities with the brewery listings, it got the functionality right on the first try. However, it achieved this by duplicating significant portions of code.

I then asked AI to refactor the filters into reusable functions. Things got messy at that point—while it mostly worked, there were enough errors that debugging became impractical for a three-day launch timeline.

Normally, I would cringe at the scalability issues caused by so much duplicate code. For human developers, maintaining consistency across similar code in multiple places would add significant technical debt, slowing down future development and multiplying bugs. However, AI handles bulk edits and tweaks across files with relative ease, which changes the equation. What traditionally counts as technical debt for developers may not be as problematic when AI is part of the workflow.

In the end, it was a coin flip whether to launch with the venue content type. I decided to remove it and added a user story to refactor the code in a future sprint.

Next Steps

Rebuilding Beerati demonstrated how effectively AI can drive rapid web app development. The results were impressive, though debugging and copy-pasting required more effort than ideal. The next phase will focus on:

• Developing more advanced workflows with tools like Repo Prompt and Cursor,
• Enhancing prompt instructions for more sophisticated code generation, and
• Iterating on the site’s architecture and features.

This experiment showcased the power of AI as a lead developer, offering new possibilities for lean startup methodologies. Whether you’re prototyping a web app or scaling an MVP, integrating AI into your workflow can dramatically accelerate results.