How Do Non-Coders Build a Web App Using AI Code Generators?

A Step-by-Step Journey from Impulsive Development to Strategic Planning

I’ve built a couple of products so far. Focus Bell, my first Android app, is up and running on the Android App Store, and SaveScout.app, my first web app, is live too. SaveScout.app summarizes personal bank statements while helping users identify and visualize their spending behavior and patterns.

One mistake I made with both apps was not planning ahead. I thought that since I was using AI to generate the code, planning wouldn’t really matter. I had a rough structure in mind and jumped straight into development.

Wrong idea.

The truth is, you can start building an app—or any idea—quite easily at first. The initial steps are fun: in just a few prompts, you can see the front page of your website come to life. But once you dive deeper and try to add or modify features, chaos ensues. Without understanding what’s happening under the hood, you quickly find yourself in over your head.

This time, I decided to start with a solid plan. But if I know nothing about coding or web development, how do I plan? Simply put, “I don't even know what I don't know.”

Enter my new best friend: ChatGPT.

Let’s break it down step by step. Remember, I’m no pro—I have a couple of products under my belt and have learned mostly from my mistakes by exploring tools on social media (YouTube, X, Facebook) and testing them out. I hope that this time, I can achieve a more structured and straightforward process.

First Things First: What Am I Building?

I’m building a customer management tool for people working online. My ideal customer is my wife, a life coach and influencer. She conducts online coaching sessions and courses, and I’ve seen her juggling registers, WhatsApp messages, and Excel sheets (the latter of which I created for her). It’s a hassle for her to keep track of everything, so I’m creating a product that enables her to manage her clients easily—all in one place.

Are there similar products out there? Yes.

Do I care? No.

Building a new one would be fun and extremely rewarding in terms of learning—which is what i am currently looking for.

A Little History Lesson

Before diving into my new project, here’s a bit of context from my past experience. Previously, I was working in Visual Studio with an AI code generator extension called Cline. I even wrote a blog explaining and showcasing how it works (you can check it out [here]). It’s extremely simple: download Visual Studio, install extension Cline, open Cline, type in something like “build me a snake game” in plain English, and it starts writing code and creating files for you. (I’m oversimplifying, but if you’re interested in more details, please see my other blogs.)

For this project, I’m using cursor.ai. It’s an IDE with an interesting twist: you can supply it with a markdown file containing a complete plan of what to build and how to build it. Then, you prompt it to follow that file.

Theoretically, cursor.ai will execute the steps one by one to build the entire app (again, oversimplified). The key here is the detailed plan file—and here’s how I plan to create it.

(Why “theoretically”? Because I haven’t fully executed this yet—I’ve seen some tutorials, and I’ll dive in as I progress with the project.)

I combined insights from tutorials, blogs, and videos with the issues I faced while building my previous apps. Now, I’m investing more time in the planning stage to foresee and address potential issues.

The Planning Process: Building Context Step by Step

To do the planning, I rely on ChatGPT. I start a structured discussion with it because asking any large language model (LLM) to build everything in one prompt usually results in a jumbled output. Since I’m not a coder, I won’t always know if the output is perfect. So, I follow these steps to gradually build the context:

1. Generate a Project Brief Statement
2. Develop a Detailed List of Project Features and Requirements
3. Generate the User Journey for Each Feature
4. Design the Database Structure
5. Create the Site Structure
6. Produce the Detailed Development Plan File

Why can’t all this be done in one go? The more jumbled a prompt is, the worse the response becomes. Breaking it down into manageable steps, discussing and refining each part before moving on, improves the quality of the output.

I plan to compile a detailed development plan (the markdown file), along with the database structure and site map. These three files should give cursor.ai enough context to minimize mistakes—though, of course, some errors will happen. And that’s part of the fun: fixing them.

Breaking Down Each Step

Step 1: Generate a Project Brief Statement I use this prompt:

“I am starting a project [give name] which will do [details of what the app should do] for [target customers]. The goal of this app is to [what problem the app solves]. Please generate a project brief statement.”

This generates a clean and concise project brief of the project.

Step 2: Develop a Detailed Features and Requirements Plan Building on the project brief, I use:

“Based on this Project Brief, please help me gather comprehensive requirements by analyzing must-have features for the app. Provide specific examples where possible and identify any additional requirements unique to this project. Also, include any industry standards or best practices for usability.”

This produces a detailed list of features and technical requirements. I then have a chat with the LLM and ensure that all the features that i want in the app are included in the detailed features and requirement plan.

Step 3: Since I’m a non-coder, I give this prompt next:

“Now explain each item you have mentioned in this detailed plan—I want to understand what is happening in this file.”

This ensures I have a basic understanding of each component.

Step 4: Outline Customer Use Cases and Journeys I then ask:

“Think of all the use cases based on the features we’ve finalized in the previous step from a customer’s perspective, and give me the customer journey for each use case.”

This step is critical. In a previous project, making changes mid-development led to missed angles and a lot of frustration. By detailing the user journey now, I set a foundation for creating pages and defining database requirements.

Step 5: Design the Database Structure Next, I use:

“Now I want you to design the database for all the activities described above. Please ensure it follows best security practices and covers everything.”

Even though I don’t fully understand database design, I know I need tables for authentication, customer records, and other functions. Asking for this separately helps the LLM generate a clear, comprehensive database structure.

Step 6: Create the Site Structure Finally, I prompt:

“Based on these features, provide a sitemap including the page structure, showing all primary pages, their hierarchy, and how they are interconnected.”

I received an excellent response to this prompt. Even if I don’t understand every detail, it doesn’t matter—what’s important is that now ChatGPT has a very very detailed context and understands each and every requirement of the app that i want to build, which means now when i will give the last prompt and ask it to give me the markdown file with detailed development plan it will not mix or miss anything.

I’ll share the complete breakdown file preparation prompt, along with other instructions for cursor.ai, in my next update when I start the actual building process.

Stay tuned as I continue this journey, one step at a time

#NoCode #AIDevelopment #WebAppJourney #LearningByDoing