FinancialFlow
FinancialFlow brings income, expenses, category budgets, and savings goals into one personal finance dashboard. Transactions update balances and monthly summaries, while interactive line, bar, doughnut, and radar charts reveal spending patterns and financial progress. Built with Next.js and TypeScript, it saves data in browser local storage so users can return to their records without creating an account.
Personal finance is easier to understand when transactions, budgets, and goals share the same view. FinancialFlow brings these pieces together: users record income and expenses, see their balance and monthly summaries update, and follow the progress of their savings goals.
The application uses Next.js and TypeScript with reusable interface components for transactions, category budgets, and goal tracking. React hooks manage balances, income, expenses, transactions, goals, and budget categories, keeping the interface in sync as users add or change their records.
Chart.js turns those records into four complementary views. Line charts compare income and expenses over time, bar charts break spending down by category, doughnut charts show the distribution of savings, expenses, and debt, and radar charts present financial-health criteria. A financial health score updates from spending, savings, and debt ratios alongside the charts.
Data is loaded from browser local storage when the app opens and saved when records change, retaining transactions, budgets, and goals across sessions without requiring an account. Tailwind CSS and CSS modules provide the responsive interface, while Framer Motion adds transitions. Account authentication, cloud synchronization, and predictive features are future enhancements described in the project roadmap.
- Income and expense transactions update balances and monthly summaries as records change
- Category budgets compare actual spending with user-defined limits
- Savings goals show progress through visual trackers
- Interactive line, bar, doughnut, and radar charts with a dynamically updated financial health score
- Browser local storage retains transactions, budgets, and goals across sessions without an account
- Next.js
- TypeScript
- React
- Chart.js
- Framer Motion
- Tailwind CSS
- CSS Modules
- Lucide React
- localStorage