This finance tracker didn’t start as a “project.” It started as a reaction. I was tired of apps that make tracking money feel like filing taxes. I didn’t want graphs fighting for attention or features I’d never use. I just wanted to answer three questions quickly: How much came in, how much went out, and what’s left.

So instead of planning a big system, I opened React and wrote the smallest thing that could work.

At the center of the app is a simple list of transactions. Each one knows three things and nothing more: the amount, whether it’s income or expense, and a short note. That’s the entire model. No categories tree, no complex schema, no future-proofing that never arrives. When you reduce the problem enough, the code almost writes itself.

The UI followed the data, not the other way around. Totals go first because that’s what your brain wants to see. The form stays close because adding a transaction should feel instant, not ceremonial. The history lives underneath, quietly keeping receipts in case you start questioning your own spending decisions.

What makes this project interesting isn’t what it does, but what it refuses to do. There’s no persistence layer. Refresh the page and everything disappears. That’s intentional. This app isn’t trying to be your bank. It’s trying to teach how state flows through components and how small decisions add up, both in code and in money.

Each component stays in its lane. The form only cares about collecting input. The summary only cares about math. The list only cares about display. When things are wired this way, you can change one part without mentally reopening the entire project. That’s a habit worth building early.

The calculations are refreshingly plain. Filter. Reduce. Subtract. No helper libraries, no abstractions pretending to be smart. Just JavaScript doing exactly what you expect. Code like this ages well because there’s nothing mysterious to maintain.

This is the kind of project that quietly levels you up. Not because it’s impressive, but because it’s honest. You’re not following a tutorial step by step. You’re making tradeoffs. You’re deciding what matters and what doesn’t. That’s the skill that carries over to bigger apps later.

The full source code is available separately if you want to explore or extend it. The blog stays focused on the why, not dumping every line of JSX on the page.

If you ever turn this into something bigger monthly views, charts, exports you’ll know exactly where each piece belongs. And that’s a much better starting point than an app that tried to do everything on day one.

To run the app just follow the instruction inside the downloaded file. Thanks!