0Pricing
Vibe Coding · Lesson

Planning the App with AI

Turn an idea into features and a plan.

Planning the App with AI is a free Vibe Coding lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vibe Coding learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

From Idea to a Real App

Welcome to the big one: building a full-stack app entirely by talking to AI. Full-stack means three layers working together — the frontend (what users see), the backend (the logic on a server), and a database (where data lives).

Before you generate a single line of code, you plan. A clear plan is the difference between a clean build and a tangled mess. The good news: AI is an excellent planning partner. In this lesson you'll turn a one-sentence idea into a concrete feature list and a build plan.

Start With One Sentence

Every app starts as a fuzzy idea. Your first job is to compress it into one clear sentence that names who it's for and what it does.

Don't worry about being perfect. You'll refine it with AI. A weak idea sentence is "a cool app for tasks." A strong one is specific about the user and the value.

Here is my app idea in one sentence:

"A simple web app where freelancers can log their work hours per client and see a weekly total."

Act as a product mentor. Ask me 3 sharp questions that would change how we build this, then restate my idea as a crisp one-liner.

Let AI Find the Core Features

Once your idea is clear, ask AI to break it into features. A feature is one thing a user can do: "add a time entry," "view weekly total," "create a client."

The trap here is asking for everything. Tell the AI to separate the must-haves (your MVP) from the nice-to-haves. You build the must-haves first.

Based on this app idea:
"A web app where freelancers log work hours per client and see a weekly total."

List the core features as short user actions. Split them into two groups:
1. MUST-HAVE for a first working version (MVP)
2. NICE-TO-HAVE for later

Keep the MVP list to 5 features or fewer.

Sketch the Data Model

Apps store information, and how you organize that information is the data model. Think in terms of things (entities) and the fields they have.

For our timer app: a Client has a name. A TimeEntry has hours, a date, and belongs to a client. AI can propose this for you so the database design isn't guesswork.

Propose a simple data model for this app:
"Freelancers log hours per client and see a weekly total."

For each entity, give me:
- the entity name
- its fields and their types
- how entities relate to each other (one-to-many, etc.)

Keep it minimal — only what the MVP needs.

Map the Screens

Next, list the screens (pages) a user moves through. Most small apps need only a handful: a main dashboard, a form to add data, maybe a settings page.

Listing screens early helps AI build navigation that makes sense and keeps you from inventing pages you don't need.

For the freelancer hours app, list the screens a user needs.

For each screen give:
- its name
- what the user sees there
- what actions they can take

Then describe how a user navigates between them. Keep it to 3-4 screens for the MVP.

Choose a Tech Stack (With AI's Help)

The tech stack is the set of tools your app is built with. As a beginner, you don't need to memorize options — ask AI to recommend a beginner-friendly, well-supported stack and explain why.

For vibe coding, a common, AI-friendly stack is Next.js (frontend + backend in one) with a hosted database. Let the AI justify its pick so you understand the choice.

I'm a beginner building the freelancer hours app by prompting AI. Recommend ONE simple, modern tech stack for the frontend, backend, and database.

For each choice:
- name the tool
- one sentence on why it's beginner-friendly
- note if it deploys easily to Vercel

Favor tools that AI editors like Cursor and v0 support well.

Turn the Plan Into a Spec File

A pro move: have AI write your whole plan into a single spec document (often a PROJECT.md or spec.md file). This becomes the shared memory you paste into any AI tool so it builds the right thing.

Tools like Cursor and Claude Code read project files automatically, so keeping a spec in your repo keeps the AI aligned across the whole build.

Combine everything we discussed into a single PROJECT.md spec for the freelancer hours app. Include sections:

## Idea
## MVP Features
## Data Model
## Screens
## Tech Stack
## Out of Scope (for now)

Write it in clean Markdown so I can save it in my repo and feed it to any AI tool.

Order the Build Steps

You can't build everything at once. Ask AI for a build order — the sequence of steps that gets you to a working app fastest, with something runnable at each stage.

A good order usually goes: data model first, then a backend that reads/writes it, then a frontend that talks to the backend, then login last. Each step should leave you with something you can actually run.

Using our PROJECT.md, give me an ordered, step-by-step build plan for the freelancer hours app.

Rules:
- Each step should end with something I can run and see working.
- Start from the database/data model and build outward.
- Put authentication near the end.
- Number the steps so I can tackle them one prompt at a time.

A Tiny Taste of the Data

Before any real database, you can sketch your data as plain JavaScript objects. This makes the data model feel concrete. Here's how our timer data might look as an array — exactly the shape a frontend would render.

Run it to see a weekly total computed from sample entries. This is the kind of logic AI will scale up into your real app.

const entries = [
  { client: "Acme", hours: 3, date: "2026-06-01" },
  { client: "Acme", hours: 2, date: "2026-06-02" },
  { client: "Globex", hours: 4, date: "2026-06-03" }
];

const total = entries.reduce((sum, e) => sum + e.hours, 0);
console.log("This week:", total, "hours");

const byClient = {};
for (const e of entries) {
  byClient[e.client] = (byClient[e.client] || 0) + e.hours;
}
console.log("Per client:", byClient);

Keep the Plan, Stay Flexible

A plan is a starting map, not a cage. As you build, you'll learn things — a feature is harder than expected, or a screen turns out unnecessary. That's normal.

When the plan changes, update your PROJECT.md and tell the AI. Keeping the spec current means every future prompt stays grounded in reality instead of an outdated dream.

We finished step 2 and decided to drop the 'export to CSV' feature for now and add a 'notes' field to each time entry.

Update the relevant sections of PROJECT.md to reflect these two changes, and show me only the sections that changed.

What a Strong Plan Gives You

With a sentence-sized idea, an MVP feature list, a data model, a screen map, a stack, and an ordered build plan saved in a spec file, you're ready to build with confidence.

Every prompt from here can reference this plan, so the AI builds your app — not a generic one. Planning feels slow, but it's the fastest path to a real, working full-stack app.

Quick Check

Let's lock in the planning workflow.

Recap: Plan First, Build Smart

You learned to turn a fuzzy idea into a buildable plan with AI:

  • Compress the idea into one clear sentence
  • Split features into MVP vs. later
  • Sketch a minimal data model and screen map
  • Pick a beginner-friendly tech stack
  • Save it all in a PROJECT.md spec and get an ordered build plan

Next up: wiring the frontend and backend together so your screens can actually talk to a server.

Frequently asked questions

Is the “Planning the App with AI” lesson free?

Yes — the full text of “Planning the App with AI” is free to read here on the web, and the Vibe Coding course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vibe Coding course, upgrade to CoddyKit PRO.

What will I learn in “Planning the App with AI”?

Turn an idea into features and a plan. You practise Vibe Coding with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vibe Coding?

No prior experience is required. Vibe Coding on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Planning the App with AI” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vibe Coding lesson?

Yes. Every Vibe Coding lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Planning the App with AI
  2. Frontend and Backend Together
  3. Adding a Database
  4. User Accounts and Login
← Back to Vibe Coding