Building full apps
What it takes to build a complete app
A one-page app is a great start. But most real apps need more: saved data, accounts, maybe payments. This section explains each piece and shows how to build it with an AI coding agent.
What is a full-stack app?
Think of a restaurant. Guests see the dining room. Behind the wall there is a kitchen, a pantry, a cash register, and a manager's office. A full-stack app has all of these parts, not just the dining room.
Full-stack means the app has both a frontend (what people see in the browser) and a backend (the server and database behind it). Most complete apps need some mix of these:
- Pages — the screens people click through
- Data — a database that remembers things, like products, bookings, or habits
- Login — accounts, so each person sees their own data
- Payments — a safe way to take money, if you sell something
- Admin — special screens for the people who run the app
- AI features — an assistant or smart helper inside the app
- Deploy — putting the app on the internet with a real link
You don't need all of them. A habit tracker needs login and data, but no payments. An online shop needs almost everything.
The typical stack
A stack is the set of tools an app is built with. When you ask an AI coding tool to build a web app, it often picks something like this. You only need to know what each tool is for.
| Feature | Common choice | Its job |
|---|---|---|
| Pages and design | Next.js + Tailwind CSS | Builds the screens people see |
| Data and files | Supabase | Database, logins, file storage, access rules |
| Payments | Stripe (test mode first) | Handles checkout safely |
| AI features | An LLM API | Powers an assistant from the server |
| Code history | Git + GitHub | Saves every step and backs it up |
| Hosting | Vercel or Netlify | Puts the app on the internet |
| Builder | An AI coding agent | Writes and changes the code with your approval |
Other tools work too. The ideas on these pages apply whichever ones you pick.
Build the app
Ship it
How to use this section
Each page teaches one part of a full app. The pages follow a sensible build order, so going in order works well. Every page follows the same pattern:
- What is it? — A simple explanation with an everyday example
- Try it — Prompts you can adapt for your own app
- Practice — Short exercises to check your understanding
- Common mistakes — Things to watch out for
Practice
Try these exercises to lock in what you just learned.
What's next?
Every good build starts with a plan. Let's learn how to plan a bigger app: its pages, its data, and the order to build it in.