CC
0 XP
0

Chapter 2: Build Core Todo

Project Planning

concept5 min

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."

💡Info

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:

  1. Data model -- Define the Todo type first so everything else has a contract to follow
  2. Layout -- Set up the page structure so components have a home
  3. Display todos -- Show a list before worrying about creating items
  4. Add todos -- Basic creation with a form
  5. Complete todos -- Toggle done/not-done
  6. Delete todos -- Remove items
  7. Edit todos -- Modify existing items
  8. Categories -- Group todos by type
  9. Category filter -- Filter the list by category
  10. Due dates -- Add time-based tracking
  11. Priorities -- Urgency levels
  12. Search -- Find specific todos
  13. Local storage -- Persist data across sessions
  14. Sorting -- Order the list different ways
  15. 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:

  1. 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.

  2. 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.

Tip

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.

💡Info

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.