App Anatomy
Asha tells her AI builder "my saved items disappear", and it redesigns the pantry screen three times. The screen was never the problem: nothing was being stored. Knowing the parts of an app lets you point at the right one, and a precise pointer gets a precise fix.
The rule
Every app is screens, logic, data and outside services — know which you mean.
- Screens (the front end) — what runs on the user's device: pages, buttons, forms. Anyone can open the browser's tools and read this code, so nothing secret belongs here.
- Logic (the back end, or server) — code on a machine you control: building the prompt, calling the model, enforcing rules and limits.
- Data (the database and file storage) — whatever must survive a closed tab: pantry items, allergies, later favourites.
- Outside services — things you rent instead of build: the AI model, sign-in, email, payments. You reach them with secret keys that stay on the server.
Hosting ties them together: it is where your front end and server run so people can reach them.
| Part | In Pantry Pal |
|---|---|
| Screens | Item list, "Suggest dinners" button, three dinner cards |
| Logic | Build the prompt, call the model, remove allergens |
| Data | Saved pantry items and allergies |
| Services | The AI model; later, sign-in and email |
The shortcut
Follow one tap. Pick a single user action and trace it through every part, in order. You will see every part a feature needs, and exactly where a bug or a secret could live.
Screen
The button sends a request to Pantry Pal's server and shows a loading message.
Now "saved items disappear" has an obvious suspect. Following the tap that saves an item shows whether it ever reaches the database, or only lives in the screen's memory until the tab closes.
Drills
Answer fast — trust the rule.
Where must the AI model's secret key live?
Pantry items vanish whenever the user closes the tab. Which part is most likely missing?
Which of these is an outside service for Pantry Pal?
Asha adds an "Email me a shopping list" button. Following one tap, which parts does it touch?
Remember
- Screens, logic, data and outside services, plus hosting that runs them.
- Follow one tap through every part to see what a feature needs and where a bug can hide.
- Trap: putting secrets or hard rules in the front end, where anyone can read or skip them.