When I began exploring the real state business and the mortgages conditions and formulas, I realized that the existing online calculators were either oversimplified or failed to fully reflect the Spanish mortgage ecosystem. With this panorama I created a Google Sheet document that fulfilled my needs but, from time to time, I couldn't use because of the Google Drive free storage limit.

Finally, I have decided to create a project to provide all the functionalities of the spreadsheet.

mortgage-calculator-ui

This version of the project focuses on three fundamental tools:

A complete amortization calculator (French system).
A cost estimator for the entire purchase process.
A breakdown of unrecoverable costs when buying versus renting.

About the project

The goal is not to replace professional financial advice, but to offer clarity in one of the most opaque processes that people face in Spain: understanding how much a mortgage actually costs.

The tool computes:

Full amortization tables
Interests vs principal over time
Rent vs buy comparisons
Breakdown of taxes and legal costs by Autonomous Community

From a technical point of view, the project has served as a playground to explore:

Next.js App Router for structuring a real-world web application
Dynamic components with React Server Components and hydration
Localizable content, including complex mortgage terminology
Interactive data visualization using Charts.js
A coherent design system built on TailwindCSS
Deployment pipelines in Netlify, with simple analytics via GoatCounter

Objectives

This project has two primary objectives:

To help me (and others) make informed financial decisions. Mortgages are long-term commitments, and understanding the numbers is essential.
To build a polished, production-ready web application, focusing on:
- maintainable UI architecture
- financial correctness
- high-quality UX
- multilingual support
- extensibility for future tools

Results

After a few iterations, the calculator is fully functional, producing accurate amortization schedules, tax estimates, and cost breakdowns.

Some areas for improvement:

Add more mortgage types (variable + mixed models)
Improve performance for long amortization periods
Add data persistence to store multiple scenarios
Add automated tests for financial calculations

Despite this, the current milestone successfully delivers the core experience: a complete, transparent, and highly interactive Spanish mortgage calculator.