Build a Todo app

Try adding, editing, and completing a todo. Then build this application in ten steps, with short pieces of code and a working preview as soon as the form exists. Each chapter keeps complete copyable files and a diff of what changed.

Begin with the Quick Start setupfor package versions and a working TypeScript project. Keep the files from each chapter and replace or add the ones shown in the next.

You should be comfortable reading TypeScript and Effect generators. Chapter two introduces the service declarations and Layers used to supply application state. The examples come from examples/todomvc; early previews reveal only the pieces introduced so far.

Build it step by step

1. Model the domain — Define valid Todo values and keep list transformations pure.
2. Own application state — Name the list, draft, and Todo factory that application actions need.
3. Create a Todo — Coordinate one use case in the application layer.
4. Render the application shell — Connect native input events to application Effects.
5. Render keyed Todo items — Preserve item identity while editing, toggling, and deleting.
6. Derive the footer — Compute counts and conditional controls from the model.
7. Route the filter — Treat the URL as an implementation of application filter state.
8. Persist the list — Observe application state from a local-storage adapter.
9. Assemble the application — Join presentation, infrastructure, and the DOM renderer in one composition root.
10. Prove the application works — Test domain identity, application transitions, and real browser events using the code you built.

This tutorial stays client-only. The counter's server rendering lesson continues into state restoration and hydration.