All Projects
Intermediate · Case Study

Budget Tracker

Know where every rupee goes.

A personal finance tracker that categorises expenses, visualises spending patterns, and helps you stay within budget — all without connecting to a bank.

JavaScriptHTMLCSSLocal StorageCharts
Live DemoGitHub
Budget Tracker

The Problem

What needed solving.

Most budgeting apps require bank linking or account creation. People who just want a simple way to log daily expenses and see totals have no lightweight option.

The Solution

How I solved it.

A local-first budget tracker — log income and expenses by category, view charts, and everything saves to localStorage. No sign-up, no server.

Features

What it does.

Add Transactions

Log income and expenses with category, amount, date, and note.

Add Transactions

Category Charts

Pie and bar charts show your spending breakdown at a glance.

Local-First

All data stays in your browser — no cloud, no sign-up.

System Architecture

How it's built.

FrontendJavaScript + HTMLUI, form handling, event listeners
ChartsChart.jsResponsive pie and bar visualisations
StoragelocalStoragePersists transaction list across sessions
DeploymentVercelStatic deployment

Technology Stack

Frontend

JavaScriptHTML5CSS3

Library

Chart.js

Browser API

Local Storage

Challenges & Solutions

Real problems, real fixes.

Challenge

Charts not re-rendering correctly when transactions were deleted.

Solution

Destroyed and re-instantiated the Chart.js instance on every data change.

Demo & Screenshots

See it live.

Budget Tracker dashboard

Expense breakdown with charts

Explore the full source code and documentation.

View on GitHubLive Demo← All Projects