Structure

Structuring a Multi-Feature App

Vibe Coder 101 · Phase 2: Leveling Up · Stage 11 of 38 · about 15 min

Your weekend project probably lives in one or two files. That is genuinely fine — do not let anyone tell you otherwise.

But add a few features and one day you are scrolling through a thousand lines hunting for the bit that draws the list. That is the junk-drawer stage, and it is where a lot of AI projects quietly die.

Why it happens faster with AI

Each request is answered on its own. Ask for five features in five conversations and you can get five slightly different ways of doing the same thing — three functions that all save data, in three different styles.

Nothing is broken. It is just that nobody was keeping the house tidy, because nobody was living in it.

The one rule

Things that change together should live together.

Everything about "tasks" — creating, drawing, deleting, saving — belongs in one place. Then when you change how tasks work, you open one file, not six.

A reasonable shape for a growing small app:

  • One file per big feature — tasks.js, settings.js.
  • One file for shared helpers — small utilities used everywhere.
  • One file that starts everything — the entry point that wires the pieces together.

Do not build that on day one. Let it emerge when a file gets uncomfortable — around the point where you scroll to find things.

Splitting safely

Reorganizing is exactly the moment things break, so:

  • Make a save point first. Always, and especially here.
  • Move one feature at a time. Then run the app. Then the next.
  • Ask for a move, not a rewrite. "Move only the task functions into tasks.js and update the imports. Do not change how anything works."

That last sentence is the important one. Left to its own judgment, an AI asked to "reorganize" will often improve things you never asked it to touch.

Adding a feature without breaking three others

Say what must not change. It is the cheapest insurance there is:

Add a "clear completed" button below the list. Do not change how adding, checking, or deleting tasks currently works. Keep the existing styles.

Go deeper

Why AI-built apps get fragile as they grow — and what to do about it — is covered in Why Your AI-Built App Keeps Breaking.