Medium•Web Development

Expense Tracker

Build a production-grade, frontend-only Personal Finance Dashboard using Next.js App Router and Tailwind CSS. Features a real-time balance overview, monthly bar chart, category donut chart, per-month KPI strip, transaction management with search and filters, and CSV export — all persisted to localStorage with no backend.

📚Scroll down to see free videos & courses ↓

View on GitHub Live Demo

What You Will Build

A fintech-inspired personal finance tracker with a dark dashboard UI. Users can add income and expense transactions with category and date, track total balance, income and expenses in real time, visualize monthly spending trends via a bar chart, see a category spending breakdown using a donut chart with progress bars, view 6 this-month KPIs (income, spending, avg expense, top category, savings rate), search and filter transactions, export all data as a CSV, and have all data persist across page refreshes via localStorage.

Concepts You'll Learn

Next.js App Router with file-based routing and layout composition
Global state management with React Context API and useReducer-style patterns
Persisting state to localStorage with safe hydration using useEffect
Data visualization with Recharts — BarChart and PieChart (Donut)
Deriving computed values (balance, stats, category breakdown) with useMemo
Building reusable component library (BalanceCard, TransactionItem, FilterTabs, SearchBar, MonthStatsStrip, CategoryBreakdown)
Modal design with keyboard accessibility (Escape to close, auto-focus)
CSV generation and browser download without a backend
Inline style-driven theming for guaranteed dark mode appearance
Responsive dashboard layout — sticky sidebar on desktop, FAB on mobile
TypeScript interfaces for typed transaction data and context values
Form validation with inline error feedback and controlled inputs