Master your money with ease. Visualize your spending, plan your savings, and build better financial habits.
FinanceFlow is a modern, interactive budgeting tool designed specifically for students and young professionals. It takes the guesswork out of financial planning by providing a "playground" where you can experiment with different income levels and spending allocations in real-time.
- 💰 Dynamic Income Tracking: Input your monthly earnings and see how every dollar counts.
- 🎚️ Interactive Allocations: Use intuitive sliders to split your budget into Needs, Wants, and Savings.
- 📊 Real-time Visualization: Watch your budget transform instantly with dynamic Pie Charts powered by Recharts.
- 📈 Savings Projection: Visualize your long-term wealth growth with detailed 6-month and 1-year projections.
- 💾 Local Persistence: Your data stays with you! All settings are saved automatically to your browser's local storage.
- 📱 Fully Responsive: Access your budget playground from any device with a clean, mobile-first design.
- Framework: React 19
- Build Tool: Vite
- Icons: Lucide React
- Charts: Recharts
- Styling: Tailwind CSS
- Language: TypeScript
FinanceFlow encourages the popular 50/30/20 budgeting strategy:
- 50% Needs: Essential costs like rent, groceries, and utilities.
- 30% Wants: Non-essentials like dining out, hobbies, and entertainment.
- 20% Savings: Investing in your future, emergency funds, and debt repayment.
Adjust the sliders to see how your unique lifestyle fits this proven model!
- Node.js (Latest LTS recommended)
-
Clone or Download the project
git clone <your-repo-url> cd financeflow
-
Install Dependencies
npm install
-
Set up Environment Create a
.env.localfile and add any necessary keys (e.g., Gemini API key if applicable). -
Run Development Server
npm run dev
-
Build for Production
npm run build
Your financial data is private. FinanceFlow processes and stores all information locally in your browser. No data is sent to external servers unless explicitly configured by you.