Boston Real Estate: Map and Search

A real estate agent from Boston, USA, asked me to help with improving their listings site maps and search functionality, as well as bringing it up to date with the latest features in Next.js and React. They specifically asked for custom polygon searches for people looking to buy a house in a specific neighbourhood or custom drawn area. Additionally, they asked me to propose a well-rounded app database ecosystem and that lead to a full migration to Supabase for auth and data storage.

I implemented a full PKCE auth flow with Supabase SSR package, with sign ups, login, password reset, email verification. Next.js server actions were utilized for this, as well as progressive enhancement in Auth form (which means they work without JS).

I completed a full JavaScript to TypeScript migration in crucial parts of the existing application and added typings and zod schemas for real estate API source responses. Utilizing React Server Components was a big part of this optimization effort. The search UI also got a big facelift (listing type, property type, price, beds and baths, mobile view toggle) with a new save-search dialog. An advanced search drawer revealed city and neighbourhood selects, listing and property type, lot size, sqft, year built, parking and garage.

For the maps, the Mapbox GL JS draw plugin was used to quickly add drawing functionality to the existing map, that triggered a parameter change and a server-side rerender of the search results page. Auto-search on pan was added as a checkbox on top of the map. URL state was chosen so that searches would be shareable and restorable, and the same params would feed the saved-search feature.

Finally, the map pins for listings were substituted with stretchable symbol-layer markers using icon-text-fit from Mapbox style spec, and styled cluster markers were also added. The listings got a new ’Favourite” button that placed them in a new bookmarks list.