Case study
A home-loan site that does the maths for you.
BondMakers submit a buyer’s application to every major South African bank and take their fee from whichever one wins the bond. The site had to make that free service believable, pre-qualify buyers in a couple of minutes, and answer the money questions before anyone picks up the phone.
01The brief
What the business needed the site to do:
- Explain a free service without sounding too good to be true
- Pre-qualify a buyer in a couple of minutes
- Calculators people actually come back to use
- Guidance for first-time buyers, the self-employed and investors
- Fast on a phone, since that is where property browsing happens
- Runs on the cPanel hosting they already pay for
02The hard part
A home-loan calculator that is out of date is worse than having no calculator at all. People plan around these numbers. They work out what they can offer on a house, what the transfer costs will be, whether they can afford the bond at all — and then they walk into a bank with that figure in their head.
Two things in South Africa move underneath those sums. The prime lending rate changes whenever the Reserve Bank’s Monetary Policy Committee decides it should, and the transfer duty brackets are re-cut in the Budget most years. A site with five calculators has a lot of places for a stale number to hide.
The second constraint was hosting. This is a React application, but it had to run on ordinary shared cPanel hosting — no Node process, no container, nothing to keep alive at three in the morning.
By the numbers
How it adds up.
03What we built
An eight-page site with a working calculator suite at the centre of it, and the numbers that drive those calculators kept in one place.
Five calculators, not one
Monthly repayment, affordability, transfer and bond costs, the effect of paying extra, and a side-by-side rate comparison. Each one charts its result rather than just printing a figure, so you can see how the balance falls over twenty years.
One number to change
The prime rate and the transfer duty brackets are single values in a configuration file, not figures typed into each page. After an MPC announcement or a Budget speech, one edit updates every calculator, every quoted example and the rate badge on each page.
Pre-qualification in a couple of minutes
A short guided form that collects only what a bond originator genuinely needs to start, with a soft credit check that does not touch the applicant’s score. Submissions arrive by email through a small PHP handler, with spam protection.
A React app on plain shared hosting
The site is built with Next.js and React, then exported to flat HTML, CSS and JavaScript. It uploads into public_html like any static site — no Node runtime on the server, no container, nothing to restart. The client keeps the hosting they already had.
The unglamorous fix that made it work
Next builds its page-prefetch files into nested folders, but a browser asks for them under dot-joined names — so on Apache every prefetch quietly returned a 404 and navigation fell back to a full page load. A small build step renames them to what the browser actually requests. Nobody sees it; the site just feels instant.
Built for the phone in the queue
Property gets browsed on a phone, so the calculators were designed for a thumb first: full-width sliders, numeric keypads on the money fields, and a pre-qualify button pinned to the bottom of the screen on every page.
A closer look
Around the site.
04Under the hood
A current React stack, deliberately compiled down to files any web server can serve. The client gets the benefits of a modern application without inheriting a server to look after.
Rates and duty brackets live in version control alongside the code, so every change to a published figure is dated and attributable — which matters when the numbers are financial.
Need something like this?
Websites start from R3 000, and every project gets a fixed, written quote before any work begins.