Intermediate project · Week 3
Expense Tracker Data Engine
Model transactions, calculate totals, group categories, and generate useful summaries.
The problem
Real applications live and die by how cleanly they model and transform collections of data — this project makes that the entire point.
User stories
- As a user, I want to add an expense with an amount and category, so I can track my spending.
- As a user, I want to see my total spend per category, so I understand where my money goes.
- As a user, I want to filter expenses by category, so I can focus on one area at a time.
Planning checklist
- Define the shape of a single expense record
- List every derived value the UI needs (totals, category breakdown, largest expense)
- Decide how categories are grouped and displayed
Suggested data structure
const expense = { id: "e1", amount: 42.5, category: "Food", date: "2026-01-04" };
const expenses = [expense];UI requirements
- A form to add a new expense
- A list of all expenses, filterable by category
- A summary panel showing total spend and per-category totals
Build milestones
Check off each milestone as you complete it — saved to this device.
…
0%Testing checklist
- totalSpend returns the correct sum for a known set of expenses
- groupByCategory correctly buckets a mixed-category list
- Filtering by category shows only matching expenses
Completion criteria
…
0%Progressive support
RequirementsPlanningStarterHintsReference Solution
Bonus features
- Add a date-range filter
- Add a simple bar chart of spend by category
- Persist expenses to localStorage