The English site is still catching up with the Turkish one, so a few pages and links are Turkish for now.

A live app in 2 hours.

You build a small web app from an idea of your own and put it on the internet. Anyone you send the address to opens it on their phone. Plan for about two hours, and along the way you see what each step is for, so you can start the next app on your own.

live address that opens on a phone: 1; live address that opens on a phone
for everything except Claude Code: $0; for everything except Claude Code

Where are you starting from?

Pick the card closest to you. The explanations on the page adjust to your choice.

I don't write codeYou ship your own app without writing code. Every term you run into is explained right here on the page.I code, but not with an agentBranch, PR and tests are familiar. Here you see where you step in while the agent runs that same flow.Analyst, QA or productReading the agent's plan and correcting it is close to the acceptance criteria you write every day. You get to watch your idea turn into code one step at a time.I run a teamTry it once yourself first. There's a separate path for your team.

What will you build?

The template comes with a simple list, and you turn it into a list about your own topic. Then the app works out one thing from that list that's useful to you.

01
The list first
A simple list you can add to and delete from. Its fields change to fit your topic.
02
Then one computed feature
The app computes one thing from the list (a total, a ranking, a suggestion or a filter). That result is the reason you'll keep opening the app.

Pick one of the examples below or start with your own idea.

BooksListtitle, page count, read or notComputed featurewhat to read next, the shortest of the unread onesHoliday expensesListwho paid, for what, how muchComputed featurewho owes whom and how muchWorkoutsListdate, what you did, how many minutesComputed featurethis week's total and the change from last weekCustomersListcustomer name, date of last contactComputed featurewho to call this week, everyone you haven't talked to in 30 daysShop stockListitem, how many you have, minimumComputed featurea reorder list, the items below their minimum and how many of each to buyYour own ideaTell the agent what you have in mind. If the feature you pick needs information your list doesn't have, the agent says so in the first conversation. One question sorts it out.

Selected example: Books. The examples in the steps, the terminal and the flow follow this choice.

Before you start

All of it is one-time setup.

GitHub accountfree
Where your code lives. You copy the template into your own account here.
Vercel accountfree
The service that puts your app on the internet. Signing in with GitHub is enough.
Node 24 and pnpmfree
They run the app and the tests on your computer.
gitfree
It comes with a Mac. On Windows you install it from git-scm.com.
The GitHub CLI, ghfree
The agent opens the PR with it. Once it's installed, type gh auth login in the terminal to connect your account.
Claude Codethe only paid one
The agent that writes the code. It needs a Claude subscription or an Anthropic API key.

START.md on the template's GitHub page lists the addresses and install commands in order.

Flow

Your app goes through seven stops. Click one to see what happens there and what's on your screen.

Three questions and a plan

The agent asks you three questions and turns your answers into a one-page plan. The plan waits until you OK it.

› Read CLAUDE.md and let's start Claude: Three questions.1. What do you want to keep a list of?2. What do you want to learn from the list?3. Who's going to use the app?

Steps

Go at your own pace. There are six steps, and steps 3, 4 and 5 repeat once for each feature.

01
Go live
- On the template's GitHub page, press the "Use this template" button.
- Create a new repo in your account and pick Public. That way anyone you send the link to can see the code.
- On Vercel, import this repo and press Deploy without touching the settings.
On screenThe name.vercel.app address Vercel gives you, with the sample app running there.
02
Say what you wantyou decide
- Clone the repo to your computer, then type claude inside the folder to open Claude Code. START.md has the commands in order.
- Make your first message "Read CLAUDE.md and let's start".
- The agent asks what you want to keep a list of, what you want to learn from it and who's going to use the app.
- Your answers become a one-page plan called SPEC.md. Read it and say what you'd change.
- Once you approve, the agent runs the app on your computer and asks you to open it in your browser.
On screenThe agent's questions, and the SPEC.md that comes out of your answers.

one round per feature, two in total

03
Test first, then code
- Every feature starts on a new branch.
- The agent writes the test first and runs it. The app doesn't do that job yet, so the test is red.
- It tells you in one sentence what's missing.
- Once the code is written and the test runs again, the same test turns green. Try the change in your browser yourself.
An example from the first round. The test adds a book and wants to see its page count in the list. The form has no page count field yet, so the first run is red.
pnpm test
```
$ pnpm test
```
On screenTest output in the terminal, red first and then green. Next to it, the app refreshing in your browser.
04
PR and preview
- When the feature works, the agent reads every file it changed. If it finds a missing test or something that isn't in SPEC.md, it fixes it.
- It asks you before sending the branch to GitHub and opening a PR. It edits files and runs tests on its own.
- Vercel builds a preview for every PR, a copy of the app at a temporary address.
- Open the preview on your phone and try the new feature. Whatever you enter there stays at that address.
Something to try on the preview. Add two unread books of 120 and 300 pages and a 50-page one you've already read. The suggestion should be the 120-page book.
On screenThe PR page on GitHub and the preview link Vercel leaves on it, open on your phone.
05
Review and mergeyou press it
- If you like, tell the agent "review this PR" and get a short summary.
- If everything looks right on the preview, press the merge button. The agent never presses it for you.
- The change goes into main and Vercel updates the live address in a minute or two.
On screenThe "Merge pull request" button on the PR page, then the live address updating.
↺ After the first merge, go back to step 3 for the second feature. After the second merge, move on to step 6.

06
Open the live address
- The agent sends you the live address, the link to your last PR and the test output in one message.
- Open the live address on your phone. What you entered on the previews isn't here, because each address keeps its own data.
- If the list opens empty, add an entry and watch the app work.
On screenThe agent's last message, and your live app open on your phone.

What do you end up with?

Live address. Your permanent address on Vercel. Anyone who opens it can use your app.
PR link. The last PR you merged. Your repo is public, so anyone who opens the link sees what changed.
Test output. The pnpm test output, which the agent also puts in the PR description. The agent wrote the tests too, so green only means the code meets its own bar. Each test's name says what it checks. Read the names and see if that's what you asked for.

Write all three here and your browser keeps them. When you want to show someone, they're in one place.

Glossary22 terms

repo: : The folder that holds your app's files and the history of every change. Yours lives on GitHub.
template: : A ready-made starting point you copy to open your own repo.
import: : Picking a GitHub repo in Vercel and connecting it. From then on Vercel takes care of putting it online.
deploy: : Putting the app on the internet so it opens at an address.
clone: : Downloading a copy of the repo to your computer.
terminal: : The window where you type a command and press Enter. Terminal on a Mac, PowerShell on Windows.
Node: : The program that runs the app on your computer. The template needs version 24 or later.
pnpm: : The tool that downloads the packages the app uses and starts the tests and the development server.
git: : The tool that keeps the history of your files. Repo, branch and commit are its words.
API key: : A secret key from Anthropic that lets you pay for Claude Code as you use it instead of with a subscription.
CLAUDE.md: : The method file that comes with the template. The agent reads it first, and it says what to do in what order.
SPEC.md: : A one-page plan, written before any code, that says what gets built and what counts as done.
test: : A small program that checks the app does one thing right. If the app doesn't do it yet, the test is red.
branch: : A separate line of work where you make changes without touching the live app.
commit: : A saved snapshot of your files with a one-line note. The agent makes at least one every round.
PR: : Pull request. A GitHub page that shows the changes on a branch and has a merge button.
preview: : A temporary address Vercel opens for every PR. You try the change there before you merge.
main: : The main branch, the one the live app runs from.
merge: : Accepting a PR. The change goes into main and the live address updates.
review: : Reading and checking a change before you accept it.
gh: : GitHub's command line tool. The agent opens the PR with it.
localStorage: : A small store inside your browser. The app's data sits there, only on that device and at that address.

Limits

Data lives in your browser (localStorage). Open the app on another device or at another address and the list comes up empty.
No user accounts, database or AI features. Each one needs a new account or key, so they come in later steps of the program.
Tests run on your computer. There's no server that runs them on every PR by itself.

Start

If your setup is ready, copy the template into your account and begin with step 1.

Open the template on GitHub

Get new steps by email.

Every new step and article added to the program lands in your inbox. You can leave the list any time.

Where are you starting from?

What will you build?

Before you start

Flow

Three questions and a plan

Steps

Go live

Say what you wantyou decide

Test first, then code

PR and preview

Review and mergeyou press it

Open the live address

What do you end up with?

Limits

Start

Get new steps by email.