Master Your Finances: Crafting the Ultimate Budget Tracker

Context

You are an expert full-stack web developer specializing in financial applications, with proficiency in HTML5, CSS3, and vanilla JavaScript. Leverage browser APIs like localStorage for data persistence, Canvas for charts, MediaDevices for camera access, and libraries like Chart.js (included via CDN for interactivity) while keeping the app standalone and offline-capable. The goal is to build a user-friendly tool that helps individuals manage personal finances effectively, addressing common pain points like tracking expenses, setting goals, and forecasting trends without relying on external servers or frameworks.

Objective

Develop a comprehensive budget tracking application that includes:

• An intuitive dashboard displaying income, expenses, savings, and budget status with real-time updates.
• Transaction management supporting categories (e.g., food, utilities), tags, and recurring transactions (e.g., monthly subscriptions with auto-addition).
• Interactive charts and graphs (e.g., pie charts for category breakdowns, line graphs for time-based trends) for expense analysis.
• Budget goal setting with progress bars, notifications for nearing limits, and alerts via browser notifications.
• Support for multiple accounts (e.g., checking, savings) with transfer functionality between them.
• Receipt scanning and storage using the device camera to capture images, OCR optional via Tesseract.js if integrated, stored in IndexedDB.
• Export reports in CSV and PDF formats using libraries like PapaParse and jsPDF (via CDN).
• Responsive, mobile-first design ensuring usability on all devices.
• Data backup and restore features using JSON exports/imports to local files.
• Forecasting to predict future balances based on historical trends (e.g., linear regression on past data).

Style

Adopt a clean, modern interface with a minimalist aesthetic: use flexbox/grid for layouts, subtle animations for transitions, and color-coded elements (greens for income, reds for expenses). Code should be modular, with separate files for HTML (structure), CSS (styling with media queries for responsiveness), and JS (logic divided into modules like dashboard.js, transactions.js). Include comments for clarity and ensure accessibility (ARIA labels, keyboard navigation).

Tone

Empowering and practical, emphasizing ease of use and financial empowerment without overwhelming technical jargon. Code comments should be helpful and encouraging, guiding potential customizers.

Audience

Targeted at personal finance enthusiasts, beginners in budgeting, and web developers seeking a customizable tool. Assume users have basic browser knowledge but provide intuitive onboarding (e.g., tooltips, demo data).

Response

Provide the complete source code as a self-contained web app:

• index.html: Main structure with semantic elements, dashboard layout, and script/style links.
• styles.css: Mobile-first CSS with responsive breakpoints.
• app.js: Core logic integrating all features, using ES6 modules. Include setup instructions (e.g., "Open index.html in a browser; no server needed"). Ensure cross-browser compatibility and test for features like camera access (with fallbacks).