Od hotelu Nobu po klub sportowy - pięć serwisów grupy SAO na wspólnej architekturze

SAO nie jest pojedynczą marką z jedną stroną internetową. To rozwijający się ekosystem projektów kierowanych do różnych odbiorców i realizujących różne cele biznesowe. Poszczególne serwisy różnią się strukturą informacji, identyfikacją wizualną, rodzajem publikowanych treści i zakresem funkcjonalności. Jednocześnie wszystkie muszą być wygodne w codziennym zarządzaniu przez jeden zespół.

Wyzwaniem było więc nie tylko stworzenie kilku niezależnych stron, ale zaprojektowanie systemu, który:

• pozwoli zarządzać pięcioma serwisami z jednego miejsca,
• zachowa niezależność wizualną i funkcjonalną każdej marki,
• umożliwi samodzielne tworzenie i edycję podstron,
• ograniczy konieczność angażowania developerów przy zmianach contentowych,
• pozwoli ponownie wykorzystywać sprawdzone elementy,
• będzie gotowy na dalszy rozwój ekosystemu SAO.

Nie chcieliśmy tworzyć pięciu identycznych stron opartych na jednym szablonie. Zależało nam na wspólnym fundamencie technologicznym, który jednocześnie pozwoli każdej marce zachować własny charakter.

Zbudowaliśmy architekturę multisite, obsługującą wiele domen i zasilaną z jednego headless CMS-a w Strapi.

• Frontend - Next.js w architekturze App Router i React.js, warstwa wizualna na Tailwind CSS, ikony na lucide-react.
• Backend i CMS - Backendem jest Strapi headless CMS, w którym trzymamy treść wszystkich serwisów grupy.
• Wielojęzyczność - Routing od pierwszego dnia obsługuje wersje językowe. Korzysta z tego serwis Nobu, prowadzony po angielsku i po polsku, ale mechanizm jest gotowy na każdą kolejną domenę.
• Analityka - Serwisy komercyjne spięliśmy z Google Tag Managerem, GA4, Microsoft Clarity, każdy z osobnymi identyfikatorami.
• Biblioteka komponentów - Strony nie są sztywnymi szablonami z polami do wypełnienia. W Strapi przygotowaliśmy bibliotekę gotowych sekcji, z których klient składa podstronę jak z klocków, w dowolnej kolejności.

• Architektura multisite - jedna aplikacja Next.js obsługująca wiele domen i wiele marek. Kolejny serwis grupy to podpięcie domeny i uzupełnienie treści, bez osobnego wdrożenia.
• Jeden panel Strapi dla całej grupy - pięć serwisów zarządzanych z jednego miejsca, przez jeden zespół, na jednych uprawnieniach.
• Biblioteka komponentów zamiast sztywnych szablonów - kilkanaście gotowych typów sekcji, z których klient buduje dowolną podstronę i ustawia je w wybranej kolejności. Ten sam zestaw klocków obsługuje wszystkie serwisy grupy.
• Formularze kontaktowe i zapisu - spójny komponent formularza działający na wszystkich domenach.
• Wspólna biblioteka mediów - zdjęcia i materiały wideo wgrywane raz, wykorzystywane na dowolnym serwisie grupy.
• Gotowość wielojęzyczna - routing obsługujący wersje językowe na każdej domenie, wykorzystany dziś przez Nobu Kraków.

• Sprawne zarządzanie pięcioma niezależnymi serwisami z poziomu jednego, centralnego panelu CMS.
• Większa elastyczność w tworzeniu i rozwijaniu podstron dzięki bibliotece reużywalnych komponentów w Strapi.
• Skrócenie czasu potrzebnego na publikację zmian i nowych treści bez konieczności angażowania zespołu developerskiego.
• Zachowanie indywidualnego charakteru każdej marki przy wykorzystaniu wspólnego zaplecza technologicznego.
• Skalowalna architektura umożliwiająca rozwój kolejnych serwisów i funkcjonalności w ramach jednego ekosystemu.

W przypadku SAO nie chodziło o stworzenie kilku stron internetowych jako niezależnych realizacji. Projekt jest kolejnym etapem naszej współpracy z marką. Po wcześniejszym wdrożeniu SAO Life, rozszerzyliśmy cyfrowy ekosystem SAO o wspólne zaplecze do zarządzania serwisami internetowymi. Celem było zaprojektowanie systemu, który pozwoli zarządzać rozwijającym się portfolio marek w sposób spójny, wygodny i skalowalny. Dlatego zbudowaliśmy centralny CMS w Strapi obsługujący pięć serwisów oraz przygotowaliśmy bibliotekę komponentów umożliwiających składanie i rozwijanie podstron bez konieczności programowania każdego widoku od początku.

Zespół SAO otrzymał jedno miejsce do zarządzania całym ekosystemem, ale bez ograniczania indywidualnego charakteru poszczególnych marek. To podejście pozwala łączyć dwie rzeczy, które często stoją ze sobą w sprzeczności: centralizację zarządzania i swobodę tworzenia niezależnych doświadczeń cyfrowych.

W efekcie kolejne strony i podstrony nie wymagają budowania technologicznego zaplecza od zera. Powstają na fundamencie, który może rozwijać się razem z portfolio SAO.