Personal Budget Tracker Web App

Project roadmap

1. 01

   Set up the project

   ~0.5h

   Create a project with npm create vite@latest using the vanilla-ts template, and turn on strict mode in tsconfig.json. Replace the sample page with a layout: a summary area, a form, a filter, a list and a chart area. Done when: the page runs with npm run dev and shows the empty layout.

2. 02

   Define the data types

   ~1h

   Define a Transaction interface (id, type as the union "income" | "expense", amount in cents as a number, category, date as YYYY-MM-DD and note) and the categories as a const array with a derived type, with separate lists for income and expenses. Write a function that checks unknown data (for example loaded from storage) is a valid Transaction. Done when: the types compile, and the check function rejects invalid objects.

3. 03

   Build the form

   ~1.5h

   Build a form to add a transaction: type, amount (converted from text such as 12.50 to cents, and greater than 0), category (options changing with the type), date (defaulting to today) and note. Show errors next to fields. Allow editing and deleting transactions from the list. Done when: transactions can be added, edited and deleted, and invalid input shows errors.

4. 04

   Calculate summaries

   ~1.5h

   Write pure functions that, for a chosen month, compute total income, total expenses, the balance and the total per expense category (with reduce), and show them with amounts formatted by Intl.NumberFormat. Add a month selector and show the transactions for that month, newest first. Done when: the summary numbers match the listed transactions for each month.

5. 05

   Save to localStorage

   ~1h

   Save all transactions to localStorage as JSON after every change and load them at startup, keeping only items that pass the validity check and warning if some were dropped. Add export and import of the data as a JSON file, so it can be backed up. Done when: transactions survive reloading the page, and exporting then importing restores them.

6. 06

   Draw a spending chart

   ~1.5h

   Draw a bar chart of spending per category for the chosen month on a canvas element, with labels and amounts, scaled so the largest bar fits, and redrawn when the data or month changes. Make it readable in light and dark mode. Done when: the chart matches the category totals.

7. 07

   Test it

   ~1h

   Add Vitest and test the pure functions: amount parsing, the validity check, monthly totals, category totals and filtering by month, including months with no transactions. Done when: npm test passes.

Resources

• DocsTypeScript handbook
• DocsVite: getting started
• DocsMDN: Canvas API tutorial
• DocsMDN: Window.localStorage
• DocsVitest: getting started