LedgerLoop — Expense Tracker

A modern, responsive, single-file expense tracking web application built with vanilla HTML, CSS, and JavaScript. Track expenses, manage budgets, generate reports, visualize spending trends, and gain smart insights — all directly in the browser with no backend required.

Deployment

You can access the live deployed version of the app here:

🌐 Live Demo — LedgerLoop Expense Tracker

The application is deployed and publicly accessible through Cloudflare Pages.

---

Features

Dashboard Overview

• Monthly spending summary
• Transaction statistics
• Top spending category
• Budget health indicators
• Interactive charts powered by Chart.js

Expense Management

• Add detailed expenses
• Categorize transactions
• Add merchants, notes, and tags
• Mark recurring expenses
• Quick filtering and search

Reports & Exports

• Filter by:

  • Date range
  • Category
  • Payment method
  • Keywords

• Export reports as:

  • PDF (via browser print)
  • DOC
  • CSV

• Print-friendly layout

Budget Tracking

• Set monthly budgets per category
• Visual budget utilization bars
• Overspending alerts
• Real-time budget analysis

Smart Insights

• Largest expense detection
• Spending trend analysis
• Recurring expense tracking
• Spending concentration by weekday
• Comparative 30-day analysis

User Experience

• Light/Dark theme toggle
• Responsive mobile-first layout
• Keyboard shortcuts
• Toast notifications
• Accessible navigation
• Modern UI with fluid typography

---

Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript
• Chart.js 4.4.3

---

File Structure

expense-tracker-pradhanska.html

This project is intentionally designed as a single-file application for easy portability and deployment.

---

Getting Started

1. Download the File

Save:

expense-tracker-pradhanska.html

2. Open in Browser

Simply double-click the file or open it in any modern browser:

• Chrome
• Edge
• Firefox
• Safari

No installation or server setup required.

---

Keyboard Shortcuts

Shortcut	Action
/	Focus search
N	Open Add Expense view
?	Open Help dialog
Esc	Close menus/dialogs

---

Available Categories

• Food
• Transport
• Shopping
• Bills
• Health
• Entertainment
• Travel
• Education
• Work
• Gifts
• Misc

---

Payment Methods

• UPI
• Card
• Cash
• Net Banking
• Wallet

---

Charts Included

Monthly Spending Trend

A line chart showing spending patterns over time.

Category Split

A doughnut chart visualizing category-wise spending distribution.

---

Export Options

PDF

Uses browser print functionality for PDF generation.

DOC

Downloads report as a .doc file.

CSV

Exports spreadsheet-compatible transaction data.

---

Responsive Design

The app is optimized for:

• Desktop
• Tablet
• Mobile devices

Features include:

• Adaptive grid layouts
• Mobile sidebar navigation
• Fluid spacing and typography
• Reduced-motion accessibility support

---

Accessibility Features

• Keyboard navigation support
• Focus-visible styling
• Semantic HTML structure
• ARIA labels
• Print-friendly rendering

---

Sample Data

The app ships with rich sample data to help test:

• Reports
• Filters
• Charts
• Budgets
• Insights

You can reload sample data anytime from the Settings page.

---

Browser Storage

This version runs entirely in-memory:

• No backend
• No database
• No cloud sync

Refreshing the page resets data unless persistence is added manually.

---

Possible Enhancements

Future improvements could include:

• LocalStorage persistence
• Authentication
• Multi-user support
• Recurring expense automation
• Real PDF generation
• Cloud backup
• Budget notifications
• PWA support
• Multi-currency support
• AI-powered spending recommendations

---

Author

Created by Pradhanska

---

License

This project is open for personal and educational use.