Build an Expense Tracker App with JavaScript

An expense tracker is the single most useful app a beginner can build — because it solves a problem everyone has: knowing where the money actually goes. It is also a perfect learning project: forms, lists, local storage, totals, and a little chart, all in one app you will genuinely use.

The core of the app is small. You keep an array of expenses, each with a description, an amount, and a category, and you render them as a list:

let expenses = JSON.parse(localStorage.getItem('expenses')) || [];

function addExpense(description, amount, category) {
  expenses.push({ description, amount: Number(amount), category, date: new Date().toISOString() });
  localStorage.setItem('expenses', JSON.stringify(expenses));
  render();
}

function totalSpent() {
  return expenses.reduce((sum, e) => sum + e.amount, 0);
}

function totalByCategory(category) {
  return expenses
    .filter(e => e.category === category)
    .reduce((sum, e) => sum + e.amount, 0);
}

localStorage keeps the data in the browser, so your expenses survive a refresh. reduce adds them up, and filter gives you the total for one category — food, transport, fun — so you can see at a glance what is eating your money.

This project teaches you the shape of almost every real app: a form that takes input, a list that shows it, data saved somewhere, and a summary that turns raw rows into insight. Once you can build this, you can build a todo app, a habit tracker, or a small inventory system — the pattern is the same, only the data changes.

Tracking expenses is also the first step of real personal finance — you cannot fix a budget until you can see where the money goes. If you want to go deeper after building this, these personal finance books explain budgeting, saving, and investing for Indian readers, from the first salary to long-term wealth.

To build it, start with one HTML file: a form with description, amount, and category, a list below it, and a total at the top. Add the delete button for each row, then a filter by category, then a simple bar chart using plain divs — one bar per category, sized by its total. Test it by adding a week's real expenses and checking the totals by hand.

Who is it for? JavaScript beginners who want a project they will actually use, and anyone who wants to understand money better. It is also a strong portfolio piece: it is practical, it shows data handling, and every interviewer understands what it does.

The limits are honest: data in localStorage lives only in one browser, so it is not a real multi-device app, and it has no backup. For a learning project that is fine; for a real product you would add a backend and an account system.

Your first step today: build the form and the list, add three real expenses from today, and refresh the page to prove they are still there. You have just built the app that shows you where your money goes — and that is the first step to keeping more of it.