A modern, interactive personal finance visualization application that helps you understand where your money goes through beautiful, intuitive charts 📊
BudgetFlow is a sleek, web-based budget tracking tool designed to give you a crystal-clear picture of your financial flow. Transform your income and expense data into compelling visual representations that make spotting spending patterns a breeze! 🎯
| Feature | Description |
|---|---|
| 🔀 Sankey Flow | Visualize money flow from income → categories → expenses |
| 🍩 Donut Chart | See proportional expense breakdown with category colors |
| Red warnings when expenses exceed income |
- 💱 Multi-Currency — € $ £ CHF ¥ ₹ ₽ ₩
- 🔄 Live Updates — Edit in sidebar, see changes instantly
- 📊 Value/% Toggle — Switch between numbers and percentages
- 🌓 Dark/Light Mode — Comfortable viewing day or night
| Storage | Status |
|---|---|
| 💻 Local Storage | ✅ Auto-saved |
| ☁️ Supabase Cloud | ✅ Optional sync |
| 📤 JSON Export | ✅ Backup & share |
| 📥 JSON Import | ✅ Restore data |
BudgetFlow empowers you to:
- 💵 Track Income — Add multiple income sources with custom names
- 📁 Organize Expenses — Create color-coded categories with items
- 🔍 Visualize Flow — See exactly where every euro/dollar goes
- ⚖️ Monitor Balance — Instantly spot deficits or surpluses
- 💾 Export Data — Backup as JSON anytime
- 📂 Import Data — Restore or migrate your financial data
- 🟢 Node.js 18+
- 📦 npm or 🥟 bun
1️⃣ Clone the repository
git clone https://github.com/yourusername/budgetflow.git
cd budgetflow2️⃣ Install dependencies
npm install
# or
bun install3️⃣ Environment Setup ☁️ (Optional - for Supabase sync)
Create a .env file in the root directory:
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
npm run dev
# or
bun dev🌐 The app will be available at http://localhost:xxxx
npm run build
# or
bun run buildnpm run preview
# or
bun run preview| Technology | Purpose |
|---|---|
| ⚛️ React | UI framework |
| 🔷 TypeScript | Type safety |
| ⚡ Vite | Build tool & dev server |
| 🎨 Tailwind CSS | Styling |
| 🧩 shadcn/ui | UI components |
| 🔥 Supabase | Backend & auth (optional) |
| 🎯 Lucide React | Beautiful icons |
💵 1. Start with Income — Add your income sources first
📁 2. Create Categories — Group expenses logically (Housing, Living, Savings, etc.)
📝 3. Add Items — Break down each category into specific expenses
🔄 4. Switch Charts — 🔀 Flow chart for distributions | 🍩 Donut chart for proportions
💾 5. Export Regularly — Use "save as JSON" to backup your data
🚨 6. Watch for Red — Red indicators = spending more than you earn!
⚠️
MIT License 📄
✨ Feel free to use, modify, and distribute ✨
🚀 Built with modern web technologies for a smooth budgeting experience 💚
Made with ❤️ by Kinan