Lou Berkovits Real Estate

An interactive platform showcasing the listings of one of Toronto’s top real estate agents.

Project Description

The project is composed of two parts: an app that pulls down properties from MLS and a custom Wordpress site for the agent. We were granted access by the Toronto Real Estate Board to be able to retrieve property data listed in MLS.

Design Elements

Pulling inspiration from AirBnb and PadMapper, we designed a Real Estate website that was focused on clean aesthetics and ease of use. You're searching for a needle in a haystack, so having the most pertinent data available, but not so much to distract and slow the search, is critical.

Typography & Colour

  • Aa
    • abcdefghijklmnopqrstuvwxyz
    • abcdefghijklmnopqrstuvwxyz
    • 0123456789

    Proxima Nova - Regular, Medium, Bold

  • Malibu

    • HEX: #63ABFF
    • RGB: (99, 171, 255)
  • San Juan

    • HEX: #2C4D74
    • RGB: (44, 77, 116)
  • Keppel

    • HEX: #3EB991
    • RGB: (62, 185, 145)
  • #63ABFF
  • #2C4D74

Web & UI Design

The theme makes use of the MLS properties, as it allows people to search just as they would on something like Realtor.ca. We've provided visitors with all of the basic filters and more. We've also given Lou a blog, a newsletter, a resources section with some standard forms for both buyers and sellers, and the ability to post their sold properties, as well as exclusive properties the agent wants to keep off of MLS.

Our Wordpress Theme

The theme is based on our standard boilerplate but incorporates a whole bunch of unique functionality to control the display of the properties and neighbourhoods.

Based on our personal experiences of both renting and buying property, we've structured the site around one, primary feature - saving properties to a shopping cart style favourites list. Every property has a "Book a Showing" button that allows you to save the property in a list and then send the complete list to the agent so they can book showings for you.

Website Development

The heart of this project is the app that fetches and sanitizes the properties. It leverages a common, open sources library PHRets to interact with the TREB IDX feed. We also make use of the Google Maps API quite a bit. We're also integrating Walkscores, Google Street View, a display of some nearby businesses using the Yelp API and some calculators for potential buyers to estimate their expenses.

Framework

Languages

  • CSS
  • HTML
  • Javascript
  • PHP

Tools

  • jQuery
  • SASS
  • PHPMailer
  • PHRets

API

  • Mailchimp
  • Google Maps
  • Walkscore
  • Yelp

Third Party

  • MLS

Approach

  • Mobile First
  • Responsive

A Live MLS Feed

Once we pull down the properties from MLS, we run them through a series of tasks.
  • Sanitize Properties

    We split and save the data into multiple tables for both manageability and performance.

  • Geolocate Properties

    We use the Google Maps API to geolocate the property and get its longitude and latitude.

  • Get Property Images

    We make a separate request to the TREB network to fetch images for each property and then store them on our server.

  • Assign Property Neighbourhood

    We assign each property a neighbourhood by checking their longitude and latitude.

See What We Did for Duet PR