Project 8: Budget Tracker with Charts

📋 Project Brief

Build a personal finance dashboard that transforms raw transaction data into insightful visual charts. You will implement a full CRUD system with LocalStorage persistence, integrate a charting library (Chart.js or D3.js), and perform complex data aggregation — grouping expenses by category, calculating trends, and generating percentage breakdowns.

🎯 Learning Objectives

• Build a complete CRUD interface with form validation
• Integrate and customize a charting library for data visualization
• Perform complex array operations: groupBy, reduce, sort, and percentage calculations
• Implement CSV import/export using the File and Blob APIs
• Design a "Privacy Mode" that obscures sensitive financial data

✅ Feature Requirements

Feature 1: Interactive Charts

Acceptance Criteria:

• A pie chart shows expense distribution by category (Food, Transport, Entertainment, etc.)
• A line chart shows spending trends over the last 30 days
• Hovering over a chart segment shows a tooltip with the exact amount and percentage
• Charts must update in real-time when transactions are added, edited, or deleted
• Charts must be responsive and readable on mobile screens

Feature 2: CSV Import/Export

Acceptance Criteria:

• Export: A "Download CSV" button generates a file with columns: Date, Description, Category, Amount
• Import: Users can upload a CSV file that parses and adds transactions to the app
• The import must validate data: skip rows with missing amounts, flag invalid dates
• Show a preview of imported data before confirming the import
• Handle encoding issues (UTF-8 BOM)

Feature 3: Category Budgeting

Acceptance Criteria:

• Users can set a monthly budget for each category (e.g., Food: $500)
• A progress bar shows current spending vs. budget for each category
• The bar turns yellow at 80% and red at 100%
• A notification appears when a category budget is exceeded

Feature 4: Recursive Totals

Acceptance Criteria:

• Auto-calculate: daily average, weekly total, monthly total, and yearly projection
• All calculations update when any transaction is modified
• Show "vs. last month" percentage change with green (down) / red (up) indicators

Feature 5: Privacy Toggle ("Ghost Mode")

Acceptance Criteria:

• A toggle button blurs all currency amounts across the entire app
• Charts should show relative proportions but hide actual numbers
• The toggle state persists in the session (not across refreshes for security)
• Keyboard shortcut: Ctrl+Shift+H to toggle

📊 Data Model

Field	Type	Required	Validation
id	UUID	Yes	Auto-generated
date	Date	Yes	Cannot be in the future
description	String	Yes	1-100 characters
category	Enum	Yes	Must be from predefined list
amount	Number	Yes	Positive number, max 2 decimal places
type	Enum	Yes	"income" or "expense"

🧪 Testing Checklist

• Unit test all aggregation functions (daily average, monthly total, percentage change)
• Unit test CSV parsing with edge cases (commas in descriptions, empty rows)
• Integration test: adding a transaction updates the chart
• Integration test: import CSV → verify transactions appear in list
• A11y: charts must have text alternatives for screen readers

🚀 Stretch Goals

• Add recurring transactions (e.g., monthly rent auto-added)
• Implement a "Savings Goal" tracker with a target date
• Add multi-currency support with live exchange rates
• Create a year-end financial summary report