App vs. Website — What's the Difference? Getting Started with Claude Code

What's the difference between a "site" and an "app"?

In the First Steps series, we used Claude to create a web page and put it on the internet.

That web page was a site. You put information on it, and people come to look at it. Think profile pages, blogs, news sites — that kind of thing.

An app works differently. With an app, the user does stuff, and data changes.

For example:

• A TODO app — you add tasks, mark them done, delete them
• A notes app — you write things down and save them
• A calendar app — you create events and manage your schedule

It doesn't end at "looking at a page." The user takes action, and something changes. That's what makes it an app.

Over the next four articles, we're going to build a TODO app together.

What you'll learn in this series

A TODO app looks simple, right? But it actually covers all the fundamentals of app-building.

Here's what we'll cover across these four articles:

1. This one — Setting up Claude Code and creating a project
2. Part 2 — Building the UI (adding, listing, and deleting TODOs)
3. Part 3 — Saving data (so it doesn't disappear when you close the browser)
4. Part 4 — Putting it on the internet

"Build the UI → handle data → deploy." That flow is the same no matter what app you're building. Learn that flow with a TODO app, and you can apply it to anything.

Claude Code requires a Pro plan

Up until now, we've been using Claude's free plan. But Claude Code requires the Pro plan ($17/month annual, $20/month monthly).

With Claude Code, Claude writes code for you directly. You can use it from the terminal or from the Claude Desktop app. Artifacts only lets you create a single file. Claude Code can set up entire projects — folders, files, the whole thing — and build a real app for you.

How to upgrade to Pro:

1. Log in at claude.ai
2. Click your account name in the bottom left
3. Select "Manage plan" or "Upgrade to Pro"
4. Enter your payment info and you're done

Install Claude Desktop

You can use Claude Code from the Claude Desktop app. Same chat interface you're already used to — now it can write code for you too.

1. Go to claude.ai/download
2. Download the app for your OS (Mac / Windows) and install it
3. Log in with your Claude account

That's it — you're all set!

Let's create a project

Here's where the real fun starts. Let's have Claude Code create a TODO app project for us.

Open Claude Desktop and ask it something like this:

Don't worry about the details — just ask, and Claude Code handles the rest.

Claude Code will start creating files automatically. It might ask "Can I run this command?" along the way — go ahead and approve it.

After a moment, the project will be ready. It might look like a lot of files all at once, but don't worry — Claude Code's got it handled.

Now let's see if it works. Ask Claude Code:

Open your browser and go to http://localhost:3000. You should see the default Next.js page.

Congrats! The foundation for your TODO app is ready.

Wrap-up

Here's what we covered:

• A site is something you look at. An app is something you use.
• A TODO app covers all the basics of building an app
• Claude Code lets Claude write code for you directly
• We created a Next.js project and started a dev server

Your app-building environment is ready. Next up, we'll start building the actual UI.

In the next article, we'll ask Claude Code to "build a TODO screen" and create a working interface where you can add, view, and delete tasks. Things are about to start looking like a real app.