Budget App (React + Vite)

A personal budget tracker built with React and Vite. Track income and expenses by category, set monthly budget limits with alerts, and review a monthly summary — all stored locally in your browser (no account, no server).

Features

• Add income and expense transactions with category, date, and an optional note.
• Set a monthly budget limit per category, with a warning at 80% and 100% of the limit.
• Monthly summary: total income, total expenses, balance, and a category breakdown with progress bars.
• Search and filter transactions (by type, category, or note).
• Data persists in localStorage — nothing leaves your browser.

Getting started

npm install
npm run dev

Then open the local URL Vite prints (usually http://localhost:5173).

Scripts

• npm run dev — start the development server.
• npm run build — build for production (outputs to dist/).
• npm run preview — preview the production build locally.
• npm run test — run the Vitest unit tests (src/utils.test.js).

Project structure

src/
  components/
    TransactionForm.jsx   — add income/expense form
    TransactionList.jsx   — searchable, filterable transaction table
    MonthlySummary.jsx    — totals + spending-by-category breakdown
    BudgetManager.jsx     — set/remove per-category monthly limits
  utils.js                — formatting and date helpers (unit tested)
  App.jsx                 — app state, tabs, persistence
  index.css               — styling

Notes

This is a from-scratch React rebuild of an earlier command-line version of the same budget tracker, written in Python as part of a freeCodeCamp certification project.