DEV Community

Bradley Wells
Bradley Wells

Posted on

I created some FI/RE calculators using Blazor WebAssembly

I had some spare time to work on a weekend project, so I decided to build a client-side Blazor WebAssembly application.

Blazor Fire Calculators

  • Future Value Calculator - Estimate how much your investments will grow with annual compounding interest and monthly contributions.
  • Fire Age Calculator - Estimate when you will be able to retire based on your current portfolio balance, annual savings, and expected retirement expenses.

Why did you make it?

I wanted to create a client-side web application using Blazor with WebAssembly. As part of the FI/RE community (more on that later), I often find myself crunching numbers about different financial scenarios. While there are plenty of compound interest and future value calculators available, I was not aware of any written in C# using Blazor. This was a good project to marry a couple of my passions and learn some new things along the way.

What issues did you run into?

One issue I quickly discovered is that Blazor's data binding currently only supports DateTime formatting. It does not support currency or custom number formatting. I developed a workaround in this app that involves binding to a separate string instead of working with the number values directly. This required custom onfocusin and onfocusout event handlers in order to deliver a good experience to the end user.

Also, since client-side Blazor is still in preview, I fully expect some breaking changes to come down the pipeline before launch in May 2020. Maintaining the project as these changes roll out will force me to stay informed about Blazor development. This was another reason I created this web app!

Is there a demo?

Yes! A WebAssembly app, even one with dynamic functionality, basically builds into a static site, making hosting a breeze. I am hosting my project on Netlify. You can try out the client-side Blazor Fire Calculators at https://fire.wellsb.com/. This is a Blazor WebAssembly app, so there is no need for a powerful or specialized server. After the initial load, all processing is done using client resources!

Where's the code?

GitHub logo bradwellsb / blazor-fire-calculators

FIRE calculator PWA created using Blazor WebAssembly and C#

What is FIRE?

FIRE stands for Financial Independence, Retire Early. Financial independence means you no longer have to work for a living. When you have enough income (from investments, real estate, passive business, etc) to pay for your living expenses for the rest of your life, you are financially independent.

How do I become Financially Independent?

  • Spend Less
  • Save More
  • Earn More

When will I be FI?

The FIRE Age Calculator can help you answer this question! An important part of the path toward FI is to save as much money as you can, and let that money work for you. Passive index fund investing is a great way to get more out of the money you save. A widely accepted rule of thumb is known as the 4% rule or Safe Withdrawal Rate (SWR). When you have enough saved that you can withdraw and live off of 4% (or less) of your total investments each year, you may be financially independent. In general, if you follow the SWR principle, you can expect your portfolio to grow by a faster rate than the amount you withdraw each year.

Top comments (0)