---

🌟 Overview

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.

---

✨ Features at a Glance

🏠 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

---

🛠️ Tech Stack

┌──────────────────────────────────────────────────────────┐
│ 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 │
└──────────────────────────────────────────────────────────┘

---

🎨 Design System

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.

---

🚀 Quick Start

# Clone the repository
git clone https://github.com/itxashancode/Vision2Code.git
# Navigate into the projectcd 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

---

📁 Project Structure

Vision2Code/
│
├── index.html # Main app shell & layout
├── index.css # Custom styles & glassmorphism effects
├── index.js # App logic, CRUD, charts & interactivity
└── README.md # Project documentation

---

🎮 How to Use

1. 📊 Dashboard — View your financial health at a glance
2. 💳 Transactions — Log income & expenses with categories
3. 📉 Budgets — Set spending limits and track category usage
4. 🎯 Goals — Create savings targets and celebrate milestones
5. 📈 Reports — Analyze trends with interactive ApexCharts
6. ⚙️ Settings — Configure currency, alerts & preferences

---

👥 Meet the Team

👨‍💻	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

---

🔮 Roadmap

• 💾 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

---

🤝 Contributing

All contributions are welcome!

1. 🍴 Fork this repo
2. 🌿 Create your branch: git checkout -b feature/amazing-feature
3. 💾 Commit: git commit -m "Add: amazing feature"
4. 📤 Push: git push origin feature/amazing-feature
5. 🔁 Open a Pull Request

---

📄 License

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