💰 Expense Tracker

A personal expense tracking application with interactive analytics, built with vanilla JavaScript.

Overview

A mobile-first web application for managing personal finances. Features expense tracking, category management, interactive charts, and advanced filtering—all running client-side with localStorage.

Features

• Add, edit, and delete expenses
• Filter by category, date range, amount, and tags
• Interactive charts (pie, bar, line)
• Category management with budget limits
• Undo/redo functionality
• Linked list navigation for browsing expenses
• Weather or crypto price widget
• Export/import data as JSON
• Fully responsive design
• Dark/light theme

Tech Stack

• Vanilla JavaScript (ES6+)
• Chart.js for visualizations
• localStorage for persistence
• CSS Grid & Flexbox
• Mobile-first responsive design

Architecture

Pattern: Modular MVC with Service Layer

• Models: Data structures (Expense, ExpenseCollection)
• Views: UI components and rendering
• Controllers: Coordinate user actions
• Services: Business logic (validation, calculations, storage)
• EventBus: Pub-sub for component communication

Data Structures Used

• Array: Primary expense storage
• Map: Category lookup (O(1) access)
• Set: Unique tags collection
• WeakMap: DOM-to-data binding
• Stack: Undo/redo history
• Queue: API request scheduling
• Linked List: Chronological expense navigation

Getting Started

1. Clone the repository
2. Open index.html in your browser
3. Start tracking expenses!

No build process or dependencies required—just pure HTML, CSS, and JavaScript.

Project Structure

expense-tracker/
├── index.html
├── styles/
│   ├── main.css
│   ├── components.css
│   └── responsive.css
├── js/
│   ├── app.js
│   ├── models/
│   ├── views/
│   ├── controllers/
│   ├── services/
│   └── utils/
└── assets/

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+