Build an App · Lesson 2Pro~14 min readData + logic + screensBuilds on Lesson 1

From toy to tool — data, logic, and real screens.

A Lesson 1 tool answers once and forgets. This lesson turns it into something you actually rely on: it saves your data, follows your business rules, and gives you screens to manage it all — still no code, just a richer description of the job.

The mental model

The jump from a one-shot tool to a real one: it remembers data, follows rules, and has more than one screen.

A Lesson 1 tool answers a single question and forgets. A real tool keeps your data, enforces the rules of your business, and gives you places to view and manage what you’ve put in. Same no-code approach — you’re just describing a richer job.

The Reframe

A tool earns its keep when you stop rebuilding it. If you re-enter the same data every time, it’s a toy. The moment it remembers and shows your history, it becomes part of how you work.

Step 01 Give it real data

Let people enter things and see them back — a list, a total, a history. This is what turns a calculator into a tracker.

Data promptAdd the ability to save each entry and show them in a list below, newest first, with a running total. Let me edit or delete an entry. Keep it simple and clear.

Step 02 Add the logic and rules

Your business has rules — AI can enforce them so the tool is right, not just pretty:

Validation — required fields, sensible limits, “that’s not a valid email.”
Calculations — totals, tax, margins, tiered pricing.
Conditions — “if quantity over 100, apply the bulk rate.”

Logic promptApply these rules: [your rules, e.g. “orders over $500 get free shipping; the tax rate is 7%; quantity must be a whole number”]. Calculate the total automatically and explain each line so the user trusts the number.

Step 03 More than one screen

Real tools have views: a place to add things, a place to see them, maybe a detail view. Describe the screens and how to move between them.

Screens promptGive it two views: an entry screen and a “history” screen showing all past entries with search. Add simple navigation between them. Each entry in the list opens a detail view.

Step 04 Make it genuinely usable

The difference between “a teammate can use this” and “only I understand it” is small, specific polish:

Clear labels and helper text on every field.
A friendly empty state (“No entries yet — add your first above”).
Plain error messages that say what to fix.

Your data probably disappears when you refresh the page right now — that’s normal at this stage; the tool is holding it in memory. Making data permanent and shared is exactly what Lesson 3 sets up. For now, focus on the logic and screens.

Your challenge: make your tool remember

Take the tool you built in Lesson 1 and level it up:

Add saving so entries persist in a list with a running total.
Encode two real rules from your business (a calculation and a validation).
Split it into two screens with simple navigation.
Add an empty state and friendly error messages.

Now it’s a tool a teammate could pick up. Next, make the data permanent and shared, add logins, and put it online — that’s Lesson 3.

Next: ship it for your team →Back to Build an App

What you can do now

Add saved, editable data to an AI-built tool
Encode validation, calculations, and conditional rules
Split a tool into multiple screens with navigation
Add the usability polish that lets a teammate use it
Understand why in-session data resets (and what fixes it)

Pro+

Up next in Build an App

Lesson 3 · Ship it for your team — hosting, accounts & your data

Put it online, give it a real database so data survives and is shared, add logins where needed, and connect it to the data you already have. Go to Lesson 3 →