Get a real app running

We are going to make a real app skeleton on your machine and see it in a browser. It takes three commands and about five minutes, most of which is waiting.

One thing to say before we start, because it stops people: you are about to install a web framework called Next.js, and you do not need to understand it. I use it because it is what I built Fable on, and because putting it on the internet later is a single command. Treat it as the workshop, not the thing you are making.

First, check you have Node

Node is the engine everything here runs on. Check whether you already have it:

v22.13.1

If you see a version number of 20.9 or higher, you are set. If you get an error saying the command is not found, install it from nodejs.org, take the version marked LTS, then close and reopen your terminal and try again.

Command one: create the app

Pick a name for your project folder, lowercase with dashes instead of spaces, then run:

Change my-first-app to whatever you like. This takes a minute or two and prints a lot of text, which is normal. Read the last line: it should say Success!

That --yes on the end is doing you a favour. It skips about eight questions you have no basis to answer yet and takes sensible defaults: TypeScript, Tailwind for styling, and the modern App Router. It also sets up a git repository for you, which becomes your undo button in lesson 3.

Command two: go into the folder and start it

▲ Next.js 16.3.3 (Turbopack)
- Local:         http://localhost:3000

✓ Ready in 200ms

cd means change directory. npm run dev starts a small web server on your own machine.

Now open http://localhost:3000 in your browser. You should see a starter page. That is your app. It is running on your computer, and only your computer, which is exactly what we will fix in lesson 5.

Command three: point Claude Code at it

Open a new terminal window, move into the same folder, and start Claude Code there:

That last part matters more than it looks. Claude Code works with whatever folder you started it in, so starting it inside your project is what gives it access to your app. Start it somewhere else and it will be helpfully confused about a project it cannot see.

The four files that matter

You just created several hundred files. You can ignore almost all of them. These are the ones worth knowing by name:

• app/page.tsx is your home page. This is the file you will change most. When you edit this, the browser updates by itself, no refresh needed.
• app/layout.tsx is the wrapper that goes around every page: the title in the browser tab, fonts, anything that should appear everywhere.
• public/ is where images go. Anything in there is reachable at your site address plus the filename.
• package.json lists what your project depends on and the commands it can run. You will rarely edit it by hand.

Everything else is machinery. The node_modules folder in particular holds thousands of files you should never open, never edit, and never worry about.

Make one change, just to prove it works

Before we do anything real, let us confirm the whole chain is connected. In Claude Code, type:

Approve the change, then look at your browser. It should have updated on its own, without you refreshing.

If that happened, everything is wired up: your editor, your server, your browser and your assistant are all pointing at the same project. That is the whole setup, and you will not have to do it again.

What's next

You have a working app that does nothing in particular. Next we turn it into your idea, one small slice at a time, which is where the real method lives.