Click to expand
|
Smart Budget Planner is a modern personal finance dashboard built for people who want to take control of their money — clearly, visually, and confidently. Most people either guess where their money goes or rely on spreadsheets that become clunky fast. This project bridges that gap with a clean, interactive planning experience.
What problem does it solve?
|
|
| 🎯 Feature | 📋 Description | 💡 Why It Matters |
|---|---|---|
| 💵 Income Tracking | Log salary, freelance, and all income sources | Clear starting point for every budget |
| 📂 Expense Management | Add, edit, and categorize every transaction | Full visibility into spending habits |
| 🎛️ Budget Allocation | Set spending limits per category | Stay disciplined and avoid overspending |
| 🏦 Savings Goals | Track progress toward financial targets | Build long-term motivation and discipline |
| 📊 Spending Insights | See where money goes via visual breakdowns | Make smarter decisions backed by data |
| 🖥️ Visual Dashboard | All data in one clean, organized view | Reduces confusion and improves usability |
| ⚡ Quick Input | Fast transaction and budget entry flows | No friction — just capture and move on |
| 📱 Responsive UI | Works on desktop, tablet, and mobile | Budget anywhere, anytime |
📌 Replace the placeholder paths below with your actual screenshot files stored in the
assets/folder.
| Layer | Technology | Purpose |
|---|---|---|
| 🎨 Frontend | HTML · CSS · JavaScript | UI structure and interactions |
| 💅 Styling | Tailwind CSS / Bootstrap | Responsive and modern layouts |
| 📈 Charts | Chart.js / ApexCharts | Visualize spending and budgets |
| 💾 Storage | LocalStorage / Firebase | Persist user financial data |
| ☁️ Deployment | GitHub Pages / Vercel | Host and share the application |
┌─────────────────────────────────────────────────────────────────┐
│ USER JOURNEY │
└─────────────────────────────────────────────────────────────────┘
👤 User Opens App
│
▼
┌──────────────────┐ ┌──────────────────┐
│ 💵 Enter Income │────▶│ 📂 Set Category │
│ (Salary, etc.) │ │ Budget Limits │
└──────────────────┘ └────────┬─────────┘
│
▼
┌──────────────────┐
│ 🧾 Add Expenses │
│ (Daily spends) │
└────────┬─────────┘
│
┌───────────────────┼───────────────────┐
▼ ▼ ▼
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ 📊 Compare vs │ │ 💎 Track Savings │ │ ⚠️ Spot Budget │
│ Budget Limits │ │ Progress │ │ Overruns │
└────────┬────────┘ └────────┬─────────┘ └────────┬────────┘
└───────────────────┬┘────────────────────┘
▼
┌──────────────────────┐
│ 💡 Financial Insights │
│ & Summary Report │
└──────────────────────┘
╔══════════════════════════════════════════════════════════════╗
║ SMART BUDGET PLANNER ║
╠══════════════╦══════════════╦══════════════╦═════════════════╣
║ 💵 INCOME ║ 🎛️ BUDGET ║ 🧾 EXPENSE ║ 📊 REPORTS ║
║ MODULE ║ MODULE ║ MODULE ║ MODULE ║
╠══════════════╬══════════════╬══════════════╬═════════════════╣
║ Track all ║ Assign spend ║ Log daily & ║ Visual charts, ║
║ income ║ limits per ║ monthly ║ summaries & ║
║ sources ║ category ║ transactions ║ alerts ║
╠══════════════╩══════════════╩══════════════╩═════════════════╣
║ 💎 SAVINGS MODULE ║
║ Monitor goal completion & savings percentage ║
╚══════════════════════════════════════════════════════════════╝
📦 Smart-Budget-Planner/
│
├── 📁 assets/ # Screenshots & images
│ ├── 🖼️ dashboard.png
│ ├── 🖼️ expenses.png
│ └── 🖼️ budget-summary.png
│
├── 📁 css/
│ └── 🎨 style.css # Main stylesheet
│
├── 📁 js/
│ └── ⚡ script.js # Core logic & interactions
│
├── 📁 images/ # Additional visual assets
│
├── 🌐 index.html # App entry point
├── 📄 README.md # Project documentation
└── 📜 LICENSE # MIT LicenseMake sure you have the following installed:
Step 1 — Clone the repository
git clone https://github.com/RishvinReddy/Smart-Budget-Planner.gitStep 2 — Navigate into the folder
cd Smart-Budget-PlannerStep 3 — Run the project
🌐 Plain HTML/CSS/JS
# Simply open in your browser
open index.html
# OR double-click index.html in your file explorer⚙️ Node.js Project
npm install
npm start⚡ Vite / React
npm install
npm run dev STEP 1 STEP 2 STEP 3 STEP 4 STEP 5 STEP 6
│ │ │ │ │ │
▼ ▼ ▼ ▼ ▼ ▼
┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐
│ 💵 │ │ 📂 │ │ 🧾 │ │ 📊 │ │ 💎 │ │ 🔄 │
│ Enter │──────▶│ Setup │──────▶│ Log │──────▶│Review │──────▶│Monitor│──────▶│Adjust │
│Income │ │Budget │ │Spends │ │Totals │ │Savings│ │& Save │
└───────┘ └───────┘ └───────┘ └───────┘ └───────┘ └───────┘
| # | Action | Expected Result |
|---|---|---|
| 1️⃣ | Enter your monthly income | Sets the total available amount for planning |
| 2️⃣ | Add and name budget categories | Organizes your expenses into clear groups |
| 3️⃣ | Record each transaction as it happens | Every rupee is tracked and categorized |
| 4️⃣ | Review totals and category usage | See real-time balance and spending patterns |
| 5️⃣ | Monitor your savings goal progress | Stay on track toward financial milestones |
| 6️⃣ | Adjust categories and spending limits | Continuously improve your future budgets |
╔══════════════════════════════════════════════════════╗
║ 💰 MONTHLY BUDGET SNAPSHOT ║
╠══════════════════════════════════════════════════════╣
║ Monthly Income ₹50,000 ║
╠══════════════════════════════════════════════════════╣
║ 🏠 Housing ██████████░░░░ ₹15,000 (30%) ║
║ 🍱 Food ████████░░░░░░ ₹ 8,000 (16%) ║
║ 🚗 Transport ████░░░░░░░░░░ ₹ 4,000 (8%) ║
║ 📚 Education ██████░░░░░░░░ ₹ 6,000 (12%) ║
║ 🎬 Entertainment ███░░░░░░░░░░░ ₹ 3,000 (6%) ║
║ 💎 Savings ████████████░░ ₹10,000 (20%) ║
║ 📦 Others ████░░░░░░░░░░ ₹ 4,000 (8%) ║
╠══════════════════════════════════════════════════════╣
║ ✅ Remaining Balance ₹0 ║
╚══════════════════════════════════════════════════════╝
💡 The example follows a modified 50/30/20 rule — 50% needs, 30% wants, 20% savings — adapted for Indian living costs.
2024 Q1 ─────────────────────────────────────────────────── 2025+
│ │
● Basic budget planning ────────────── ✅ Done │
● Expense tracking ────────────── ✅ Done │
● Category management ────────────── ✅ Done │
● Clean dashboard design ────────────── ✅ Done │
○ Interactive charts ────────────── 🔄 In Dev │
○ Exportable PDF reports ────────────── 🔜 Planned │
○ Cloud-based storage ────────────── 🔜 Planned │
○ Recurring payment reminders ────────────── 🔜 Planned │
○ User authentication ────────────── 🔜 Planned │
○ AI budgeting assistant ────────────── 🔮 Future │
○ Multi-currency support ────────────── 🔮 Future │
○ Advanced analytics & trends ────────────── 🔮 Future │
| 🚀 Enhancement | 🎯 Impact |
|---|---|
| 🔐 User Authentication | Personal accounts with private, secure budgets |
| ☁️ Cloud Sync | Access your data seamlessly across all devices |
| 📄 PDF Export | Download clean monthly financial reports |
| 🤖 AI Recommendations | Get personalized smart spending suggestions |
| 🔁 Recurring Expenses | Auto-track subscriptions and monthly bills |
| 🌙 Dark Mode | Comfortable viewing during night-time sessions |
| 🌍 Multi-Currency | Support for international users and currencies |
| 📈 Advanced Analytics | Trend graphs and financial forecasting |
Contributions are what make open-source amazing. Every improvement, big or small, is welcome!
# 1. Fork the project on GitHub
# 2. Clone your forked repo
git clone https://github.com/YOUR_USERNAME/Smart-Budget-Planner.git
# 3. Create your feature branch
git checkout -b feature/AmazingFeature
# 4. Make your changes and commit
git add .
git commit -m "✨ Add: AmazingFeature that does X"
# 5. Push to your branch
git push origin feature/AmazingFeature
# 6. Open a Pull Request on GitHub 🎉- 🧹 Keep code clean and well-commented
- 🧪 Test all changes before submitting a PR
- 📝 Use meaningful commit messages
- 🙏 Be respectful and constructive in reviews
- 🐛 For bugs, open an issue before working on a fix
Found something broken? Got a great idea? We'd love to hear it!
- Check if the issue already exists
- If not, open a new issue
- Include steps to reproduce (for bugs) or a clear description (for features)
This project is licensed under the MIT License — free to use, modify, and distribute.
MIT License © 2024 Rishvin Reddy
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software to deal in the Software without restriction...
See the full LICENSE file for details.
- 💡 Inspired by the real need for smarter personal financial planning
- 📦 Built on the shoulders of the amazing open-source ecosystem
- 🎨 Chart.js, Tailwind CSS, and Firebase communities
- 🌟 Thanks to everyone who starred, forked, or contributed
👨💻 Rishvin Reddy
💬 Feel free to reach out for collaboration, feedback, or just a chat about fintech!
If Smart Budget Planner helped you, inspired you, or saved you from financial chaos — a ⭐ goes a long way!
It boosts visibility, motivates continued development, and helps others discover the project.