Chapter 2: Build Core Todo
Project Planning
Project Planning
Before jumping into code, let's use Claude Code as a planning partner. One of its underused strengths is helping you think through requirements before writing anything.
Having the planning conversation
Start a conversation with Claude Code about what we want to build:
"I want to build a todo app with the following features: add, complete, delete, and edit todos. I also want categories, due dates, priority levels, search, sorting, and local storage persistence. Help me plan the order we should build these features."
This is a great use of Claude Code that many people skip. Before you build, have Claude Code help you break the problem down. It's faster to fix a plan than to fix code.
The build order
Claude Code will likely suggest something close to this order, and for good reason:
- Data model -- Define the Todo type first so everything else has a contract to follow
- Layout -- Set up the page structure so components have a home
- Display todos -- Show a list before worrying about creating items
- Add todos -- Basic creation with a form
- Complete todos -- Toggle done/not-done
- Delete todos -- Remove items
- Edit todos -- Modify existing items
- Categories -- Group todos by type
- Category filter -- Filter the list by category
- Due dates -- Add time-based tracking
- Priorities -- Urgency levels
- Search -- Find specific todos
- Local storage -- Persist data across sessions
- Sorting -- Order the list different ways
- Empty states -- Polish the experience
Why this order matters
Ask Claude Code to explain the reasoning:
"Why should we build the display before the add form? And why does local storage come near the end?"
Claude Code will explain two key principles:
-
Build the read path first. If you can display a todo, you can verify every other feature visually as you add it. Start with hardcoded sample data, then swap in real data later.
-
Add persistence last. Building with in-memory state first keeps the feedback loop fast. Once all features work, hooking up localStorage is a single focused change.
Ask "why" whenever Claude Code suggests an approach. Understanding the reasoning makes you a better developer, not just someone who follows AI instructions.
Feature scope check
Let's also make sure we're not overbuilding. Ask:
"For a beginner-friendly todo app, are there any features in our list that we should simplify or defer? We want to keep each feature buildable in about 5 minutes with your help."
Claude Code might suggest keeping categories as a simple enum rather than user-created categories, or using native date inputs instead of a full date picker library. These are smart tradeoffs for a learning project.
The mental model
Here's the key insight: Claude Code is most effective when you give it a clear, scoped task. Instead of saying "build me a todo app," we're going to give it one feature at a time. Each section in this chapter is one prompt-and-build cycle.
This feature-by-feature approach is a technique called prompt chaining — breaking a complex task into a sequence of focused prompts where each one builds on the previous result. Instead of "build me a todo app" (one massive prompt), we'll chain 15 focused prompts. Prompt chaining produces dramatically better code because Claude focuses on one thing at a time. This is the #1 technique professional Claude Code users rely on.
This is how professional developers use Claude Code in production -- small, focused tasks with clear acceptance criteria.