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.

Build it step by step

1. Model the domain — Define valid Todo values and keep list transformations pure.
2. Own application state — Expose reactive capabilities instead of a browser-shaped controller.
3. Create a Todo — Coordinate one use case in the application layer.
4. Render the application shell — Connect native form 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 form events using the code you built.

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