Build a TODO Screen with Claude Code

What we're building

In the previous article, we set up a Next.js project. But it's still empty — open it in the browser and all you see is the default Next.js page. Today, we're going to build the actual TODO app screen.

Here's what the finished product looks like:

• A text input and "Add" button at the top
• A list of TODOs below
• A checkbox on each TODO to mark it complete
• A delete button on each TODO to remove it

Simple, right? But this covers all the basics of building an app: showing a screen, handling user input, and updating what's displayed.

Let's have Claude Code build this screen using the project we set up last time.

Ask Claude Code to build the screen

Open Claude Desktop and open the my-todo-app folder.

Once the folder is open, ask Claude Code:

Claude Code will start editing files. It might ask "Can I run this command?" along the way — go ahead and approve it. Claude Code is asking permission to run commands that create or modify files in your project.

After a moment, the code will be ready. If the dev server isn't running yet, ask Claude Code to "start the dev server."

Open your browser to http://localhost:3000 and you should see the TODO app screen.

Try it out

Once the screen loads, give it a spin:

1. Type "Buy groceries" in the input field and click "Add"
2. Add "Do the laundry" and "Reply to emails" too
3. Click the checkbox on "Buy groceries" to mark it complete
4. Click the delete button on "Reply to emails" to remove it

See how it works? TODOs appear in a list, you can check them off and delete them. It's already a working app.

Tweak the design

Once you have something working, the next step is adjusting the look and feel. This is where Claude Code really shines.

For example, you could ask:

Claude Code updates the code, and the browser refreshes automatically. If it doesn't, just hit the refresh button.

If something doesn't look quite right, just ask for more changes:

This cycle of "try it → tell Claude what to fix → see the update" is the core workflow when building with Claude Code.

When things go wrong

Claude Code doesn't always get it right on the first try. The screen might go blank, or a button might not respond. Honestly, the first time I tried this, the add button did nothing and I panicked — did I break it?

But it's fine. Just describe what's happening, and Claude Code will fix it.

You don't need to understand the error. "It's not working," "the display looks wrong," "the button doesn't respond" — that's enough for Claude Code to investigate and fix it.

If it's still broken after a few attempts, start fresh:

Claude Code writes the code, so starting over costs you nothing. Being able to redo things freely is the biggest advantage of building with AI.

Wrap-up

Here's what we covered:

• Had Claude Code build a TODO app screen
• Got add, list, complete, and delete working
• Tweaked the design through conversation alone
• When something breaks, just describe the symptom

We now have a working app with a UI and interactions. But there's one problem — close the browser and reopen it, and all your TODOs are gone.

In the next article, we'll add data persistence so your TODOs survive even when you close the browser.