Expense Tracker

What you'll learn

Design a data model for financial transactions

Build a form with validation for adding expenses

Calculate and display totals and category breakdowns

Create charts to visualize spending patterns

Implement filtering by date range and category

Export data to CSV for external use

Track income and expenses with categorization, totals, and filtering.

Requirements

Add transactions with amount, category, date
Categorize transactions (Food, Transport, etc.)
Show running balance
Filter by category
Show income vs expenses chart (optional)

Starter

"use client"

import { useState } from "react"

type Category = "food" | "transport" | "utilities" | "entertainment" | "income"

interface Transaction {
  id: string
  amount: number
  category: Category
  description: string
  date: string
}

export default function ExpenseTracker() {
  const [transactions, setTransactions] = useState<Transaction[]>([])

  // TODO: addTransaction
  // TODO: calculate totals
  // TODO: filter by category

  return (
    <div className="mx-auto max-w-2xl p-4">
      <h1 className="mb-6 text-3xl font-bold">Expense Tracker</h1>
      {/* Your implementation */}
    </div>
  )
}

Next Steps

Key Takeaways

Financial data models need amount (number), category (string), date, and optional notes fields

Form validation ensures data integrity before committing to state or storage

Category breakdowns are computed via reduce — grouping, summing, and sorting a transaction array

Chart libraries visualize spending by category with pie or bar charts for quick pattern recognition

CSV export joins rows with commas and columns with newlines for spreadsheet compatibility