FinTrack - Personal Finance Manager

FinTrack is a comprehensive personal finance management web application built with HTML, CSS, and JavaScript. It empowers users to track expenses, manage budgets, set financial goals, and gain insights into their spending habits.

Features

Dashboard

• Total Balance Overview: Real-time summary of all accounts
• Monthly Expense Tracking: Visual breakdown of spending
• Income Insights: Breakdown of salary, bonuses, and other income
• Recent Transactions: Quick view of latest activity
• Budget Progress: Visualization of budget status
• Financial Health Indicators: Key metrics for financial wellness

Transactions

• Transaction History: Complete log with filtering options
• Categorization: Automatic and manual tagging
• Search Functionality: Free text search for transactions
• Manual Entry: Form to add transactions
• Edit/Delete Options: Modify or remove entries
• Sorting: By date, amount, or category

Budget Management

• Monthly Budget Setup: Define and track budgets
• Category Allocation: Assign budgets to specific categories
• Budget vs. Actual: Compare planned vs. real spending
• Progress Indicators: Visual cues for budget status
• Overspending Alerts: Notifications for exceeding limits

Reports & Analytics

• Spending by Category: Visual breakdown of expenses
• Income vs. Expense: Comparative analysis
• Monthly Trends: Insights into spending patterns
• Custom Date Range: Flexible report generation
• Exportable Reports: Downloadable in PDF format

Goals & Planning

• Goal Creation: Set and track financial objectives
• Timeline Visualization: See progress over time
• Milestone Tracking: Monitor key achievements
• Goal Recommendations: Suggestions based on habits
• Subscription Management: Auto-renewal tracking

Settings

• Category Management: Add, edit, or delete categories
• Currency Selection: Choose preferred currency
• Theme Customization: Light or dark mode options
• Color Accents: Personalize the interface
• Data Options: Import/export functionality

Technologies Used

• HTML5: Structure and content
• CSS3: Styling and layout
• JavaScript (ES6+): Functionality and interactivity
• Chart.js: Data visualization
• jsPDF: Report generation
• localStorage: Data persistence

Project Structure

The project is organized as follows:

/webp-project
  /docs
    /css
      style.css
      transactions.css
      budget.css
      reports.css
      goals.css
      settings.css
    /js
      app.js
      storage.js
      ui.js
      transactions.js
      budget.js
      reports.js
      goals.js
      settings.js
      theme-loader.js
    transactions.html
    budget.html
    reports.html
    goals.html
    settings.html
    index.html
  /assets
    /icons
      logo.png
  README.md

Installation and Usage

1. Clone the repository: git clone https://github.com/yourusername/fintrack.git

2. Open index.html in your web browser to launch the application.

3. No additional installation or setup is required as the application uses localStorage for data persistence.

Key Features

• Data Persistence: All your financial data is stored locally in your browser using localStorage.
• Responsive Design: Works on desktop, tablet, and mobile devices.
• Offline Functionality: No internet connection required after initial load.
• Privacy-Focused: Your financial data never leaves your device.
• Customizable: Personalize the app with themes and color accents.

Screenshots

Future Enhancements

• Bank account integration
• Cloud synchronization
• Mobile app version
• Advanced investment tracking
• AI-powered financial insights

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Acknowledgements

• Chart.js for the beautiful charts
• Font Awesome for the icons
• jsPDF for PDF generation capabilities