Background
Metaresidence Apartamenty needed a way to present available apartments that goes beyond a static list. Buyers expect to see where a unit sits in the building, what shape it has and what it offers, before they get on the phone with a sales team.
On the other side, the sales team needed to manage that same data without touching code: adding apartments, updating availability, changing prices and swapping floor plans as the project evolved. The Figma design came from a graphic designer; I handled the full technical build, from the database layer up to the interactive frontend.
On the other side, the sales team needed to manage that same data without touching code: adding apartments, updating availability, changing prices and swapping floor plans as the project evolved. The Figma design came from a graphic designer; I handled the full technical build, from the database layer up to the interactive frontend.
Interactive apartment selector
The selector is built around a floor plan with clickable hotspots, one for each apartment on the floor. Hovering over a hotspot highlights the unit; clicking it opens a preview with the apartment’s floor plan, room layout, area and price.
The interface is built in Vue.js, fed by data from the Laravel backend. Hotspot positions, apartment specs and floor plans are all driven by the CMS, so updates from the admin panel reflect on the frontend without manual changes to the markup.
The interface is built in Vue.js, fed by data from the Laravel backend. Hotspot positions, apartment specs and floor plans are all driven by the CMS, so updates from the admin panel reflect on the frontend without manual changes to the markup.
Custom CMS with FilamentPHP
Instead of relying on a generic CMS, the admin panel is built with FilamentPHP on top of Laravel. The result is a tailored backend that mirrors how the sales team actually thinks about the project: floors, apartments, specs and statuses, all structured in resources designed around the domain. Editing an apartment in Filament updates the public-facing selector, so the data shown to buyers stays in sync with what the sales team sees.
FilamentPHP is often used for internal tools, and the project shows it working as a full client-facing CMS powering a dynamic public frontend.
FilamentPHP is often used for internal tools, and the project shows it working as a full client-facing CMS powering a dynamic public frontend.
Technical scope
The application is a Laravel build with FilamentPHP for the admin panel and Vue.js for the interactive frontend. Database models cover the apartment domain in detail, including hotspot coordinates, floor plans, specifications and availability states.
The Vue selector communicates with Laravel through a structured data layer, rendering hotspots and previews from live backend data. Frontend layouts are responsive across breakpoints, with the selector adapted to work on smaller screens as well as on desktop.
The Vue selector communicates with Laravel through a structured data layer, rendering hotspots and previews from live backend data. Frontend layouts are responsive across breakpoints, with the selector adapted to work on smaller screens as well as on desktop.
Closing notes
For Metaresidence, the project replaced a static apartment listing with a real tool: a visual selector for buyers, and a structured CMS for the sales team.
