Bolt prompt to build a to-do app
A to-do app is the fastest way to test how Bolt structures a small React project before you trust it with something bigger. This prompt pins down the data shape, the localStorage key, and the file layout up front, so what you get back is a working single-page app you can read end to end in a few minutes.
Last updated
Build a to-do app as a Vite + React project with Tailwind in this Bolt workspace. Single screen, three zones: an input row pinned to the top, a filter bar with All, Active, and Done, and the task list. Data model: task with id, title, due_date, done, created_at. Persist to localStorage under the key bolt_todos so the list survives a preview refresh. No backend for v1. Behaviors: - Enter in the input adds a task, an empty input does nothing and shows no alert. - Checkbox toggles done, completed rows get strikethrough and sink below open ones. - Double click a title to edit inline, Escape cancels, blur saves. - Each row has a small calendar button that reveals a native date input, picking a date sets due_date, clearing it removes the date, and the chosen date renders next to the title. - A live footer count in the form 3 of 8 open. - Clear completed asks for confirmation before deleting. Edge cases: duplicate titles allowed, titles trimmed of surrounding whitespace, a due_date earlier than today renders its date text in red on open tasks only, never on completed ones. If localStorage throws, fall back to in-memory state and show a small banner explaining that tasks will not persist. Empty state: the message Nothing here, add your first task, with focus already in the input. Styling: neutral grays, one accent color shared by the add button and the active filter, system font stack, content column capped at 640px and centered. File layout: App.tsx for composition, TaskItem.tsx for a row, useTasks.ts for all state and persistence, nothing else, so the whole app stays readable in Bolt's editor in one sitting. Acceptance: add three tasks, give one a due date of yesterday and confirm its date shows in red, complete one, refresh the preview, and confirm the due date, the filter counts, and the completed ordering all survive the reload.
Same task in other tools
Questions about this prompt
Why localStorage instead of a database for this prompt?
Bolt can wire up Supabase in one step, but a to-do list does not need it on day one. localStorage keeps the whole app inside the preview with zero setup, and the useTasks.ts hook isolates persistence, so swapping in a real backend later means changing one file.
Bolt put everything in one giant component. How do I fix that?
The prompt names the exact files it should produce: App.tsx, TaskItem.tsx, and useTasks.ts. If the output still lands in one file, reply with a follow-up like, split state into useTasks.ts and the row into TaskItem.tsx with no behavior changes, and it will refactor without touching functionality.
My tasks vanish every time the preview reloads. What went wrong?
Usually the write side works but the read side never hydrates. Check that useTasks.ts reads the bolt_todos key inside an effect on mount. The other common cause is the preview running in a context where localStorage throws, which is exactly why the prompt asks for the in-memory fallback banner.