Responsive financial calculator demo

Ontario mortgage qualification, made understandable.

A full-stack calculator that estimates purchasing power, mortgage payments, debt-service ratios, default-insurance costs and Ontario closing costs against live Bank of Canada benchmark rates — with an itemized cash-to-close breakdown and no fabricated demo data.

Ontario-specific calculationsBank of Canada API integrationDesktop and mobile experience
Bank of Canada connected (live)
Step 2 of 4 · Finances

Down payment and monthly debts

Enter the financial details used to estimate purchasing power.

$80,000
$705/mo
5-Year Fixed Benchmark4.49%
Estimated maximum home price
$842,000
Monthly payment$4,126
Cash to close$91,350
Qualification rate6.49%
Gross Debt Service36.2% / 39%
Total Debt Service41.7% / 44%
Calculation model

The core math behind the estimate.

The interface keeps the experience simple, while the calculation engine separates payment math, qualification rules, insurance, taxes and closing costs into reusable modules.

Mortgage stress test
qualificationRate = max(contractRate + 2%, 5.25%)

The qualifying payment uses the higher stress-test rate rather than only the rate selected for the estimated monthly payment.

Gross Debt Service
GDS = housingCosts ÷ grossMonthlyIncome

Housing costs include the qualifying mortgage payment, property tax, heating, applicable condo fees and ground rent.

Total Debt Service
TDS = (housingCosts + monthlyDebts) ÷ grossMonthlyIncome

This adds vehicle payments, student loans, revolving credit obligations and other recurring monthly debts.

Canadian mortgage payment
payment = P × r(1 + r)ⁿ ÷ ((1 + r)ⁿ − 1)

The periodic rate is derived from the Canadian convention of nominal annual interest compounded semi-annually.

Insured mortgage
totalMortgage = baseMortgage + insurancePremium

Mortgage-default insurance is calculated from the loan-to-value bracket and financed into the balance — but the 8% Ontario PST on that premium cannot be financed, so it's tracked separately as a cash-at-closing cost.

Maximum-price solver
qualifies = GDS ≤ limit && TDS ≤ limit && amortization ≤ eligible max

A binary search tests candidate purchase prices, and a 30-year amortization is only accepted for insured mortgages when the buyer is first-time or purchasing new construction — otherwise it's automatically capped at 25 years.

Project overview

More than a monthly-payment calculator.

Many mortgage tools answer only one question: “What will my payment be?” This project combines qualification, affordability and closing-cost calculations in one guided journey, while explaining which financial factor is limiting the result.

$

Maximum purchase price

Works backward from household income, property costs and debts to solve for a practical maximum home price, with every input starting at zero — nothing is pre-filled or assumed.

%

Qualification ratios

Calculates Gross Debt Service and Total Debt Service ratios and names the specific entered debt driving the result, instead of guessing at a generic cause.

Ontario purchase costs

Itemizes provincial and Toronto land-transfer tax, mortgage-default insurance, the 8% PST charged on that premium, and legal fees into a single visible cash-to-close breakdown.

Live benchmark data

Retrieves and normalizes real Bank of Canada rate data through a protected server-side endpoint, with a clearly labelled live/backup state and a source panel showing the raw series IDs.

Two calculation modes

Solve for maximum purchasing power, or test a specific price by editing it directly in the results panel and watching the qualification verdict update live.

Responsive experience

The desktop split view becomes a guided single-column flow with a persistent estimate summary on tablet and mobile.

API and architecture

Designed as a reusable financial service.

The calculator UI does not directly own the business rules. A server endpoint validates the input, retrieves normalized rate data and calls a pure calculation library. The same engine could later power other websites, advisor tools or partner applications.

1
Bank of Canada data sourceRetrieves benchmark rates through an external financial API.
2
Protected Next.js API routeNormalizes the response, caches data and keeps provider details away from the browser.
3
Mortgage calculation libraryRuns qualification, payment, insurance, tax and closing-cost functions.
4
Responsive customer interfaceDisplays results, assumptions, ratio limits and an understandable breakdown.
Design decisions

Built for clarity, trust and completion.

Financial forms can feel intimidating. The interface uses a guided four-step structure, plain-language labels and live feedback so users can understand the estimate without being overwhelmed by every calculation at once.

Guided instead of one long form

Household, finances, property and mortgage assumptions are separated into manageable steps with visible progress.

Results remain visible

A sticky desktop summary and persistent mobile estimate keep the customer connected to the outcome while editing inputs.

Progress bars instead of gauges

Horizontal ratio bars make GDS and TDS limits easier to compare and avoid decorative visualizations that can obscure the data.

Transparent assumptions

Rate source, live-versus-backup status, the raw Bank of Canada series IDs and the qualification rate are all one click away, so the result feels explainable rather than arbitrary.

No fabricated defaults

Every field starts at zero instead of a plausible-looking example. Nothing pre-fills income, debts or a purchase price, so a result only ever reflects what the customer actually entered.

Correct on the edge cases, not just the happy path

30-year amortizations are only offered where the rule actually permits them, PST on mortgage-default insurance is itemized as its own cash cost, and "Prime Rate" is labelled for what it is — set by the banks, published by the Bank of Canada.

Colour system

A professional palette with one energetic accent.

Deep plum#21102D
Primary purple#48295F
Lime accent#A3CD39
Page surface#F8F5FA
Card surface#FFFFFF
Interactive demo

See the complete mortgage journey.

Open the working calculator to explore the guided form, an editable results panel, live Bank of Canada rate state and a fully itemized qualification and closing-cost breakdown.

This project is an educational portfolio demonstration. Results are estimates and do not represent mortgage approval, financial advice or a lender commitment.

Ontario mortgage demo