A lot of things happened between May and now. I was busy watching tv, eating, sleeping, and playing with our puppy.
I just came back from vacation from Florida. In this post I will summarize my progress with my side project.
The reason why I wanted to start this side project is because we bought a house recently. I always wanted to know how fast we can pay the mortgage as well as see how much money goes toward interest. Before starting this project, I googled for online mortgage amortization calculators. They were lacking in some features like variable additional payments and accurate calculations (I care about accuracy to the last penny). I have found a purpose to create this side project. I have attempted other side projects in the past, but lacked meaningful purpose. Without meaningful purpose, there is no motivation.
The Design
Originally I wanted to create a multi-view application where I can view and manage the cash flow, budget, and mortgage. Here are some designs that I quickly drew on OneNote:
The nice thing about OneNote is that I could add links to other pages/sections in my notebook. The other pages contains detailed thoughts on the different components that make up these pages. I’m also not an artist as you can tell, so this will do for now. I do budgeting and cash flow with excel, so I prioritized on working on the mortgage view first. I suppose I could also write the amortization schedule in a spreadsheet, BUT that wouldn’t be fun.
The Progression
I don’t like using create-react-app, because I like to understand what dependencies I’m using and get full control over the configuration. As a challenge, I will make all UI components from scratch with functional components and hooks. I will keep you guys posted if I can keep up with this challenge on future posts.
I started with coding the formula for calculating the remaining balance on the mortgage with no additional payments.
Formula to calculate obligatory monthly payment:
You can read more about this on Investopedia.
There were some edge cases I had to take care of when the remaining balance is less than the monthly payment or some rounding issues causing error carried forward bugs. Other than that, this was pretty straight forward to implement.
The next trick is to format this text into something nicer. Enter Table
It looks a lot better now, but something seems off with those inputs, how about we move those to the side? The table looks pretty nasty too. Time for a quick redesign!
I also created a context menu when this dropdown button is clicked. I plan to add more actions in the future, like changing the future status column from “projected” to “paid” based on the user’s selection.
The rows are now selectable when clicking the checkbox. This will allow the user to make bulk edits.
Present Day and Next Steps
You can see my current implementation on the top of this page. The sidebar looks much better in my opinion. Since I’m not an artist or UX/UI designer I will decide on a color scheme later.
To recap my current functionality, the mortgage app can calculate the remaining balance accurately based on the user inputs on the left sidebar. I verified my results with my bank mortgage statements so far, that’s right baby, the calculation is accurate to the last penny.
The next thing I want to implement is an additional payment dialog/modal. Here is an initial design of what It might look like:
Once I can get that done, I can work on making projected additional payments. It would be good to plan and predict additional payments (e.g extra 300 dollars every month)
Before any of these features become useful, I will need to figure out how to persist this data. I think a database might be overkill for this usage. Since this is a single user personal application, it might make sense to persist the data on the local filesystem on disk.
In one of my future posts, I will discuss what technologies I currently use for this project and any updates on my app.
