Design + Dev Improvement: Early Mortgage Payoff Calculator

Shpigford commented 3 months ago

Another little OSS design/bounty experiment...

I've built an Early Mortgage Payoff Calculator and it has all the data points I'd like for it to have. However the design feels...boring and not exactly on-brand for Maybe.

https://maybe.co/tools/early-mortgage-payoff-calculator

CleanShot 2024-08-06 at 13 14 22@2x

So let's try something. I've set a $200 bounty for improving the design AND implementing those improvements.

If you'd like, you can use the Maybe Mini-Tool UI Kit for inspiration: https://link.maybe.co/ui-kit

You can see other mini-tools here: https://maybe.co/tools

Bounty

There is a $200 bounty on this.

To participate in the bounty:

Comment /attempt #102 to indicate you plan on working on this.
Submit a draft PR once you start and include /claim #102 along with your general game plan for how you intend to implement this.
Change out of draft mode on the PR once you're ready to submit your attempt.
Include a short video showing functionality in your PR (drastically speeds up our approval).

In the event of multiple attempts, we generally pick the one that most closely matches the scope with the cleanest code and test coverage (when appropriate).

Shpigford commented 3 months ago

/bounty $200

syedbarimanjan commented 3 months ago

/attempt #102 if i get time.

Algora profile	Completed bounties	Tech	Active attempts	Options
@syedbarimanjan	5 maybe-finance bounties + 3 bounties from 3 projects	TypeScript, HTML, Go & more		Cancel attempt

akshaychugh-xyz commented 3 months ago

/attempt #102

Options

Cancel my attempt

JoshAntBrown commented 3 months ago

I was going to give this a go but I don't really have the time to get this one done right now. I did however write some code that I thought might be useful to someone who's working on this so thought I'd share here.

I was originally going to generate a graph showing how the balances change as you adjust the values.

While looking into it though I noticed the current calculator doesn't really factor in the original loan term, and only uses the years left. So I went about refactoring the calculations in a way that could also be fed into a graph. Since this calculates the balance from the very beginning of the term and not just the years remaining it should show you whatever principal has already been paid off. It should also be somewhat simple to reduce the data down to calculate the total interest paid in either scenario.

Click here to see code snippet

```javascript #calculatePayoffResults(loanAmount, originalTerm, yearsLeft, interestRate, extraPayment, savingsRate) { const totalPayments = originalTerm * 12; const monthExtraPaymentStart = totalPayments - yearsLeft * 12; const monthlyRate = interestRate / 12; const monthlySavingsRate = savingsRate / 12; const regularPayment = (loanAmount * monthlyRate * Math.pow(1 + monthlyRate, totalPayments)) / (Math.pow(1 + monthlyRate, totalPayments) - 1); const paymentWithExtra = regularPayment + extraPayment; let balance = loanAmount; let balanceWithExtra = loanAmount; let savingsBalance = 0; let monthPaidBalanceEarly = null; const months = Array(totalPayments).fill(null).map((_, i) => { const currentMonth = i + 1; // Calculate regular payment results const interestPayment = balance * monthlyRate; const principalPayment = regularPayment - interestPayment; balance -= principalPayment; // Calculate extra payment results let interestPaymentWithExtra = 0 let principalPaymentWithExtra = 0 let actualPayment = 0; if (monthPaidBalanceEarly === null) { actualPayment = currentMonth >= monthExtraPaymentStart ? paymentWithExtra : regularPayment; interestPaymentWithExtra = balanceWithExtra * monthlyRate; const paymentLeft = balanceWithExtra + interestPaymentWithExtra; if (actualPayment > paymentLeft) { actualPayment = paymentLeft; } principalPaymentWithExtra = actualPayment - interestPaymentWithExtra; balanceWithExtra -= principalPaymentWithExtra; if (balanceWithExtra <= 0) { monthPaidBalanceEarly = currentMonth; } } else { balanceWithExtra = 0; } // Calculate savings account balance using savings rate if (currentMonth >= monthExtraPaymentStart && extraPayment > 0) { savingsBalance *= (1 + monthlySavingsRate); savingsBalance += extraPayment; } return { month: currentMonth, original: { interestPayment: interestPayment, principalPayment: principalPayment, remainingBalance: balance, }, withExtra: { actualPayment: actualPayment, interestPayment: interestPaymentWithExtra, principalPayment: principalPaymentWithExtra, remainingBalance: balanceWithExtra, }, savingsBalance: savingsBalance, }; }) if (!monthPaidBalanceEarly) { monthPaidBalanceEarly = totalPayments; } const investmentBalanceAtEarlyPayoff = months[monthPaidBalanceEarly - 1].savingsBalance; return { months, monthExtraPaymentStart, monthPaidBalanceEarly, monthsSaved: totalPayments - monthPaidBalanceEarly, investmentBalanceAtEarlyPayoff, } } ```