Jan 2019 - Present
This has been my main project for a while, and one that I have put the most effort into. It is a collection of personal finance calculators and content.
And to help you understand what type of content and calculators they are, let me walk you through an example.
Lets say over the next 15 years you want to save roughly $100k.
How much would you have to save every month?
Click the link below and it will open a new tab with a calculator that can answer that question. Type in 100k as the target value and 15 for the years of investment.
You'll see that you should save roughly $320 a month if you want to reach $100k in 15 years.
Down below this I have included:
- The architecture
- 5 useful features that you can find in some/all of the calculators
- 4 reasons why I still love working on this side project after over a year
- How you can view the code
JS Nuxt Vue Vuetify Docker Kubernetes Node Sass Chart JS
We have a very simple architecture. We have a single nuxt app that we host on a basic kubernetes setup.
However to save money we host our other applications, for example this site, on the same cluster and nodes. That is why you see the ... . That represents pods that host our other apps.
k = thousand, m = million, b = billion
If you want to enter 10 million, just type in 10m. No need to type out 10000000.
Add and modify your age to better see how results apply to your personal situation.
If you think your investments will do better then 10% a year or 7% inflation adjusted, you can modify the growth rate.
Yearly toggle if you want to see results and inputs in yearly values instead of monthly values.
Have you have ever seen one of those day trading gurus that make ridiculous claims, like getting a 1% return daily? Try out those claims on some of our calculators to see how ridiculous they are. We use Big Int so that we can show very large results.
Custom Component Library
We built ourselves a set of custom components to help with making our calculators and content.
If I want to deploy, I just run a couple of commands and my code is deployed.
We built our site with NuxtJS, which gives us the ability to SSR(Server Side Render) or CSR(Client Side Render) content. This allows us to create content that search engines can read but also client side render more complex content to improve page load speed and user experience.
Everything is server side rendered by default unless we put it in a <client-only> element.
We use VuetifyJS. "Vuetify is a Vue UI Library with beautifully handcrafted Material Components" - Vuetify Landing Page. This allows us to create great user experiences without having to recreate many of the basic web components used across the web.
Where is the code?
If you have read this far you may want to see the code. If you do, then send me an email. In the footer below I have attached an email where you can reach me.
Have a question?
Have a question or want to see code in a private repo? Feel free to email me at the address below.