A step-by-step exercise to build your first own app, locally on your machine, using words alone. You tell the AI in plain language what you want, it sets things up, you watch and learn along the way how the pieces fit together. No coding knowledge needed.
A computer, one of the editors above, and a small idea of what the app should show. A single list you want to keep an eye on is enough. If nothing comes to mind, use a simple notes list as practice.
Set me up an empty project with React and Tailwind that runs locally. I have nothing installed yet. Walk me through it step by step and explain each step simply.
This is your foundation: a clean, empty project that everything else builds on.
Now start it on a small server. I want to see the app in the browser on localhost. Tell me exactly what to type and which address to open.
Localhost is your app on your own machine. Only you can see it, perfect for trying things out.
Simple and local: Markdown
For now the data should just live as Markdown files, no server, no database. Show me where to put them and how the app reads them.
A real database, local: SQLite
I want a real database, but fully local on my machine. Set me up SQLite, a single file. Tell me what else I need for that, and keep it as simple as possible.
Cloud, for going live: Supabase
I need a database that also works online when I share the app. Set up Supabase and connect it to the app. Explain what I click in Supabase at each step.
Three ways, same idea, from simple to real. Markdown is the fastest, fully local start. SQLite is a real database, also local, but needs a small extra part. Supabase lives in the cloud and is the way when the app should run online with others. Start with Markdown, switch later.
Build me a small, calm interface with React and Tailwind that shows this data. Clean and tidy, no clutter.
Now it becomes visible. Tell the AI what you want to see and watch it appear live on localhost.
Set up Git in the project so I save states and can go back. Explain how I save a new state. If I later want an online backup, show me GitHub.
Git saves your states locally, you can go back any time. GitHub is just Git in the cloud, you only need it as a backup or when you share and deploy.
Deploy this with Vercel, I want a public URL I can share. Walk me through connecting GitHub to Vercel.
Vercel turns your local state into a real web address. Once connected, every new state goes live automatically.
I'll continue tomorrow. Tell me step by step how to open the project again and restart localhost.
The trick most people get stuck on: go into the project, restart the dev server, done. Do it once and it is second nature.
Explain that more simply, no jargon.
Show me the exact command to type.
I'm stuck on this step, what exactly do I do now?
Go back one step and take smaller steps.
Next step
App running? Now build your own reusable AI skills on top.
Why do this
Once you set up an app locally yourself, you understand what is behind the tools and no longer depend on ready-made kits. You keep control of your result and can fill it with real tools later.
| Block | What for |
|---|---|
| Local app | Your project on your machine, where everything is made. |
| Frontend | The interface you and others see and use. |
| Server | Takes requests and serves data, the back room. |
| Database | Keeps your data ordered and findable. |
| Git | Saves versions, you can go back. Works fully local too. |
| GitHub | Git in the cloud: backup and team place. Optional, not required. |
| Vercel | Turns the project into a public web address. |
| What | Local (your machine) | Cloud (online) |
|---|---|---|
| Where it runs | localhost | Vercel |
| Data | Markdown or SQLite | Supabase |
| Versions | Git in the project folder | GitHub |
| Who sees it | only you | anyone with the link |
This is your workshop: a running app you can deploy. Next you fill it with real tools and the right prompts. That is exactly what the handbook shows.