BudgetMate is a sleek, modern personal finance management web application built for the APTECH Vision 2025 batch. It empowers users to track income, manage expenses, set budgets, define savings goals, and gain deep financial insights — all through a beautifully crafted glassmorphism UI with real-time interactive charts.
| 🏠 Dashboard | 💳 Transactions | 📊 Budgets |
|---|---|---|
| Financial snapshot cards | Add / filter / search | Progress bars per category |
| Animated fade-up effects | Income & expense CRUD | Donut chart visualization |
| Real-time data refresh | Date-range filtering | Editable category system |
| 🎯 Goals | 📈 Analytics | ⚙️ Settings |
|---|---|---|
| Target amounts & deadlines | Income vs. expense charts | Multi-currency support |
| Visual progress tracking | Savings trend analysis | Notification preferences |
| Milestone celebrations | AI-powered insights | Profile management |
┌──────────────────────────────────────────────────────────┐
│ FRONTEND LAYER │
│ HTML5 · CSS3 · JavaScript ES6+ │
├──────────────────────────────────────────────────────────┤
│ UI FRAMEWORKS │
│ Bootstrap 5 · Tailwind CSS │
├──────────────────────────────────────────────────────────┤
│ DATA VISUALIZATION │
│ ApexCharts.js (Donut · Line · Bar · Area Charts) │
├──────────────────────────────────────────────────────────┤
│ DESIGN SYSTEM │
│ Glassmorphism · Font Awesome 6 · Space Grotesk │
└──────────────────────────────────────────────────────────┘
| Element | Value |
|---|---|
| 🔵 Primary Color | #29ABE2 (Sky Blue) |
| 🤍 Background | #F0F8FF (Soft Blue-White) |
| 🪟 Glass Effect | rgba(255,255,255,0.1) + backdrop-blur |
| 🖋️ Display Font | Space Grotesk |
| 📝 Body Font | Inter |
Design Philosophy: Glassmorphism cards, micro-interaction hover states, and mobile-first responsive layouts that feel premium on every device.
# Clone the repository
git clone https://github.com/itxashancode/Vision2Code.git
# Navigate into the project
cd Vision2Code
# Open directly in browser
open index.html💡 Recommended: Use the Live Server extension in VS Code for the best development experience. Right-click
index.html→ Open with Live Server
Vision2Code/
│
├── index.html # Main app shell & layout
├── index.css # Custom styles & glassmorphism effects
├── index.js # App logic, CRUD, charts & interactivity
└── README.md # Project documentation
- 📊 Dashboard — View your financial health at a glance
- 💳 Transactions — Log income & expenses with categories
- 📉 Budgets — Set spending limits and track category usage
- 🎯 Goals — Create savings targets and celebrate milestones
- 📈 Reports — Analyze trends with interactive ApexCharts
- ⚙️ Settings — Configure currency, alerts & preferences
| 👨💻 | Name | Role |
|---|---|---|
| 🎨 | Ashan Abdur Rehman | Frontend UI Developer — Layout, glassmorphism, header, sidebar & cards |
| ⚡ | Umiyon | JavaScript Developer — Tab switching, modals, CRUD & search/filter logic |
| 📊 | Krishn Kumar | Data Visualization Lead — ApexCharts integration, analytics & reports UI |
- 💾 Local storage / backend data persistence
- 🔐 Multi-user authentication
- 📤 CSV / PDF export for reports
- 🌙 Dark mode toggle
- 🔁 Recurring transaction automation
- 📱 PWA / React Native mobile version
- 🤖 Advanced AI financial recommendations
All contributions are welcome!
- 🍴 Fork this repo
- 🌿 Create your branch:
git checkout -b feature/amazing-feature - 💾 Commit:
git commit -m "Add: amazing feature" - 📤 Push:
git push origin feature/amazing-feature - 🔁 Open a Pull Request
Developed for educational purposes as part of the APTECH Vision 2025 program.
"Track smart, save better, and visualize your financial future with clarity and confidence."
⭐ If this project helped you, give it a star! ⭐
Built with ❤️ by Team Vision 2025 — Ashan · Umiyon · Krishn