After building a to-do list app with React (here is an article I wrote about it), I was eager to keep building and learning new things.
Over the years I've tinkered quite a few times with some of the compound interest calculators you can find online, so I thought building my own version would be a cool project to work on. Not only would I have to use some maths to make it work, but I would also have to figure out how to work with charts.
One of my main goals with this project was to make it available online for people to use, so this will be my first real project (yay!). I'm planning to publish it under its own domain name but, for now, you can check it out following the link below. I will update this post once I move the tool to a new domain.
How it works
The tool is pretty straightforward: you just have to enter your current investment capital, the contribution amount, the contribution frequency (you can choose between monthly or annually), the investment duration (in years), the interest rate and the compound frequency (again, you can choose between monthly or annually) to get the future value of your investment.
I also added a Calculate button you can click to get the future value of your investment. Once you click that button, the website will scroll to the chart section. A cool thing I like is that you can update the numbers as you want and both the future value and the chart will keep updating even if you don't click the Calculate button anymore.
Building the chart
Before I started working on this project I had no idea how to make charts using code. After some research I came across Chart.js, a JavaScript charting library that seemed a pretty good fit for the kind of chart I needed.
As you can see in the picture below, I'm using a bar chart with two different data sets: total contributions and total with interests. Thanks to the magic of Chart.js you can interact with the graph: if you hover (or tap) over the bars you will see the data for the desired year.
Learnings
I had a lot of fun while working on this project. I learnt about making charts with code and I kept practising with the useEffect React Hook I also used in my previous app (that is how the chart gets updated every time you change a value). I also learnt how to implement math formulas on code and how to format numbers (you'll notice I'm not showing decimals on the future value result).
Overall, working on this project allowed me to get more confident with coding. Now, I want to make a few improvements on the app before publishing it to its own domain.