A modern, interactive personal finance management web application that helps users track income, expenses, budgets, savings goals, and gain financial insights — all in one intuitive interface. Developed as part of the Vision 2025 batch project using HTML, CSS, Bootstrap, Tailwind, and JavaScript.
- Financial Snapshot: Total income, expenses, savings, and remaining budget
- Animated Cards: Smooth fade-up effects with intuitive icons
- Real-time Updates: Instant data refresh on new transactions
- Add Transactions: Modal and inline forms for income/expense entries
- Smart Filtering: Filter by type, category, or date range
- Global Search: Quick transaction lookup across all records
- Progress Visualization: Category-wise spending progress bars
- Donut Charts: Income vs. expense ratio visualization
- Category Management: Editable and expandable category system
- Goal Setting: Define target amounts and deadlines
- Progress Tracking: Visual indicators for goal completion
- Milestone Celebration: Achievements for financial targets
- Comparative Charts: Income vs. Expenses over time
- Savings Growth: Track savings progress with trend analysis
- AI Insights: Smart suggestions for better financial habits
- Currency Support: Multiple currency options (USD, PKR, etc.)
- Notification Preferences: Customizable alert settings
- Profile Management: Personalize your financial dashboard
| Category | Technologies |
|---|---|
| Frontend | HTML5, CSS3, JavaScript (ES6+) |
| Frameworks | Bootstrap 5, Tailwind CSS |
| Charts & Visualization | ApexCharts.js |
| Icons | Font Awesome 6 |
| Design Elements | Glassmorphism, CSS Animations, Responsive Grid |
- A modern web browser (Chrome, Firefox, Safari, Edge)
- Optional: VS Code with Live Server extension for development
# Clone the repository
https://github.com/Ashan-aptech/Vision2Code.gitOption 1: Directly open index.html in your browser
Option 2 (Recommended for development):
- Install VS Code Live Server extension
- Right-click
index.html→ Open with Live Server
- Dashboard: Get an overview of your financial health
- Transactions: Add new income/expenses and view history
- Budgets: Set spending limits and track category progress
- Goals: Create savings targets and monitor achievements
- Reports: Analyze spending patterns with interactive charts
- Settings: Customize currency, notifications, and preferences
| Team Member | Role | Responsibilities |
|---|---|---|
| Ashan Abdur Rehman | Frontend UI Developer | Designed responsive layout, implemented glassmorphism theme, built header, sidebar, and card components |
| Umiyon | JavaScript & Logic Developer | Implemented tab switching, modal forms, transaction CRUD operations, and global search/filtering |
| Krishn Kumar | Data Visualization & Reports Lead | Integrated ApexCharts for analytics, handled chart configurations, insights section, and reports UI |
- Primary:
#29ABE2(Blue) - Background:
#F0F8FF(Soft white-blue) - Glass Effect:
rgba(255, 255, 255, 0.1)with backdrop blur
- Headlines: Space Grotesk (Modern, geometric)
- Body Text: Inter (Clean, readable)
- Glassmorphism: Frosted glass effect cards
- Micro-interactions: Smooth hover animations and transitions
- Mobile-first: Responsive design across all devices
- Data Persistence: Local storage or backend integration
- User Authentication: Multi-user support with profiles
- Data Export: CSV/PDF reports generation
- Advanced Analytics: AI-powered financial recommendations
- Dark Mode: Theme switching capability
- Mobile App: React Native or PWA version
- Recurring Transactions: Automated expense tracking
We welcome contributions! Please feel free to submit pull requests or open issues for bugs and feature requests.
This project is developed for educational purposes as part of the APTECH Vision 2025 program.
The Budget Tracker (Vision 2025) represents a comprehensive personal finance solution that combines modern UI design, interactive data visualization, and robust JavaScript functionality. Built collaboratively by a dedicated student team, this project demonstrates practical web development skills while solving real-world financial tracking needs.
"Track smart, save better, and visualize your financial future with clarity and confidence."