Real Estate

An interactive platform for exploring apartments on the building view and floor plans, where the plan and the list filter each other.

{Industry}: Real estate
{Type}: Interactive web application
{Stack}: ReactJS, SVG, WordPress
{Design}: Implemented from Figma
{Year}: [YEAR]
{Shown on}: Apollo Residence

{Building} — the render next to filters and the full apartment list

{Filtered} — only sold flats stand out on the plan, and the list shows the same three

{Overview}

Choose an apartment by looking at the building

Buyers start from the building view, move to a floor plan and open a single apartment. They can filter by status, floor, area and number of rooms, or click the SVG flat shapes directly on the plan.

{What I built}

The user interface in ReactJS, following detailed Figma designs
Handling of SVG objects for interactions on the building and floor layouts
A "two-way" search and filter system with real-time updates
A customised WordPress template for managing apartment listings and details

{Highlight: Two-way filtering}

The plan and the list stay in sync

Changing a filter recolours the flats on the plan and updates the list at the same time. Each flat is an SVG shape coloured by its status: green for available, yellow for reserved and red for sold.

{Backend} WordPress Holds the general and detailed information for each apartment.
→
{Front-end} React state Status, floor, area and room filters, updated in real time.
⇄
{View} SVG plan + list Both show the same result, and both lead to the apartment.