Overview

A comprehensive calculator built to solve a real personal challenge: planning a UK property move. The tool calculates equity release, stamp duty, mortgage payments, and net position—all with interactive visualizations.

Problem: Existing UK mortgage calculators were either too simple (missing key costs) or too complex (requiring account signups). I needed a visual, comprehensive tool that worked instantly.

Solution: Built a React application that handles every aspect of a UK property transaction, from selling your current home to purchasing a new one, with real-time visual feedback.

Try It Yourself

Key Features

Current Property Analysis

• Sale price tracking with outstanding mortgage
• Estate agent fees (percentage-based calculation)
• Solicitor fees and EPC certificates
• Current mortgage details and remaining term
• Automatic equity release calculation

New Property Planning

• Purchase price and deposit configuration
• Toggle between equity-as-deposit or manual amounts
• UK stamp duty calculation (April 2025 rates)
• Legal fees, survey costs, and arrangement fees
• Loan-to-value (LTV) ratio tracking

Visual House Comparisons

• Side-by-side property visualizations using SVG
• Proportional equity vs mortgage display (bottom-up fill)
• Color-coded properties (green = current, blue = new)
• Interest rate badges with real-time updates
• Animated transitions as values change

Smart Shortfall Handling

If your equity and cash don't cover all costs, choose from:

1. Add to mortgage - Increase borrowing to cover shortfall
2. Reduce deposit - Lower deposit, increase mortgage
3. Pay with cash - Handle shortfall separately

Additional Features

• Monthly payment calculator with compound interest
• Total repayment and interest cost projections
• Complete moving costs tracking (removals, utilities, furniture)
• Export calculations as text report
• Email summary functionality

Technical Implementation

Tech Stack

React + Hooks          // State management with useState, useMemo
TypeScript             // Type-safe component props
Tailwind CSS           // Utility-first responsive styling
SVG Graphics           // Custom house visualizations

Architecture Highlights

• Performance optimization with useMemo for expensive calculations
• Responsive design with mobile-first approach
• Real-time calculations triggered by user input
• UK-specific logic for stamp duty bands and mortgage formulas

Stamp Duty Calculation (April 2025)

Implements the UK's tiered Stamp Duty Land Tax (SDLT) system effective from 1st April 2025:

Example: £400,000 property

£0 - £125,000      × 0%  = £0
£125,001 - £250,000 × 2%  = £2,500
£250,001 - £400,000 × 5%  = £7,500
                          ─────────
Total Stamp Duty          = £10,000

Note: These are standard residential rates. Additional property purchases (second homes, buy-to-let) incur a 5% surcharge on all bands.

Mortgage Formula

Uses standard compound interest formula:

M = P × [r(1+r)^n] / [(1+r)^n - 1]

Where:
M = Monthly payment
P = Principal loan amount
r = Monthly interest rate
n = Number of payments

Development Approach

This project demonstrates AI-assisted development for personal problem-solving. Rather than spending days researching mortgage formulas and building UI components from scratch, I leveraged AI tools to accelerate prototyping, allowing me to focus on:

• Refining the user experience
• Adding visual polish
• Handling edge cases
• Testing different scenarios

The result: a working tool in hours instead of weeks.

Use Cases

The calculator handles various UK property scenarios:

• First-time buyers - Start with zero equity, plan deposit needs
• Movers with equity - Use released equity as new deposit
• Downsizers - See cash remaining after downsizing
• Complex scenarios - Multiple fees, varying interest rates

Lessons Learned

React State Management: Managing interconnected financial calculations required careful state design. Using useMemo prevented unnecessary recalculations while maintaining reactivity.

Financial Accuracy: Implementing compound interest and tiered tax calculations highlighted the importance of precision in financial tools.

Visual Communication: The house visualizations transformed abstract numbers into intuitive, scannable information—proving that good design enhances understanding.

Scope Discipline: Resisting feature creep kept the project focused. It solves the specific problem it was built for, and that's enough.

Future Enhancements

Potential additions if demand warrants:

• Historical interest rate trends
• Multiple property comparison (for investors)
• Integration with UK property APIs (Zoopla, Rightmove)
• Scenario save/load functionality
• Affordability stress testing

But honestly? It already does exactly what I needed.

Note: This calculator uses standard UK stamp duty rates as of April 2025. Interest calculations are indicative. Always consult a qualified mortgage advisor before making property decisions.

Tech Stack: React, TypeScript, Tailwind CSS, Next.js