Web Design & DevelopmentEstate agents · 2026
John Grants Estate Agents
A bespoke estate agent website for John Grants in Edmonton, North London, with listings connected to their iamproperty CRM, saved properties, area guides, a news section and a built-in CMS.
Visit live siteDesigns
Ten views of the build
Key features
What went into the work
Property listings connected to their iamproperty CRM, so the website always matches the office's own records
Enquiry forms that send each message to the right team, with separate email addresses for sales, lettings and other enquiries
Search and filter every property for sale and to let, with saved properties and saved searches (a wish list) to come back to
Property pages built to convert: photos, key features, floorplan, energy rating, map, mortgage and stamp duty calculators and an enquiry form
SEO-optimised content: 18 area guides with FAQs, structured data on properties and reviews, and a full sitemap
A news and advice section with topic, date and search filters, and more than 30 articles for buyers, sellers, landlords and tenants
A fully integrated CMS with editable sections, so the team updates pages, area guides and news themselves
Bespoke design, fully responsive on mobile, tablet and desktop
A reviews page showing their GetAgent rating alongside client reviews, with review markup for search engines
Technology used
Tools & technology
- Next.jsNext.js is a toolkit for building websites that load quickly and are easy for Google to read.
- ReactReact is the code library that builds the site's screens from small, reusable pieces, so everything responds instantly when you click.
- TypeScriptTypeScript is JavaScript with built-in checks, so mistakes are caught while the site is being built rather than by visitors.
- Tailwind CSSTailwind CSS is a styling toolkit that keeps the design consistent and the site light and fast.
- SupabaseSupabase is the online database behind the site, where content, pages and enquiries are stored securely.
- VercelVercel is the hosting service that publishes the site and delivers it quickly to visitors around the world.
- GitHubGitHub keeps every version of the site's code, so changes are tracked and can be rolled back if something goes wrong.
- ClaudeClaude is an AI assistant that helps write, review and test the site's code.
The project
Project overview
John Grants is an independent estate agency in Edmonton, North London, selling, letting and managing property across Enfield and Hertfordshire since 1992.
I built their first website in 2021 on WordPress. In 2026 I rebuilt it from scratch as a bespoke site, designed around what their buyers, sellers, landlords and tenants do most: search for a home, save the ones they like, get in touch with the right team and read local advice.
Property listings are connected to their iamproperty CRM, so the website matches the office's own records. Enquiry forms send each message to the right inbox, with separate email addresses for sales, lettings and other enquiries. Visitors can search and filter every property, save favourites and searches to a wish list, and use mortgage and stamp duty calculators on each property page.
The site also has 18 area guides with FAQs, a news and advice section, and a built-in CMS with editable sections, so the John Grants team can update pages and publish articles themselves. The design is fully responsive on mobile, tablet and desktop.
Our role
- Website redesign and rebuild (first built in 2021)
- Rebuild from WordPress to Next.js
- Bespoke design and page structure
- iamproperty CRM connection
- Property search, saved properties and enquiry routing
- Built-in CMS, area guides and news
- SEO set-up, responsive build and launch
2021
First built
2026
Rebuilt
18
Area guides
- Replaced the WordPress site with a bespoke site and a built-in CMS the team edits themselves
- Listings now come from their iamproperty CRM, so nothing is typed in twice
- Enquiries reach the right team's inbox depending on what the visitor chose
Design and structure
How the site is put together
The numbers, colours and type behind John Grants Estate Agents.The numbers, colours, type and page map behind John Grants Estate Agents.
- 146
- pages
- 7
- page types
- 45
- news pages
Colour palette
- #07162C
Navy
Header, footer and headings
- #1D3559
Slate blue
Buttons and links
- #61728B
Light slate
Secondary text and tints
- #F8FAFD
Canvas
Page background
- #FAFAFA
Mist
Cards and panels
Typography
Plus Jakarta Sans
Headings and body text
Sellers, buyers, landlords and tenants
Regular to SemiBold
Page map
Every page grouped by what it is for. Read it from the left: the home page, then each section it leads to, then the pages inside that section. The colour shows the page type.
Home
Home
Find a home
Products
25 listings
inside Find a home
Selling
Products
9 pages
inside Selling
Buying
Products
10 pages
inside Buying
Renting
Products
9 pages
inside Renting
Landlords
Products
16 pages
inside Landlords
Areas we cover
Local
18 pages
inside Areas we cover
News
Advice
45 pages
inside News
Reviews
Proof
About
Company
Careers
Company
Contact
Enquire
Privacy policy
Legal
Terms and conditions
Legal
Taken from the live site, October 2026
What John Grants Estate Agents said
“Thank you Suley. Our new website at John Grants is absolutely amazing. It’s been a pleasure working with you on this project.”
Soner MustafaJohn Grants Estate Agents
Enjoyed this project? Let's create yours.
Tell me about your project and I'll come back with an honest recommendation, timeline and price.
Start a project