Personal Finance Tracker
Modern Financial Management Application
Project Overview
A modern, feature-rich personal finance management application built with the latest web technologies. Track expenses, set budgets, manage savings goals, and gain insights into your financial health with interactive charts and comprehensive analytics.
This client-side application demonstrates advanced React patterns, modern UI/UX design principles, and responsive layouts. All data is stored locally in the browser, ensuring complete privacy while providing a full-featured financial management experience.
Application Screenshots
Desktop Experience
Dashboard with financial overview, income vs expenses chart, and spending breakdown
Budget management with category-wise tracking and progress indicators
Mobile Experience
Mobile dashboard with bottom navigation
Mobile budget view with touch-optimized interface
Design Philosophy
- Clean, modern interface with teal accent color and vibrant chart palette
- Desktop sidebar navigation with mobile bottom tab navigation
- Dark/light theme support with system preference detection
- Inter & Manrope typography for optimal readability
- Fully responsive design optimized for all screen sizes
Key Features
Dashboard
- Customizable widget visibility and order
- Summary stats with trend indicators
- Income vs expenses area chart
- Spending by category donut chart
- Upcoming bills widget
Transactions
- Full CRUD with search and filters
- Tags and notes for categorization
- Expense splitting across categories
- Multiple account support
- CSV import/export
Financial Planning
- Category-based budget tracking
- Savings goals with progress bars
- 3/6/12 month financial forecasting
- What-if calculator for scenarios
- Net worth tracking with trends
Advanced Features
- Recurring transactions management
- Bill reminders with notifications
- Comprehensive reports and analytics
- Spending heatmap visualization
- JSON backup and restore
Technical Architecture
Frontend Stack
Core Technologies
- Next.js 16 App Router
- React 19 with hooks and context
- TypeScript 5 for type safety
- Recharts for data visualization
UI & Styling
- Tailwind CSS v4 with CSS variables
- shadcn/ui component library
- Radix UI primitives
- Lucide React icons
Data Architecture
State Management
- React Context for global state
- localStorage for persistence
- Optimistic UI updates
- Type-safe data models
Features
- Multi-currency support (USD, EUR, INR, AED)
- Sample data for easy exploration
- Browser notifications for reminders
- Dark/light theme with next-themes
Application Pages
| Page | Description |
|---|---|
| Dashboard | Overview with customizable widgets and quick actions |
| Transactions | Full transaction management with search and filters |
| Accounts | Multiple account types (savings, checking, credit, cash) |
| Budgets | Category-based budget tracking with progress bars |
| Goals | Savings goals with contribution tracking |
| Recurring | Automated recurring transactions management |
| Forecast | 3/6/12 month financial projections |
| Calculator | What-if scenarios and savings impact analysis |
| Net Worth | Assets vs liabilities with trend visualization |
| Reports | Comprehensive analytics with export options |
| Settings | Profile, currency, theme, and data management |