Project Overview
During this lockdown period I am fortunate to have plenty of spare time to ruminate about my goals in life. One big goal that I have decided to pen down is to be financially independent. Not because I am vying to ride those private jets and stay in those luxurious hotels as much as I want, but more of because I believe that financial indepence would give me the liberty to enact positive changes to the society I live in.
One baby step towards reaching financial independence is to be able to measure my assets and expenditure. Having an effective dashboard that displays my past expenditure and my live asset breakdown is essential for me to conduct financial planning. This would allow me to accomplish the following:
- Rebalance asset allocations based on their annual performance.
- Set monthly expenditure targets.
- Set monthly income targets.
- Track passive income channels in an organized manner.
Although there are plenty of applications for this purpose, the good ones usually come at a cost and I belive that building my own web application is actually, fun!
In the spirit of learning, I have decided to use some technology that I have never used before in my tech stack. I developed the front end using Reactjs and store my data using BigQuery in Google Cloud Platform. As for the backend server, I use a simple Python Flask.
First Look
After one and a half weeks of development, I have managed to come up with a working prototype of the web application. Thanks to Material-UI framework, the dashboard 
looks pretty sweet and simple. On top of the page, you could see the net worth that is calculated straight-up based on the live price of the assets. Just beside, there are cards that show the value and breakdown of each type of asset. For example, I have SGD xxx worth in cash (an asset type) and I have USD and SGD.
Below, you could see the asset and expenditure components in the form of pie charts. If you hover on them, you would be able to see the asset/expenditure type and the corresponding value. At the most right, you would see a bar chart that shows total past monthly expenditures.
Additionally for more detail, you could scroll down to view expenditures, 
that are also tracked automatically using simple automation tools which can be another subject of a blog post.
Pending Improvements
There are major improvements that I am still trying to add:
- Add more unit tests to the server.
- Add unit tests to the front-end components' methods.
- Add feature to display and track income.
- Add feature to allow the user to get, add, remove, and update asset transaction information.
- Add documentation.
- Containerize the web application.
- Deploy the application.
Due to the major developments that are still on my plate (to be completed in phase 2 of the project), I am still unable to publically share the code in a private repository. But please let me know should you be interested in contributing to the project.
Final Thoughts
This is a side-project that I have decided to embark on, given the spare time that I have during this lockdown period. I am thankful that I can invest my time in learning a little bit about front end development such as using React Hooks to build cool web applications. Plus, the product (net worth tracker) that is developed at the end might end up be beneficial for my personal growth, which I am very grateful for.
Top comments (0)