Skip to content

arjunj08/fintrack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

💰 FinTrack - Personal Finance Dashboard

A modern, elegant personal finance management dashboard with real-time analytics, budget tracking, and smart insights.

Version License Status Made with


🎬 Live Application Screenshots

Dashboard Overview

Your financial snapshot at a glance with key metrics, charts, and recent activity.

Features shown:

  • 💰 Total Balance: ₹1,24,850 (real-time)
  • 📈 Monthly Income: ₹42,000
  • 📉 Monthly Spend: ₹18,340
  • 💎 Savings Rate: 56.3%
  • 📊 Income vs Expenses Chart: 6-month trend visualization
  • 🍰 Category Breakdown: Donut chart of spending distribution

Transactions Management

Complete transaction history with powerful filtering and instant additions.

Features shown:

  • Tab Filters: All / Income / Expense
  • 💼 Transaction Items:
    • Salary — TechCorp: +₹42,000
    • Rent Payment: -₹8,500
    • Grocery: -₹1,240
    • Netflix + Spotify: -₹899
    • Freelance: +₹5,000
  • 🎨 Color Coding: Green for income, Red for expenses
  • 📅 Date Display: Each transaction dated (01 Jul, 02 Jul, etc.)

✨ Features at a Glance

✨ Features at a Glance

Feature Description Status
📊 Dashboard Real-time financial overview ✅ Active
💳 Transaction Management Add, view, and filter transactions ✅ Active
💰 Budget Tracking Set and monitor spending limits ✅ Active
🎯 Financial Goals Track savings goals with progress ✅ Active
📈 Charts Income vs Expense + Category breakdown ✅ Active
🎨 Dark Theme Modern dark UI with neon green accent ✅ Active
📱 Responsive Design Mobile, tablet, desktop compatible ✅ Active
Lightweight Single HTML file, no dependencies needed ✅ Active
🚀 Fast & Instant No build process, ready to use ✅ Active


🚀 Quick Start

Option 1: View Live Website ✨

Open the live dashboard in your browser:

https://arjunj08.github.io/fintrack

No installation needed! Works on all modern browsers.

Option 2: Local Server (For Development)

# Clone the repository
git clone https://github.com/arjunj08/fintrack.git
cd fintrack

# Start a local server
python3 -m http.server 8000
# or: npx http-server

# Open in browser: http://localhost:8000

First-Time User Guide

  1. View Dashboard - See your financial snapshot with key stats
  2. Add Transactions - Click "+ Add" to record income/expenses
  3. Filter Transactions - Use tabs to filter All/Income/Expense
  4. Check Budget - See spending limits and progress bars
  5. View Goals - Track your financial goals
  6. Responsive Design - Works on mobile, tablet, and desktop

💻 Features Explained

📊 Dashboard

Your financial command center showing:

  • Total Balance: Current account balance
  • Monthly Income: Total income this month
  • Monthly Spend: Total expenses this month
  • Savings Rate: Percentage of income saved
  • 6-Month Trend: Income vs expense chart
  • Category Breakdown: Where your money goes
  • Recent Transactions: Last 5 transactions
  • Budget Status: Progress towards limits

💳 Transaction Management

Add Transactions Instantly

  • Description (e.g., "Salary", "Netflix", "Rent")
  • Amount
  • Type (Income/Expense)
  • Category (9+ options)
  • Date
  • Automatic balance updates

View & Filter Transactions

  • Complete transaction history
  • Filter by: Income Only / Expenses Only / All
  • Color-coded tags
  • Icon-based categories
  • Timestamp tracking

Categories Available

  • 💼 Salary
  • 🏠 Housing
  • 🛒 Groceries
  • 🍕 Food & Dining
  • 📱 Subscriptions
  • 🎮 Entertainment
  • 📚 Education
  • 💰 Freelance Income
  • 🚗 Transport

💰 Budget Tracking

Smart Budget Management

  • Set monthly limits per category
  • Visual progress bars
  • Color-coded status:
    • 🟢 Green: Under budget (0-70%)
    • 🟡 Yellow: Caution (70-90%)
    • 🔴 Red: Over budget (90%+)
  • One-click budget adjustments

Pre-configured Categories

  • Housing (₹10,000)
  • Groceries (₹3,000)
  • Food & Dining (₹4,000)
  • Subscriptions (₹1,500)
  • Entertainment (₹2,000)
  • Education (₹3,000)

🎯 Financial Goals

Track What Matters

  • Emergency Fund (Target: ₹5,00,000)
  • Vacation Fund (Target: ₹1,00,000)
  • Home Down Payment (Target: ₹15,00,000)
  • Car Purchase (Target: ₹8,00,000)

Progress Visualization

  • Individual goal progress bars
  • Total savings overview
  • Overall progress percentage
  • Goal achievement milestones

📈 Advanced Analytics

Comprehensive Analysis Tools

  • 12-month income/expense comparison
  • Category-wise spending breakdown
  • Monthly trend statistics
  • Average metrics (income, spend, savings)
  • Highest spending month identification

Smart Alerts System

  • Budget threshold warnings (85%+)
  • Spending trend notifications
  • Goal progress reminders
  • Achievement celebrations
  • Custom alert management

💡 Smart Insights

Financial Health Scoring

  • Overall score (0-100)
  • Based on savings rate
  • Spending patterns
  • Budget adherence

Personalized Recommendations

  • Tip #1: Spending optimization
  • Tip #2: Goal achievement guidance
  • Tip #3: Subscription audit

Savings Opportunities

  • Dining optimization: Save ₹630/month
  • Subscription reduction: Save ₹200/month
  • Rent negotiation: Save ₹500/month

📥 Reports & Export

Multiple Export Formats

  • CSV for spreadsheets
  • PDF for archiving
  • Excel for detailed analysis

Customizable Report Contents

  • ✓ All transactions
  • ✓ Expense summaries
  • ✓ Monthly reports
  • ✓ Category breakdowns

Privacy First

  • All exports generated locally
  • No data sent to servers
  • Full data control

⚙️ Settings & Customization

Personalize Your Experience

General Settings

  • Currency: INR, USD, EUR, GBP, JPY
  • Theme: Dark, Light, Auto
  • Default Account: Choose primary account

Notification Preferences

  • Budget alerts: ON/OFF
  • Goal reminders: ON/OFF
  • Weekly summary: ON/OFF
  • Unusual activity alerts: ON/OFF

🎨 Design & UX

Color Scheme

  • Primary (Accent): #00E5A0 (Neon Green) - Income, positive actions
  • Secondary: #FF6B6B (Coral Red) - Expenses, warnings
  • Warning: #F59E0B (Amber) - Caution states
  • Background: #0A0C10 (Dark)
  • Surface: #111318 (Dark Gray)

Typography

  • Headlines: Syne (Bold, modern)
  • Body: DM Sans (Clean, readable)
  • Monospace: DM Mono (Data, numbers)
  • Fonts: Google Fonts (optimized)

Responsive Breakpoints

  • 📱 Mobile: 320px - 768px
  • 📊 Tablet: 768px - 1024px
  • 🖥️ Desktop: 1024px+

🛠️ Technology Stack

Frontend

  • JavaScript: Vanilla JS (No framework)
  • HTML5: Semantic markup
  • CSS3: Custom + Tailwind utilities
  • Charts: Chart.js v3.9+

Dependencies (via CDN)

- Tailwind CSS v3.x
- Chart.js v3.9+
- Google Fonts (Syne, DM Sans, DM Mono)
- No build process required

Architecture

  • Single HTML file (Self-contained)
  • Modular JavaScript (Organized functions)
  • Responsive CSS Grid layout
  • Icon system (Unicode emoji)

📊 Data Management

Current Implementation

  • Storage: Browser Memory (Session-based)
  • Data Persistence: Not enabled yet
  • Scope: Single-session use

Future Data Persistence Options

  • 🔹 Browser Local Storage - Save across sessions
  • 🔹 IndexedDB - Large data offline storage
  • ☁️ Firebase - Cloud sync
  • 🗄️ MongoDB - Full backend
  • 📦 PostgreSQL - Enterprise solution
  • 🌐 AWS DynamoDB - Scalable cloud

🔐 Security & Privacy

Complete Privacy

  • All operations happen in your browser
  • No data sent to servers
  • No cookies or tracking
  • No analytics integrated
  • Open source for transparency

Security Features

  • Client-side only processing
  • No authentication vulnerabilities
  • No data breach risks
  • No third-party data sharing

Compliance

  • GDPR compliant (no data collection)
  • CCPA friendly
  • No user tracking
  • Full data ownership

📱 Browser Support

Browser Version Status
Chrome Latest ✅ Full Support
Edge Latest ✅ Full Support
Firefox Latest ✅ Full Support
Safari Latest ✅ Full Support
Mobile Chrome Latest ✅ Full Support
Mobile Safari Latest ✅ Full Support

🎯 Roadmap

Version 2.1 (Q2 2026)

  • Local Storage persistence
  • Recurring transactions
  • Split bill feature
  • Multiple accounts
  • Enhanced date range filters

Version 2.2 (Q3 2026)

  • Dark/Light theme toggle
  • Custom category creation
  • Email weekly reports
  • Budget recommendations AI
  • Tax categorization

Version 3.0 (Q4 2026)

  • Backend API integration
  • User authentication
  • Cloud data sync
  • Mobile native apps
  • Bank account integration
  • Advanced ML insights

🤝 Contributing

Love FinTrack? Help make it better!

How to Contribute

  1. Fork the repository
  2. Create a feature branch
  3. Make your improvements
  4. Submit a pull request
  5. Wait for review and merge

Contribution Ideas

  • 🐛 Bug fixes and improvements
  • ✨ New features and enhancements
  • 📖 Documentation improvements
  • 🎨 UI/UX refinements
  • 🔧 Performance optimizations

Report Issues

Found a bug? Have a feature idea?

  • Open an issue on GitHub Issues
  • Provide detailed description
  • Include steps to reproduce
  • Attach screenshots if applicable

📄 License

This project is licensed under the MIT License.

You are free to:

  • ✅ Use commercially
  • ✅ Modify the source
  • ✅ Distribute copies
  • ✅ Include in your projects

You must:

  • 📋 Include license notice
  • 📋 State changes made
  • 📋 Include original copyright

See LICENSE file for full details.


📞 Support & Contact

Get Help

  • 📧 Check documentation above
  • 🐛 Report bugs via GitHub Issues
  • 💬 Discuss features via GitHub Discussions
  • 🔗 Visit the repository

Author

Arjun J


🌟 Show Your Support

If FinTrack helps you manage your finances better:

  • Star the repository
  • 🔄 Share with friends
  • 📢 Recommend to others
  • 💬 Provide feedback
  • 🤝 Contribute code
  • 🐞 Report bugs
  • 💡 Suggest features

Your support means everything! 🙏


🎓 Learning Resources

For Users

  • 📖 Complete feature documentation
  • 🎬 Feature walkthroughs
  • 💡 Tips and best practices
  • ❓ FAQ section (coming soon)

For Developers

  • 🔧 Single HTML file structure
  • 📚 Well-commented JavaScript
  • 🎨 CSS organization guide
  • 🚀 How to extend features

💬 Feedback

We'd love to hear from you!

  • What features do you love?
  • What can we improve?
  • How are you using FinTrack?
  • Any suggestions?

Your feedback shapes the future! 🎯


📈 Version History

v2.0 (Current)

  • ✨ Complete redesign with 8 pages
  • 📊 Advanced analytics
  • 💡 Smart insights
  • 🎯 Goal tracking
  • 📥 Export features
  • ⚙️ Settings panel

v1.0 (Initial)

  • 📊 Basic dashboard
  • 💳 Transaction tracking
  • 💰 Budget overview

🙏 Acknowledgments

Key Technologies

  • Chart.js - Beautiful data visualizations
  • Tailwind CSS - Utility-first CSS framework
  • Google Fonts - Premium typography
  • Unsplash - Design inspiration

Community

  • ❤️ Open source enthusiasts
  • 🤝 All contributors
  • 👥 User feedback
  • 🌟 GitHub community

Made with ❤️ for managing personal finances better

View on GitHubReport IssuesStar ⭐


"Your financial health is our priority. Take control of your money today." 💰

Last Updated: April 12, 2026
Status: ✅ Active Development
License: MIT

About

A sleek, dark-themed personal finance dashboard built with HTML, Tailwind CSS, and Chart.js. Track your income, expenses, budgets, and savings all in one place.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages