Jak jsme pro Fragmento.cz postavili headless aplikaci ve Vue.js

Společnost Fragmento přichází na trh s unikátním modelem vlastnictví nemovitostí. Místo toho, aby investoři museli kupovat celou nemovitost, jim Fragmento umožňuje pořídit si podíl v prázdninových vilách a apartmánech v exotických lokalitách, jako je Bali, Španělsko či Filipíny. Za zlomek ceny tak klienti získávají pasivní příjem a možnost nemovitost využívat pro vlastní luxusní dovolenou.

Klient startoval nový projekt. Měl v rukou atraktivní produkt a hotový grafický návrh ve Figmě. Potřeboval ale technologického partnera, který grafiku oživí.

Největší technickou výzvou bylo souběžné fungování s externím vývojářem. Ten pro klienta vyvíjel backend (CRM pro správu nemovitostí, jejich podílů, smluv, poptávek a také výpočtů finančního vyhodnocení pro klienty). Krabicové řešení nebo systémy typu Webflow nepřipadaly v úvahu. Potřebovali jsme absolutní kontrolu nad kódem a systém, který se dokáže plynule a bezpečně napojit na cizí databázi.

‍

Pro vývoj webu jsme zvolili headless přístup. Proč to bylo pro tento projekt to nejlepší možné řešení, nejlépe vysvětluje přímo náš vývojář:

„Kouzlo headless architektury spočívá v absolutní nezávislosti. Zatímco externí specialista stavěl robustní CRM, my jsme se mohli naplno věnovat frontendu. Obě vrstvy se bezpečně potkávají a komunikují výhradně přes API. Nešlo ale jen o slepé předávání dat – od prvního dne jsme fungovali v úzké synergii, společně navrhovali datovou strukturu a na pravidelných callech web ladili. Díky tomuto nastavení teď stejně efektivně pokračujeme i při vývoji nového klientského portálu.“
– Tomáš Svoboda, programátor.

• Technologie Vue.js a Nuxt.js: Pro vývoj jsme zvolili moderní framework Vue.js. Abychom zajistili, že takto postavený JavaScriptový web budou milovat i vyhledávače (Google, Seznam), nasadili jsme framework Nuxt.js, který řeší tzv. Server-Side Rendering (SSR). Web je díky tomu rychlý a zároveň také indexovatelný pro SEO.
• Dynamické Widgety: Klient nechtěl být při každé změně textu závislý na programátorovi, a proto jsme zvolili systém widgetů. V praxi si klient může web obsahově poskládat přesně podle svých představ a mít nad obsahem plnou kontrolu. Editaci snadno provede ve zmíněném CRM a pro ještě větší ulehčení jeho práce se některé společné části obsahu, jako například informace o lokalitách, načítají z jednoho místa.

Během podzimu jsme projekt úspěšně naprogramovali a těsně před Vánocemi šel web do světa. Co řešení klientovi reálně přineslo?

Live výpis a blesková filtrace

Díky kombinaci Vue.js, Nuxt.js a API komunikace jsme vytvořili rychlý výpis nemovitostí. Když investor klikne na filtr (např. lokalitu Bali), nabídka se okamžitě přizpůsobí. Filtrace funguje v reálném čase, interaktivně a plynule, což zlepšuje uživatelský zážitek.

Interaktivní prvek

Přímo na detailu nemovitosti je speciální posuvník s cenou. Investor posunutím kolečka v reálném čase vidí, jak se cena podílu vyvíjí v čase. Okamžitě tak zjistí, o kolik peněz přišel, když nákup odkládal.

Klientský portál

Webem to nekončí. V návaznosti na web aktuálně vyvíjíme klientský portál. Jedná se o zabezpečenou zónu pro investory. Každý majitel podílu zde uvidí své rezervace, může své dny nabídnout k pronájmu a napřímo komunikovat s podporou Fragmento.

Mobilní aplikace

Díky zvolené headless architektuře a frameworku Nuxt.js je celý ekosystém připravený pro budoucí tvorbu nativní mobilní aplikace pro iOS a Android.