Build a personal goal tracker with Claude Code and backups

A useful personal goal tracker should answer three questions: what am I pursuing, what is the next step, and will the data remain when I return? Claude Code can help build a small prototype, which you can verify before adding features.

This guide targets a single-user web app with manual backup. Completion time depends on the environment and debugging; “one session” is not a guarantee.

🧰 1. Choose where and how to run it

Claude Code supports terminal, IDE extensions, desktop and web surfaces, with account requirements depending on access. Do not assume every option is free or requires no setup. Official overview.

Work in a dedicated project folder. For this exercise, use plain HTML, CSS and JavaScript to reduce dependencies. Ask Claude Code to explain local web-server startup and install only what your environment needs.

🎯 2. Define the first version

Each goal has an id, title, next action, due date and completion state. For example: “Finish the product introduction,” with “write an outline” as the next action and a date you choose.

Start with add, edit, complete, reopen and undoable delete. Provide filters for all, active, completed and overdue. A goal is overdue when it is incomplete and its due date precedes today's local calendar date.

Leave charts, accounts and automatic reminders for later. First establish one reliable usage flow.

💬 3. A build prompt

Build a personal goal tracker in this project folder
using plain HTML/CSS/JavaScript, with no CDN libraries.
First describe the files and local-server startup.

Each goal: id, title, nextAction, dueDate, completed.
Support add/edit/complete/reopen/delete with undo.
Reject empty titles. Render user input as text.
Filter all/active/completed/overdue.
Store due dates as local-calendar YYYY-MM-DD values.
Persist through localStorage and report save failures.
Export/import JSON with schemaVersion.
Before import: validate, preview the goal count,
allow cancellation or replacement after backup export.
Support keyboard navigation and small screens.
Do not add login, payments or external services.
Report created files and checks for each feature.

Ask the tool to distinguish completed checks from untested behavior. Written code alone does not establish a verified interface.

💾 4. Understand where data lives

localStorage belongs to the page's origin and persists across browser sessions. Private-session data is cleared when the final private tab closes, and behavior for file: URLs is not guaranteed. MDN documentation.

This design has no synchronization mechanism. Opening the same website on a phone does not import goals from a laptop. Hosting the app does not automatically add synchronization or accounts.

Export a backup before major changes. Keep the file somewhere retrievable; a copy outside browser storage is useful if that storage is lost.

🧪 5. Test a realistic usage cycle

Create three sample goals: due yesterday, due today and undated. Complete yesterday's goal: it should leave the overdue filter. Reopen it: it should return.

Then test an empty title, a changed next action, page reload, deletion and undo. Navigate buttons with Tab and inspect a small-screen layout.

Finally, export JSON, attempt to import an invalid file without replacing existing data, then restore a valid backup. These are checks for the reader to perform, not a claim that CYAN PRO has built and tested a particular app.

✅ 6. Improve from observed failures

For each bug, describe the action, expected outcome and actual result. For example: “A completed goal still appears as overdue after reloading.”

Fix one issue at a time, rerun the same case and preserve the working version. A worthwhile tracker helps you resume work and retain data, beyond simply looking good in a screenshot.