Zobacz nasze projekty
działające w praktyce

Dlaczego ten stack

Medusa.js (w bazie wiedzy KODA Vault)

Katalog opisuje konkretne sztuki i komplety o parametrach zależnych od rodzaju towaru. Medusa trzyma je jako ustrukturyzowane dane produktu z własnym formularzem w panelu, a integracja z BaseLinkerem, historia cen pod Omnibus i wysyłka liczona wagą to moduły tego samego backendu.

Next.js (w bazie wiedzy KODA Vault)

Front w Next.js i React buduje z danych Medusy własny indeks katalogu, więc filtry po rozstawie śrub, ET, roczniku DOT i bieżniku działają od razu, bez osobnej usługi wyszukiwania. Middleware przekierowuje przy tym stare adresy z Shopify.

BaseLinker (w bazie wiedzy KODA Vault)

BaseLinker prowadzi magazyn i sprzedaż na Allegro i OLX, więc sklep nie liczy stanów osobno, tylko się z nim synchronizuje. Nasz moduł w Medusie kolejkuje operacje, pilnuje limitów API BaseLinkera i zapisuje każdą wymianę danych w dzienniku.

Allegro (w bazie wiedzy KODA Vault)

Marki i modele opon oraz producentów felg podpowiadamy w panelu z parametrów kategorii Allegro, więc wartości na karcie pasują do parametrów oferty. Trwające oferty odczytujemy cyklicznie i przy każdej pozycji widać, czy jest wystawiona.

OLX (w bazie wiedzy KODA Vault)

Każda pozycja jest unikatowa, więc nie może sprzedać się dwa razy. OLX jest podpięty w tym samym katalogu BaseLinkera co Allegro, dlatego ogłoszenie, oferta i sklep korzystają z jednego stanu, bez osobnej synchronizacji pod każdy serwis.

Railway (w bazie wiedzy KODA Vault)

Backend Medusy, front w Next.js, PostgreSQL i Redis stoją w jednym projekcie Railway jako stale działające procesy. Zadania synchronizacji chodzą według harmonogramu, front trzyma indeks katalogu w pamięci procesu, a zdarzenia i workflow na Redisie przeżywają wdrożenie.

Co to daje w praktyce

• Kupujący filtruje po roczniku DOT, głębokości bieżnika, rozstawie śrub i ET, bo to osobne pola każdej pozycji, a nie fragment tytułu.
• Opona sprzedana na Allegro lub OLX w ciągu kilku minut przestaje być dostępna w sklepie i nikt nie musi zdejmować jej ręcznie.
• Nową pozycję dodaje się w panelu jednym formularzem dopasowanym do rodzaju towaru, a karta w BaseLinkerze powstaje od razu, ze zdjęciami i parametrami.
• Stare adresy z Shopify, także te z kampanii, przekierowują kodem 301 do właściwej kategorii z zachowanym filtrem.

Integracje i automatyzacje

• Dobór kół po aucie

  Marki, modele, generacje, roczniki i fabryczne rozmiary kół pochodzą z bazy wheel-size.com. Front pyta o nie przez serwer z pamięcią podręczną, który spolszcza nazwy modeli i podstawia rozmiary prosto do filtra katalogu.

• Stany z BaseLinkera

  Co kilka minut zadanie czyta katalog BaseLinkera i przepisuje różnice stanów do Medusy po identyfikatorze karty. Dolicza przy tym rezerwacje otwartych zamówień, żeby przebieg nie zabrał towaru odłożonego pod zamówienie.

• Zamówienia do BaseLinkera

  Zamówienie ze sklepu najpierw ląduje w kolejce w naszej bazie, a potem workflow Medusy wysyła je do BaseLinkera, więc jego awaria nie blokuje sprzedaży, a niepewny wynik nie tworzy duplikatu. Z powrotem wraca status i numer przesyłki, który wyzwala wiadomość o nadaniu paczki.

• Nocne uzgodnienie katalogów

  Co noc porównujemy oba katalogi: stany, ceny, SKU oraz karty, które po stronie BaseLinkera przybyły albo zniknęły. Rozbieżności trafiają do panelu z decyzją przy każdym wierszu, a ceny zawsze zatwierdza człowiek.

Dlaczego ten stack

Medusa.js (w bazie wiedzy KODA Vault)

Gabinety i klienci detaliczni kupują w tym samym sklepie na innych warunkach. W Medusie to grupy klientów z własnymi cennikami i osobne kanały sprzedaży, a przeliczenie koszyka po zalogowaniu dopisaliśmy jako własny workflow, bez zmian w rdzeniu platformy.

React (w bazie wiedzy KODA Vault)

Sklep ma kilka ścieżek płatności, koszyk sprawdzający stany na bieżąco i konto firmowe z własnymi cenami. Zbudowaliśmy go w React z TanStack Router, a dane z API Medusy trzyma cache zapytań, który odświeża je w tle.

Algolia (w bazie wiedzy KODA Vault)

Katalog jest w trzech językach, więc każdy język ma w Algolii osobny indeks, a wyszukiwarka toleruje literówki. Produkty trafiają do indeksów automatycznie po zmianie w Medusie, a zapytania idą przez backend, który wybiera indeks według języka strony.

Stripe (w bazie wiedzy KODA Vault)

Stripe obsługuje płatności na wszystkich rynkach sklepu, także w euro. Podpięliśmy go przez moduł płatności Medusy z Payment Element na etapie płatności, a gdy klient nie wróci z banku do sklepu, webhook Stripe i tak domyka zamówienie.

Przelewy24 (w bazie wiedzy KODA Vault)

Przelewy24 daje polskim klientom BLIK oraz przelew online i tradycyjny. Bramkę podpięliśmy jako drugiego dostawcę płatności w Medusie: zamówienie zakłada backend po powiadomieniu od Przelewy24, a strona powrotu czeka na potwierdzenie i w razie potrzeby sprawdza status transakcji.

Co to daje w praktyce

• Katalog, zamówienia i klienci obu kanałów są w jednym panelu Medusy, więc nie trzeba prowadzić osobnego sklepu i osobnej hurtowni.
• Gabinet loguje się w tym samym sklepie co klient detaliczny, a koszyk od razu przelicza się na ceny przypisane do jego konta.
• Opisy produktów w trzech językach oraz ceny w złotówkach i euro utrzymuje jeden backend, więc żaden rynek nie ma osobnej kopii katalogu.
• Zamówienie nie zależy od tego, czy klient wróci z bramki płatniczej: płatność potwierdza backend, a sklep nie tworzy duplikatów.

Integracje i automatyzacje

• Dane firmy z GUS

  Przy zakładaniu konta firmowego wystarczy wpisać NIP: backend pyta rejestr REGON w GUS i sam uzupełnia nazwę oraz adres firmy w formularzu.

• Kontrola stanów w koszyku

  Koszyk co minutę i po powrocie do karty przeglądarki sprawdza w backendzie dostępność produktów. Jeśli stan zmienił się od dodania towaru, sklep pokazuje to przed płatnością i proponuje poprawienie ilości.

• Stany i zamówienia z Subiektem nexo

  Stany magazynowe z Subiekta nexo regularnie trafiają do Medusy, a zamówienia ze sklepu powstają w Subiekcie jako dokumenty. Oba systemy łączy serwis .NET oparty na oficjalnym SDK Subiekta.

• Dokumenty w Fakturowni

  Fakturownię podpięliśmy jako moduł Medusy: dokument z danymi nabywcy, łącznie z NIP-em, wystawia się automatycznie przy zmianie statusu zamówienia.

Dlaczego ten stack

Next.js (w bazie wiedzy KODA Vault)

Strony usług są prerenderowane, a blog i panel renderują się przy każdym żądaniu, bo czytają treść z bazy. Next.js pozwala ustawić ten tryb osobno dla każdej trasy, więc strona i panel mieszczą się w jednym kodzie.

React (w bazie wiedzy KODA Vault)

Panel ma dużo stanu w przeglądarce: edytor wpisów bloga, planer z przeciąganiem zadań i notatki edytowane na żywo. Każdy widok to komponent React w tej samej aplikacji, więc nowy moduł od razu korzysta z istniejącej bazy i logowania.

Obsidian Vault (w bazie wiedzy KODA Vault)

Notatki w panelu zbudowaliśmy na wzór Obsidiana: drzewko katalogów, lekka składnia markdown i edytor na żywo. Checkbox wpisany w notatce pojawia się jako zadanie w planerze, więc notatek i zadań nie trzeba prowadzić w dwóch narzędziach.

Google Ads (w bazie wiedzy KODA Vault)

Panel pobiera wyniki kampanii z Google Ads API, tylko do odczytu, i pokazuje je obok zapytań ze strony. Zestaw reguł zamienia metryki w krótkie zalecenia, np. przy kampanii, która wydaje budżet bez konwersji.

Railway (w bazie wiedzy KODA Vault)

Generowanie PDF-ów w headless Chromium wymaga doinstalowanych bibliotek systemowych, a webhooki muszą mieć dokąd trafić o każdej porze. Railway uruchamia aplikację jako proces działający bez przerwy, obok bazy PostgreSQL, i wdraża każdą zmianę scaloną do głównej gałęzi.

Co to daje w praktyce

• Zapytanie z formularza, oferta, notatka i zadanie są w jednym panelu, a wyszukiwanie globalne znajduje frazę we wszystkich tych miejscach naraz.
• Pełny kod aplikacji jest w repozytorium firmy, więc panel rozwija się bez licencji i limitów gotowej platformy.
• Strona wpuszcza roboty wyszukiwarek i modeli AI, ma dane strukturalne i plik llms.txt, więc asystenci AI dostają opis firmy i usług w czytelnej postaci.

Integracje i automatyzacje

• Zapytania z formularza wyceny

  Zgłoszenie zapisuje się w skrzynce panelu, a Resend wysyła powiadomienie do firmy i automatyczną odpowiedź do klienta, jeśli podał adres e-mail.

• Oferty w PDF ze statusem doręczenia

  Panel generuje pismo ofertowe w PDF w headless Chromium i wysyła ofertę przez Resend, a webhook zapisuje przy niej, czy wiadomość doszła do adresata.

• Audyt SEO i AEO w panelu

  Panel pobiera własne strony po HTTP, tak jak robot, i sprawdza metadane, dane strukturalne oraz llms.txt. Wyniki zamienia w listę zaleceń, co poprawić.

Dlaczego ten stack

Webflow (w bazie wiedzy KODA Vault)

Obok katalogu witryna ma rozbudowane sekcje laboratorium, oferty badań oraz raportów i certyfikacji. W Webflow katalog i te treści żyją w jednym projekcie, a wersje językowe działają w podkatalogach ze znacznikami hreflang.

Shopify (w bazie wiedzy KODA Vault)

Shopify jest źródłem produktów, cen i zamówień. Kasa działa pod subdomeną checkout.astriva.pl, więc kupujący przez cały czas zostaje w domenie marki.

Storesynk (w bazie wiedzy KODA Vault)

Storesynk (dawniej Shopyflow) przenosi produkty z Shopify do kolekcji CMS Webflow i dokłada na stronach warianty, koszyk, kody rabatowe, wyszukiwarkę i konto klienta, bez osadzania gotowych widżetów. Jesteśmy na liście Storesynk Experts.

Cloudflare (w bazie wiedzy KODA Vault)

Webflow publikuje witrynę przez sieć Cloudflare, więc strony katalogu i sekcje laboratorium trafiają do odwiedzających z cache jako gotowy HTML. Z Shopify w przeglądarce dociągane są elementy, które muszą być aktualne: koszyk, konto klienta i cena.

Co to daje w praktyce

• Produkty z cenami są w HTML stron sklepu, więc wyszukiwarki i modele AI widzą katalog bez uruchamiania JavaScriptu.
• Produkty i ceny edytuje się tylko w Shopify, a strony katalogu w Webflow biorą je stamtąd.
• Klient loguje się na stronie marki i tam sprawdza swoje zamówienia, zamiast przechodzić do osobnego panelu.
• Treści o laboratorium i badaniach rozbudowuje się w Webflow niezależnie od katalogu, a konfiguracja sklepu zostaje nietknięta.

Integracje i automatyzacje

• Synchronizacja katalogu Shopify

  Produkty z Shopify trafiają do kolekcji CMS w Webflow, a z nich generują się strony produktów.

• Koszyk na stronie, kasa w Shopify

  Wybór wariantu i dodanie do koszyka działają na karcie produktu, a ilość i kody rabatowe ustawia się w oknie koszyka. Zamówienie finalizuje kasa Shopify pod domeną marki.

• Konta i historia zamówień

  Logowanie, lista zamówień z numerem, datą, kwotą oraz statusem płatności i realizacji, a także adresy klienta pobierane są z Shopify i wyświetlane w szablonie Webflow.

• Wyszukiwarka w nawigacji

  Wyszukiwarka w menu podpowiada produkty ze zdjęciem i ceną na każdej stronie witryny, bez przechodzenia na osobną podstronę wyników.

Dlaczego ten stack

Webflow (w bazie wiedzy KODA Vault)

Etapy mapy rozwoju mają przypisane lata, więc tę sekcję, tak jak FAQ i listę partnerów, trzeba będzie aktualizować. Webflow publikuje takie zmiany prosto z edytora, a plik wideo serwuje z tego samego CDN co resztę strony.

Figma (w bazie wiedzy KODA Vault)

Stronę czyta i inwestor, i inżynier, więc układ sekcji ustaliliśmy w Figmie przed wdrożeniem. Powtarzalny blok tekstu ze zdjęciem zbudowaliśmy w Webflow jako jeden komponent z wariantem zdjęcia po lewej lub po prawej.

Co to daje w praktyce

• Datę na mapie rozwoju, odpowiedź w FAQ czy opis zastosowania zmienia się w Webflow i publikuje bez wdrażania kodu.
• Wideo wczytuje się dopiero po kliknięciu i gra w oknie na stronie, więc nie spowalnia pierwszego wyświetlenia i nie odsyła do zewnętrznego serwisu.
• Nowe sekcje składa się z istniejących komponentów, więc zachowują odstępy i typografię z projektu.

Dlaczego ten stack

Shopify (w bazie wiedzy KODA Vault)

Shopify prowadzi katalog, kasę i zamówienia. Motyw rozbudowaliśmy o własne bloki: dane techniczne z metapól w akordeonach, przycisk „Kup teraz" prowadzący prosto do kasy i zwarty pasek z warunkami wysyłki, gwarancji i zwrotu.

Claude API (w bazie wiedzy KODA Vault)

Agent działa w pętli narzędzi: model sam decyduje, czy przeszukać bazę wiedzy, sprawdzić zamówienie, czy przekazać sprawę zespołowi. Odpowiada na podstawie zapisanych zasad sklepu i wyników narzędzi, a nie tego, co model pamięta z treningu.

Allegro (w bazie wiedzy KODA Vault)

Kupujący z Allegro trafiają do tego samego agenta co klienci sklepu. Zasady dostawy i zwrotów są więc opisane raz, a przy każdej przekazanej sprawie zapisuje się kanał, żeby zespół wiedział, skąd przyszło pytanie.

BaseLinker (w bazie wiedzy KODA Vault)

BaseLinker synchronizuje katalog sklepu z centralnym magazynem, dzięki czemu Shopify pracuje na tych samych danych o produktach co magazyn.

Sellasist (w bazie wiedzy KODA Vault)

W systemie Sellasist obsługiwane są zamówienia i wysyłki sklepu. Agent nie wykonuje tam żadnych operacji, a sprawy wymagające działania na zamówieniu, jak zwrot czy reklamacja, trafiają do zespołu.

Railway (w bazie wiedzy KODA Vault)

Hub agenta to aplikacja Next.js z bazą PostgreSQL na przekazane sprawy i dziennik zdarzeń oraz panelem dla zespołu za logowaniem. Railway trzyma ją jako jeden długo działający serwer, a nie zestaw funkcji uruchamianych na żądanie.

Co to daje w praktyce

• Klient pytający o dostawę, płatności, zwroty, reklamacje czy faktury dostaje odpowiedź zgodną z zapisanymi zasadami sklepu.
• O status zamówienia, płatności i przesyłki klient może zapytać w rozmowie, a agent podaje wyłącznie dane zwrócone przez Shopify.
• Agent niczego w sklepie nie zmienia: zwrot pieniędzy, wystawienie faktury czy uznanie reklamacji zawsze wymagają decyzji człowieka.
• Przekazana sprawa trafia do zespołu ze streszczeniem, powodem i ewentualną rekomendacją, więc od razu wiadomo, czego dotyczy.

Integracje i automatyzacje

• Odpowiedzi z bazy wiedzy

  Zasady sklepu są zapisane jako notatki, które agent przeszukuje przed odpowiedzią. Gdy tematu w nich nie ma, nie zgaduje, tylko przekazuje sprawę zespołowi.

• Odczyt zamówień z Shopify

  Na podstawie adresu e-mail z zamówienia agent pobiera z Shopify Admin API numer zamówienia, status płatności i realizacji oraz link do śledzenia przesyłki. Dostęp jest tylko do odczytu.

• Przekazanie sprawy zespołowi

  Eskalacja zapisuje się w kolejce decyzji razem z powodem i kanałem, z którego przyszła, a także w dzienniku zdarzeń, więc każde przekazanie da się później odtworzyć.

Dlaczego ten stack

Webflow (w bazie wiedzy KODA Vault)

Obie inwestycje dzielą jeden szablon strony i jeden szablon karty mieszkania w Webflow CMS, więc kolejne osiedle to nowe wpisy w kolekcjach, a nie podstrony składane od zera. Obrysy lokali na mapach kondygnacji biorą kolor ze statusu we wpisie CMS.

Supabase (w bazie wiedzy KODA Vault)

Przy dwóch osiedlach miejsca postojowe i komórki lokatorskie muszą trafić na karty właściwej inwestycji. Plik XML w Supabase Storage niesie przy każdej pozycji historię cen, której CMS nie przechowuje, oraz nazwę inwestycji.

dane.gov.pl (w bazie wiedzy KODA Vault)

Portal potrafi sam importować zbiory opisane w jego formacie harwestera. Taki opis, wystawiony pod stałym adresem, wskazuje dzienne pliki CSV z cenami obu inwestycji, a dane.gov.pl pobiera go automatycznie raz na dobę.

Lottie

Zapętlone ikony na stronie głównej to animacje Lottie, które Webflow odtwarza wbudowanym elementem Lottie.

Co to daje w praktyce

• Obie inwestycje mają ten sam układ i te same filtry (cena, metraż, pokoje, piętro), więc mieszkania z obu osiedli łatwo porównać.
• Każde mieszkanie ma własną podstronę z planem, parametrami, prospektem informacyjnym i historią cen, więc link do konkretnego lokalu łatwo przesłać dalej.
• Ceny obu osiedli codziennie trafiają do dane.gov.pl, a do portalu nie trzeba niczego wgrywać.

Integracje i automatyzacje

• Jeden plik cen dla obu osiedli

  Codziennie w Supabase Storage pojawia się plik XML obejmujący obie inwestycje: status, bieżącą cenę i historię cen mieszkań, miejsc postojowych i komórek lokatorskich.

• Podział historii cen na inwestycje

  Skrypt karty mieszkania znajduje lokal po identyfikatorze jego wpisu w CMS, a miejsca postojowe i komórki wybiera po nazwie inwestycji zapisanej w pliku.

Dlaczego ten stack

Webflow (w bazie wiedzy KODA Vault)

Mapa kondygnacji to lista z kolekcji Webflow CMS: każdy obrys lokalu jest osobnym wpisem, a jego status trafia do atrybutu elementu SVG, od którego zależy kolor. Zmiana statusu w edytorze przemalowuje mapę bez ruszania grafiki.

Supabase (w bazie wiedzy KODA Vault)

Ustawa wymaga pokazania historii zmian cen, a pole ceny w CMS zna tylko wartość bieżącą. Historia każdego lokalu, z datami zmian, jest w pliku XML w Supabase Storage, powiązana z identyfikatorem jego wpisu w Webflow CMS.

dane.gov.pl (w bazie wiedzy KODA Vault)

Ceny w rejestrze trzeba odświeżać codziennie, więc nikt nie wgrywa tam plików ręcznie. Zasób w dane.gov.pl wskazuje stały adres na domenie dewelopera, pod którym zawsze leży aktualny zbiór.

GSAP (w bazie wiedzy KODA Vault)

Nagłówki są dzielone na słowa, a oś czasu GSAP obraca je kolejno do pozycji, gdy wchodzą w kadr. ScrollTrigger zeruje animację, gdy nagłówek zniknie pod dolną krawędzią ekranu, więc ruch powtarza się przy każdym powrocie.

Lottie

Ikony na stronie głównej to animacje Lottie. Element Lottie w Webflow da się sterować z panelu interakcji, więc odtwarzanie ikon ustawiliśmy tam, bez pisania skryptu.

Co to daje w praktyce

• Na mapie kondygnacji od razu widać, które lokale są dostępne, które zarezerwowane, a które zeszły już z oferty.
• Katalog filtruje na bieżąco po zakresie ceny i metrażu, piętrze i liczbie pokoi, a sortuje po cenie, cenie za metr lub metrażu.
• Karta lokalu pokazuje historię cen mieszkania i miejsc postojowych z okresami obowiązywania, czego wymaga ustawa o jawności cen.

Integracje i automatyzacje

• Codzienny plik z cenami

  Każdego dnia w Supabase Storage pojawia się plik XML ze statusem, bieżącą ceną i pełną historią cen mieszkań oraz miejsc postojowych.

• Tabela historii na karcie lokalu

  Skrypt na podstronie ogłoszenia pobiera plik z poprzedniego dnia, znajduje lokal po identyfikatorze wpisu w CMS i z dat zmian wylicza okresy obowiązywania kolejnych cen.

• Zbiór dla dane.gov.pl

  Opis zbioru w formacie harwestera dane.gov.pl aktualizuje się codziennie i wskazuje dzienne pliki CSV z cenami, w układzie kolumn przewidzianym dla deweloperów.

Dlaczego ten stack

Next.js (w bazie wiedzy KODA Vault)

Treść jest taka sama dla każdego odwiedzającego, więc Next.js generuje stronę z góry, razem z mapą strony, robots.txt i danymi strukturalnymi firmy. Robot wyszukiwarki czyta opis procesu i sylwetki trenerów bez czekania na JavaScript.

React (w bazie wiedzy KODA Vault)

Kwestionariusz dopasowania to komponent React, który po ostatniej odpowiedzi składa podsumowanie w przeglądarce, więc witryna obywa się bez backendu i bazy danych.

Tailwind CSS

Kolory i fonty marki są zdefiniowane raz w motywie Tailwinda i używane jako klasy w każdym komponencie, więc karty obszarów szkoleń, sylwetki trenerów i pytania FAQ trzymają jeden wygląd.

Vercel (w bazie wiedzy KODA Vault)

Vercel wdraża Next.js bez dodatkowej konfiguracji i serwuje prerenderowaną stronę z pamięci podręcznej na brzegu sieci, więc nie ma własnego serwera do utrzymania.

Co to daje w praktyce

• Obszary szkoleń, przebieg współpracy, sylwetki trenerów i FAQ są na jednej przewijanej stronie, a nawigacja przenosi prosto do wybranej sekcji.
• Kontakt to jedno kliknięcie: okno z numerem telefonu i adresem e-mail, który otwiera wiadomość z gotowym tematem.
• Witryna nie zapisuje danych odwiedzających, a odpowiedzi z kwestionariusza nie opuszczają przeglądarki.

Dlaczego ten stack

Webflow (w bazie wiedzy KODA Vault)

Serwis to głównie powtarzalne wpisy: wina z krajem, kolorem, stylem i ceną, lokale z adresem i nagrodami, wydarzenia z datą. Kolekcje CMS trzymają te pola, a Webflow Localization udostępnia łotewskie wersje tych samych wpisów pod /lv/.

Splide

Galerie zdjęć lokali i konkursu oraz karty nadchodzących wydarzeń są listami CMS, których wbudowany slider Webflow nie obsłuży. Splide montuje się na ich znacznikach z własnymi przyciskami, a przy jednym zdjęciu skrypt wyłącza przeciąganie i chowa nawigację.

Co to daje w praktyce

• Nowe wino, lokal albo wydarzenie to jeden wpis w CMS, a lista, podstrona i dane strukturalne biorą treść z niego.
• Łotewska i angielska wersja pokazują ten sam katalog, a nazwy miesięcy w datach dopasowują się do języka strony.
• Listę win zawęża się po kraju, kolorze, stylu, cenie i zawartości alkoholu albo wyszukuje po nazwie, bez przeładowania strony.

Integracje i automatyzacje

• Stan biletów z Fienta

  Każde wydarzenie w CMS ma link do biletów w Fienta. Widżet Fienta zwraca liczbę dostępnych biletów, a strona sama pokazuje przycisk zakupu albo informację o wyprzedaniu.

• Filtry katalogu win

  Finsweet Attributes filtruje listę CMS po polach wina, z suwakami ceny i alkoholu, wyszukiwaniem po nazwie i doładowaniem kolejnych pozycji. Strony paginacji dostają canonical bez parametru i noindex.

• Mapa lokali w Mapbox

  Listę nagrodzonych lokali można przełączyć na mapę ze znacznikami ze współrzędnych zapisanych we wpisach CMS. Mapbox wczytuje się dopiero po tym przełączeniu, więc nie obciąża pierwszego wejścia na stronę.

• Schema.org z pól CMS

  Podstrony win, lokali i wydarzeń generują dane strukturalne Product, LocalBusiness i Event z pól kolekcji, razem z nagrodą, krajem, współrzędnymi i datą.

Dlaczego ten stack

Webflow (w bazie wiedzy KODA Vault)

Główną treścią są tu wpisy, więc potrzebny był CMS z działami aktualności, paginacją i wyszukiwarką, w którym artykuł publikuje się bez programisty. Webflow Localization prowadzi polską i angielską wersję wpisów pod osobno przetłumaczonymi adresami.

Lumos

Witryna ma wiele typów podstron w dwóch językach. Lumos daje klasy użytkowe i zmienne dla odstępów sekcji, przycisków i kolumn, a podstrony składa się z tych samych globalnych komponentów z wariantami, zamiast stylować każdą sekcję osobno.

GSAP (w bazie wiedzy KODA Vault)

Linia przy nagłówku każdej sekcji wydłuża się, gdy sekcja pojawia się w widoku. To jedna interakcja Webflow na GSAP i ScrollTrigger, przypięta do klasy w całej witrynie, więc działa na każdej podstronie bez własnego kodu animacji.

Swiper

Slider aktualności na stronie głównej pokazuje wpisy z kolekcji, a wbudowany slider Webflow nie pracuje na listach CMS. Swiper montuje się bezpośrednio na tej liście i obsługuje przeciąganie, poziomy gest kółkiem lub touchpadem oraz klawiaturę.

Co to daje w praktyce

• Stare linki do wpisów z wyszukiwarki i innych serwisów nie kończą się błędem, tylko prowadzą na ten sam artykuł albo do działu aktualności.
• Informacje bieżące, publikacje w mediach i raporty mają osobne działy z paginacją, a wyszukiwarka obejmuje całą witrynę.
• Polska i angielska wersja wpisu mają własne adresy powiązane przez hreflang, co pomaga Google pokazać czytelnikowi właściwy język.

Integracje i automatyzacje

• Przekierowania 301 ze starych adresów

  Przeniesione wpisy z WordPressa mają pod /post/ te same slugi, a dawne kategorie, podstrona klientów i angielska strona o agencji prowadzą do nowych odpowiedników.

• Formularz przez Formspark

  Formularz kontaktowy wysyła zgłoszenie do Formspark po weryfikacji Botpoison i na miejscu pokazuje wysyłanie, potwierdzenie albo błąd.

Dlaczego ten stack

Tauri

Nakładka to przezroczyste okno zawsze na wierzchu, które przepuszcza kliknięcia do programów pod spodem, osobno na każdym monitorze. Tauri obsługuje takie okna natywnie, a w jego warstwie Rust działa serwer WebSocket odbierający ruch z telefonu.

React (w bazie wiedzy KODA Vault)

Panel sterowania i okna nakładki powstały w React, ale samą animację rysujemy na Canvas, poza cyklem renderowania komponentów. Panel i nakładka to osobne okna, więc przesuwanie suwaków w ustawieniach nie zakłóca pętli rysowania.

Co to daje w praktyce

• Nakładka przepuszcza kliknięcia i nie zabiera fokusu, więc w programach pod spodem pracuje się jak zwykle, także na kilku monitorach.
• Laptop nie potrzebuje akcelerometru ani żyroskopu. Wystarczy telefon i wspólna sieć Wi-Fi, choćby hotspot.
• Strumień z czujników płynie z telefonu prosto do laptopa w sieci lokalnej, bez konta, chmury i serwera pośrodku.
• Tryb wskazówek, czułość, siłę i przezroczystość zmienia się w panelu, nakładka reaguje od razu, a ustawienia zostają na kolejną trasę.

Integracje i automatyzacje

• Parowanie kodem QR

  Aplikacja na laptopie pokazuje kod QR z adresem w sieci lokalnej i jednorazowym tokenem, który szybko wygasa. Wygenerowanie nowego kodu unieważnia poprzedni, więc w obiegu jest zawsze tylko jeden ważny kod.

• Strumień ruchu przez WebSocket

  Telefon wysyła próbki z akcelerometru i żyroskopu paczkami do serwera w aplikacji desktopowej. Serwer przyjmuje dane tylko od sparowanego urządzenia i przekazuje je do okien nakładki.

• Przeliczanie ruchu pojazdu

  Silnik wygładza odczyty, oddziela grawitację od przyspieszenia i przelicza ruch na osie pojazdu: na boki, wzdłuż jazdy i w pionie. Wynik zależy tylko od odczytów, nie od zegara systemowego, więc testujemy go na syntetycznych danych: postoju, hamowaniu i przyspieszeniu w bok.