Interactive Real Estate

Interactive Real Estate is a WordPress plugin built for real estate developers, construction companies, and property agencies that need to present new developments online

Comment

Inspiration

Real estate developers sell apartments before the building even exists, yet most property websites still show a flat render and a long PDF price list. Buyers have to cross-reference floor numbers, unit codes and availability by hand. I wanted buyers to simply click on the building and see what's available, right on the developer's own WordPress site.

What it does

Interactive Real Estate is a WordPress plugin that turns any building render into a clickable, interactive sales tool.

  • Draw SVG shapes over a building image to map blocks → floors → apartments
  • Visitors hover and click to see availability (available / reserved / sold), price, area and floor plans
  • Filterable flats list with floor, price and area range sliders
  • 360° building viewer (add-on) with polygon overlays that follow the rotation
  • Reservation form and price history (add-on) for each unit
  • Embedded anywhere with simple shortcodes like [irep_project] and [irep_flats], with a dark mode option
  • Fully translatable

How I built it

  • Frontend: Vue 3 + TypeScript + Tailwind CSS, with Pinia for state
  • Shared component library built once and consumed by the admin panel, the shortcode bundle and the 360° module
  • Admin panel: a Vue app inside wp-admin, using @wordpress/components for a native Gutenberg look
  • Backend: PHP, the WordPress REST API, AJAX and custom database tables for projects, blocks, floors and flats
  • Monorepo managed with pnpm workspaces; marketing site built with Nuxt 3
  • Licensing via Freemius

Challenges I ran into

  • Theme conflicts: WordPress themes ship aggressive global CSS. I prefixed every Tailwind class with ire-, disabled preflight, and avoided native <button> elements so themes can't break the UI.
  • 360° polygon tracking: keeping drawn shapes aligned with the building while the user drags through dozens of frames, including snapping and day/night image sets.
  • Dark mode without Tailwind's dark variant: a CSS cascade layer that remaps light utilities whenever the shortcode is rendered with dark="1".
  • Filters that "show everything by default" until the user actually moves a slider, even though ranges are computed dynamically from the data.

Accomplishments that I'm proud of

  • A non-technical sales team can map an entire residential complex in minutes, with no developer needed
  • One shared component library powers three different bundles
  • It works inside almost any WordPress theme without style collisions

What I learned

  • How to build a modern Vue 3 app that lives safely inside WordPress
  • That shipping a plugin to unknown themes is mostly a defensive CSS problem
  • That real estate buyers care most about speed: availability and price within one click

What's next for Interactive Real Estate

  • More add-ons (CRM integrations, lead routing to sales teams)
  • Better analytics on which units and floors visitors look at most
  • More layout templates and a guided setup wizard
  • Expanding the 360° viewer with richer interactions

🔗 Website: https://www.ireplugin.com

Share this project:

Updates