Todo List
The classic — add, complete, delete, and it survives a refresh.
StarterWeb appProductivity2–4hAI-buildable 5/5no setup
Add on Enter, toggle complete on click, delete on right-click, and persist everything. Worth building properly once: the persistence and update patterns here carry into everything else you make.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 5
- Add a todo by typing and pressing Enter
- Clicking a todo toggles its completed state
- Right-clicking a todo deletes it
- Todos persist across page reloads
- Empty submissions are rejected
The interesting part
- Keeping persisted state in sync with every mutation path
Once it works
- Add filters for all/active/completed
- Add edit-in-place and reordering
Suggested stack
reacttypescripttailwinddnd-kitfuse.jslocalstorage