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.
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:
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!