Kontekst
Metaresidence Apartamenty potrzebowało sposobu prezentacji dostępnych apartamentów, który wykracza poza statyczną listę lokali. Potencjalni kupujący chcą zobaczyć, gdzie dany apartament znajduje się w budynku, jaki ma układ i co oferuje, zanim skontaktują się z zespołem sprzedażowym.
Z drugiej strony zespół sprzedażowy potrzebował możliwości zarządzania tymi samymi danymi bez edycji kodu: dodawania apartamentów, aktualizacji dostępności, zmiany cen i podmiany rzutów wraz z rozwojem projektu. Projekt Figma został przygotowany przez grafika, a ja odpowiadałem za pełne wdrożenie techniczne, od warstwy bazy danych po interaktywny frontend.
Z drugiej strony zespół sprzedażowy potrzebował możliwości zarządzania tymi samymi danymi bez edycji kodu: dodawania apartamentów, aktualizacji dostępności, zmiany cen i podmiany rzutów wraz z rozwojem projektu. Projekt Figma został przygotowany przez grafika, a ja odpowiadałem za pełne wdrożenie techniczne, od warstwy bazy danych po interaktywny frontend.
Interaktywny wybór apartamentów
Selektor został oparty o rzut kondygnacji z klikalnymi punktami, po jednym dla każdego apartamentu na danym piętrze. Po najechaniu na punkt użytkownik widzi podświetlenie lokalu, a po kliknięciu otwiera się podgląd z rzutem apartamentu, układem pomieszczeń, powierzchnią i ceną.
Interfejs został zbudowany w Vue.js i korzysta z danych dostarczanych przez backend Laravel. Pozycje punktów, parametry apartamentów i rzuty są zarządzane z poziomu CMS-a, dzięki czemu zmiany wprowadzone w panelu administracyjnym są widoczne na frontendzie bez ręcznej edycji markup-u.
Interfejs został zbudowany w Vue.js i korzysta z danych dostarczanych przez backend Laravel. Pozycje punktów, parametry apartamentów i rzuty są zarządzane z poziomu CMS-a, dzięki czemu zmiany wprowadzone w panelu administracyjnym są widoczne na frontendzie bez ręcznej edycji markup-u.
Dedykowany CMS z FilamentPHP
Zamiast korzystać z generycznego CMS-a, panel administracyjny został zbudowany w FilamentPHP na bazie Laravela. Dzięki temu powstał backend dopasowany do realnego sposobu pracy zespołu sprzedażowego: kondygnacje, apartamenty, parametry i statusy są uporządkowane w zasobach zaprojektowanych pod konkretną domenę projektu.
Edycja apartamentu w Filamencie aktualizuje publiczny selektor, więc dane prezentowane kupującym pozostają spójne z tym, co widzi zespół sprzedażowy. Projekt pokazuje też FilamentPHP nie tylko jako narzędzie do systemów wewnętrznych, ale jako pełnoprawny CMS zasilający dynamiczny publiczny frontend.
Edycja apartamentu w Filamencie aktualizuje publiczny selektor, więc dane prezentowane kupującym pozostają spójne z tym, co widzi zespół sprzedażowy. Projekt pokazuje też FilamentPHP nie tylko jako narzędzie do systemów wewnętrznych, ale jako pełnoprawny CMS zasilający dynamiczny publiczny frontend.
Zakres techniczny
Aplikacja została zbudowana w Laravelu, z FilamentPHP jako panelem administracyjnym i Vue.js jako warstwą interaktywnego frontendu. Modele bazy danych opisują domenę apartamentów, w tym współrzędne punktów na rzucie, rzuty kondygnacji, specyfikacje lokali i statusy dostępności.
Selektor Vue komunikuje się z Laravelem przez uporządkowaną warstwę danych, renderując punkty interaktywne i podglądy apartamentów na podstawie aktualnych danych z backendu. Układy frontendowe są responsywne, a selektor został dostosowany do działania zarówno na desktopie, jak i na mniejszych ekranach.
Selektor Vue komunikuje się z Laravelem przez uporządkowaną warstwę danych, renderując punkty interaktywne i podglądy apartamentów na podstawie aktualnych danych z backendu. Układy frontendowe są responsywne, a selektor został dostosowany do działania zarówno na desktopie, jak i na mniejszych ekranach.
Efekt
Dla Metaresidence projekt zastąpił statyczną listę apartamentów realnym narzędziem: wizualnym selektorem dla kupujących i uporządkowanym CMS-em dla zespołu sprzedażowego.
