Pau Sanchez
Programming, technology & business

Real-time Finance Calculator

Tuesday afternoon. A simple idea crossed my mind.

Wouldn’t it be nice to create a simple page that shows some real-time stats on how much money you make or how much money you spend on certain services on a per minute/hour/day/week/month/year basis?

It could be used to see how your salary grows, or to get a feeling on the recurring costs of Netflix, or the cost of a particular AWS server instance or the revenue of your business or whatever you come up with.

The problem was that during the week I could not find the time to work on it, so I had to be patient and wait.

Weekend it is.

I started crafting a simple HTML page with an input field for the salary/revenue/cost and then showing some static stats. Then I added real-time stats. Too many items on the page. I separated in a couple of tabs.

Then I had a series of iterations:

  • Wouldn’t it be cool to add more currencies? More currencies it is.
  • People like light/dark themes, right? Let’s add it as well.
  • What about a share button? That way people can share with friends. Share button added.
  • Since people can share now… wouldn’t it be cool for people to be able to edit title? Edit title added.
  • What about description? Oh, that would also be cool. Description edition added.
  • What about being able to add URLs in the description and make links out of them? Check.

So I ended up with a pretty customizable page. And I thought, you know what? shared URLs are reaaaaaaally long. Maybe I could use some sort of compressor. So I did a little bit of research and it turns out javascript nowadays ship with deflate/gzip support. It is async, but hey, it was not that hard to add. So URLs were a little bit shorter.

But then I thought… what if I use a URL shortener? So I added support for that as well (but only when you click on Share).

The current design is not that great, but I find it good enough already. Better done than perfect.

Real-time finance monitor

Data is 100% private. Only if you share with a URL shortener the URL will be saved. Feel free to have a look and create your own dashboards.

Some examples:

Here some videos/images from previous examples:

Amazon AWS T2 Small Cost

Salary Example

Other ideas:

  • Your monthly utility bills
  • Your mortage
  • Your car loan
  • Your HBO account
  • Your Spotify account
  • Your AWS / GCloud / Azure bill
  • Your business revenue
  • Your business recurring costs

Feel free to play with the finance monitor tool. Remember: as long as you don’t share the URL, your data will remain 100% private and for your eyes only.

Have fun!