Stop 22 · Build Portfolio ProjectsProjects · 4/15

Expense Tracker

In short

An expense tracker shows you can handle money, numbers and charts without bugs. Done well, it's also something you'll actually use to see where your pocket money disappears.

A fuller personal finance tool with charts, budgets, and category-based reporting — showcasing data visualization and more complex state on top of the CRUD basics.

The jaadu writes in a thick ledger at a shop counter beside neat stacks of coins and notes.

Think of it like this

The khata book at a kirana store

Every entry has a date, an amount and a name. At month end, the owner totals it up by customer. Your expense tracker is a digital khata: add entries, group them, and see the totals at a glance.

Watch it happen

From one entry to a chart

Form

Paise

reduce

Format

Chart

1/5You enter ₹150 for Food. The form checks the amount and date before saving.

The big ideas

What you need to know

Add, edit, delete entries

Amount, category, date and a note. Proves you can handle forms and validation.

Charts that tell a story

A pie chart by category and a bar chart by month. Shows you can turn data into insight.

Budgets and alerts

Set a monthly limit per category and warn near it. Adds real product thinking.

Money handled properly

Store amounts in paise as integers and format with Intl.NumberFormat for Indian commas.

How it works

Build plan

1
Data model
id, amountPaise, category, date, note.
2
Entry form
Validate amount and date before saving.
3
List and filters
Filter by month and category.
4
Totals and charts
Group with reduce, then feed a chart library like Recharts.
5
Budgets and export
Monthly limits and a CSV download.

See it in code

Walk through the code

1const inr = new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR" });2 3function totalsByCategory(expenses) {4  return expenses.reduce((acc, e) => {5    acc[e.category] = (acc[e.category] ?? 0) + e.amountPaise;6    return acc;7  }, {});8}9 10const totals = totalsByCategory([11  { category: "Food", amountPaise: 15000 },12  { category: "Food", amountPaise: 8050 },13  { category: "Travel", amountPaise: 12000 },14]);15inr.format(totals.Food / 100); // "₹230.50"

1/4One formatter set up for Indian rupees and Indian digit grouping.

Adding whole paise avoids floating point errors. Divide by 100 only when you display. en-IN formatting also gives lakh-style commas, like ₹1,50,000.00.

Save yourself the pain