Inspiration
As a homeowner navigating my own 30-year mortgage, I grew frustrated with generic calculators that ignored tax implications and investment trade-offs. I wanted a tool that mirrored real-world financial decisions—weighing early payoff against investing extra funds—and made complex math accessible through clear visuals. The goal was to create something I’d actually use to make informed choices about my biggest financial obligation.
What it does
MortgagePayoff Planner lets homeowners analyze multiple early mortgage payoff strategies (monthly extra payments, annual lump sums, term reduction) side-by-side with investment alternatives. It calculates interest savings, tax impacts (accounting for standard/itemized deductions), and generates interactive amortization schedules—all visualized through dynamic charts and progress trackers. The tool delivers personalized recommendations based on user priorities: maximize savings, minimize payoff time, or balance both.
How we built it
I started by formalizing mortgage amortization formulas ($M = P × \frac{r × (1 + r)^n}{(1 + r)^n - 1}$) and tax impact logic in JavaScript, using math.js to avoid calculation errors. I built the UI with React and TailwindCSS for responsive design, integrating Chart.js for bar/line/pie charts that animate data insights. The calculator core was tested against real mortgage statements to validate accuracy, then paired with smooth animations (800-1200ms chart transitions) and intuitive input controls (expandable strategy cards, sliders for tax rates).
Challenges we ran into
The biggest hurdle was reconciling real-world tax rules with simplified calculations—balancing accuracy without overwhelming users. I also struggled with animation performance on mobile, so I optimized by disabling complex animations on smaller devices. Another challenge was the break-even analysis for payoff vs investment: modeling compound interest over variable timeframes required iterative testing to ensure results matched financial benchmarks.
Accomplishments that we're proud of
I’m most proud of the tool’s transparency—every calculation (from monthly payments to tax impacts) has explainable logic, with expandable tooltips for formulas. The responsive design works seamlessly across 320px mobile screens to desktop, and the personalized recommendation engine actually adapts to user priorities (e.g., prioritizing time vs savings) with clear, jargon-free reasoning.
What we learned
I deepened my understanding of mortgage mathematics and tax code nuances, and learned to balance technical accuracy with user experience. I also discovered how critical performance optimization is for data-heavy visualizations—small tweaks to chart rendering cut load times by 60%. Most importantly, I learned to design for real user needs: the tool evolved from a "math project" to a practical resource by focusing on pain points (e.g., comparing multiple strategies at once).
What's next for this project
Next, I plan to add bi-weekly payment strategy analysis (a common user request) and refine tax calculations to include state tax implications. I also want to integrate a simple refinancing comparison module and expand export options (PDF summaries). Long-term, I’ll add accessibility features to ensure the tool is usable for all homeowners, and test it with financial advisors to validate recommendations against industry best practices.
Built With
- chart.js
- node.js
- react
- tailwindcss
- typescript
- vercel
Log in or sign up for Devpost to join the conversation.