GitHub Copilot prompt to build a to-do app
A to-do app is a small build, which makes it the right size for a single Edits session in VS Code. This prompt hands GitHub Copilot the component boundaries, the localStorage key, and the edge cases up front, so you finish with a filterable task list that survives a page refresh.
Last updated
Open Copilot Edits and add src/App.tsx, src/components/TaskList.tsx, src/components/TaskItem.tsx, and src/lib/storage.ts to the working set. Build a React to-do app in TypeScript with three views, all, active, completed, driven by a single tasks array in App state. Each task needs id, title, done, and createdAt. Persist through src/lib/storage.ts using localStorage under the key todo.v1, and hydrate on first render so a page refresh keeps tasks. Handle these cases: adding a blank title is rejected with an inline message, toggling done updates the count in the footer, and clearing completed removes only done items. Keep components under 80 lines each and put no fetch calls anywhere. When the diff appears, I will review each file, accept, then run npm run dev and check the three filter views by hand.
Same task in other tools
Questions about this prompt
Why does the prompt name all four files for the working set?
Copilot Edits only modifies files you add to the working set. If src/lib/storage.ts is not listed, the localStorage calls usually get inlined into components, and you lose the boundary that makes swapping persistence easy later.
How do I move persistence from localStorage to an API afterwards?
Start a fresh Edits session scoped to src/lib/storage.ts only and ask for fetch-based internals behind the same function signatures. If the components need edits too, the boundary leaked and you should fix that first.
The footer count stopped matching the visible list. What went wrong?
Usually the filter state got duplicated inside TaskList instead of living in App. Re-prompt with the constraint that App owns tasks and the active filter, and children receive derived arrays as props.