Case Study
Building a Budgeting App
Diamond - A Budgeting App for ABN AMRO Customers ABN AMRO, my bank, doesn't give you any real way to track your spending. Every time I want to understand where my money is going,
Diamond - A Budgeting App for ABN AMRO Customers
ABN AMRO, my bank, doesn't give you any real way to track your spending. Every time I want to understand where my money is going, I have to export a spreadsheet with all the transactions, manually label every transaction, and build pivot tables. Every month. It's a bit of a pain.
So I decided to build a budgeting web app.
The idea is simple: you upload your bank transaction export, the app categorises everything automatically, and you get a clean dashboard of your spending. No spreadsheets. No manual work.
Every time an expense gets categorised, I take the vendor name and save it to a database so that next time, I already know which category it belongs to.
Here's how I put it together.
Starting With a Boilerplate
I didn't want to spend time on SaaS infrastructure, login, billing, etc. So I used Open SaaS, a free open-source starter template that comes with all of that pre-built. It runs on a framework called Wasp, and honestly getting it up and running took less than 20 minutes. It's a Docker installation and a few commands.
To install it and create a new project:
npm i -g @wasp-sh/wasp-cli
wasp new
To start the PostgreSQL database:
wasp start db
wasp db migrate-dev
And to actually launch the thing:
wasp start
And there you have it. A working app skeleton with auth, billing stubs, and a basic UI, all there.
Building the Shell
After setting up the template, what I did was remove everything I didn't need. There are a couple of built-in features that I wanted to remove, and all the pages needed to be redesigned. So I created a basic brand identity for the web app. I want to call it Diamond, and I want it to resemble ABN's colors since for now it's only for ABN users.
The marketing website
Once I had a basic brand and the template cleaned up, I started building the actual pages. I want things to be extremely simple. All I want is a landing page with a bit of social proof and a brief description of the features. A pricing page with two plans, one for business and one for personal use. A small blog with some basic placeholder articles, and all the pages needed for the user to sign up, log in, and recover the password.
React shell
Now that I have the marketing website, I put together a React sidebar layout with a few routes you can navigate to. Here you will access the insights on your spending, settings for your account, billing, etc.
The Categorisation Engine
Ok, now that we have a decent website, it's time to start building the core of it, which is how transactions get categorised. And this is how it works:
Every ABN AMRO transaction has a description field, a messy string of text that usually has the merchant name buried in it somewhere. The goal is to pull that name out and map it to a category like "Groceries" or "Transport."
The way it works: I parse the description, grab the vendor name, and check it against a database of vendors I've already seen. If it's there, great, instant category. If it's a new vendor, I fire it off to an LLM and ask it to categorise it, then save the result for next time.
This way the vendor database just keeps growing. The more the app is used, the less it needs to call the LLM, and the faster everything gets. Runs on the assumption that most people, myself included, spend money at the same places over and over. Once your supermarket and gym are in there, they're categorised forever.
The Dashboard
So now I can import expenses and they get categorised, which means I can find out what I'm spending my money on.
What do I actually want to know?
- How much came in this month?
- How much did I spend?
- What's the cashflow?
- Where did the money go, by category?
- How does this compare to the rest of the year?
Each card on the dashboard pulls that answer from the database. I added a date filter and a category filter, so switching months or drilling into a specific category refreshes everything at once.
The Freemium Gate
Last but not least, I want people to be able to try it for free, but with enough of a limit that it's worth upgrading if they actually like it. The cap I landed on is 30 transactions for free users. Enough to see how it works, not enough to replace the spreadsheet habit entirely.
This hopefully helps people get a feel for what it can do for them for free, so if they want to use it they know what they're buying.