Pervaj Ahmed TuhinUpdated How We Built SPH Properties UK's New Site
The SPH Properties UK site is one Next.js page that holds property search, a live map, offices, a valuation form and a confidential enquiry form. This is how we built it, and why.
Why build it as one page?
A client looking for a home moves back and forth. They search, open a home, check the map, then go back to the results. We built every part of the site as a view inside one page, so each move is instant and nothing reloads.
The views are:
- Search, with buy and rent, quick searches for London, the Cotswolds and Surrey, and browsing by type of home.
- Property details, with saved favourites.
- Offices by region, and services for buyers, sellers and landlords.
- Insights and research articles.
- A valuation request form and a confidential enquiry form.
How does the map work, and what if it fails?
Listings appear on Google Maps, through the @vis.gl/react-google-maps library. A client sees where a home sits before they ask about it.
The map needs a Google Maps key. If the key is missing or the map service fails, the page shows a simple map grid with zoom controls instead. The page never shows a blank space or an error.
Where does the content live?
Property details and insights sit in their own data file, apart from the page code. The page reads from that file, so the content can change without touching the layout.
How does it work on a phone?
The header turns into a menu drawer on small screens. Search, the map, the forms and every other view were built and checked at phone width. A row of property types scrolls on its own and pauses when someone hovers over it.
What is it built with?
- Next.js 15, React 19 and TypeScript.
- Tailwind for styling, and the Motion library for movement.
- Google Maps through the
@vis.gl/react-google-mapslibrary. - Hosted on Vercel.
First published
Pervaj Ahmed Tuhin is the Co-Founder and Chief Technology Officer of Ravenence, leading how the sites are built and structured.
