Katalog czesci i akcesoriow

Katalog czesci i akcesoriow VW Polo 6R

Kompleksowy, wielojezyczny katalog oryginalnych czesci OEM i akcesoriow do Volkswagena Polo 6R/6C, zbudowany w pelni oddzielonej architekturze headless. Statyczny frontend Astro pobiera dane z Laravel REST API w czasie budowania, generujac czyste strony HTML bez zapytan do bazy danych w czasie dzialania. Choc nie jest to sklep internetowy, posiada wiele funkcji typowych dla e-commerce — listy produktow, filtrowanie, wyszukiwanie, szczegolowe specyfikacje — z wyjatkiem obslugi platnosci.

Projekt przeszedl kilka iteracji: od wczesnego SPA w Vue 2, przez Vue 3, do obecnej konfiguracji Astro 6 SSG z wyspami Vue 3 dla interaktywnych komponentow.

Architektura: Headless CMS + Statyczny Frontend

System jest podzielony na dwa niezalezne repozytoria:

Frontend (catalog.polo.blue) — statyczny generator Astro 6 z komponentami Vue 3, stylowaniem UnoCSS i wlasnym systemem designu. Wszystkie dane sa pobierane z API wylacznie podczas kroku budowania. Przegladarka nigdy nie kontaktuje sie bezposrednio z backendem (z wyjatkiem narzedzi po stronie klienta, jak dekoder kodow PR).

Backend — aplikacja Laravel 13 serwujaca REST API i panel administracyjny Filament 5. Zarzadza produktami, kategoriami, tlumaczeniami, mediami, danymi SEO i wdrozeniami strony. Oparty na MySQL, Redis (kolejki przez Laravel Horizon do zadan w tle jak konwersja obrazow, tlumaczenia i buildy strony) i Cloudflare R2 jako storage CDN. Wdrozenia strony mozna uruchamiac bezposrednio z panelu administracyjnego.

Ta separacja oznacza, ze frontend jest czysto statyczna strona — szybka, bezpieczna i globalnie cachowalana przez Cloudflare CDN.

Pipeline obrazow i CDN

Kluczowym wyzwaniem byla optymalizacja obrazow przy rozbudowanym katalogu produktow i przewadze ruchu mobilnego. Rozwiazanie ewoluowalo od kompresji w czasie budowania przez Sharp/Astro do pipeline’u po stronie backendu:

1. Upload — Obrazy sa przechowywane na Cloudflare R2 (kompatybilnym z S3) przez Spatie Media Library
2. Konwersja — Kolejki Laravel Horizon generuja miniaturki w wielu rozmiarach w formatach AVIF i WebP
3. Dostarczanie — Serwowane z dedykowanej subdomeny CDN z zdenormalizowanymi URL-ami zapisanymi bezposrednio na modelach Product/Category, eliminujac zapytania JOIN w widokach list
4. Monitoring — Widget CDN Stats w panelu administracyjnym sledzi calkowity storage, rozklad per model i procent produktow z kompletem konwersji

WebP sluzy jako fallback dla AVIF ze wzgledu na jego wciaz ograniczone indeksowanie w Google Image Search.

Wielojezycznosc i automatyczne tlumaczenia

Katalog obsluguje trzy jezyki — angielski, polski i niemiecki. Cala tlumaczalna tresc (produkty, kategorie, kolory, materialy, kody PR, wpisy FAQ i wiecej) wspoldzieli jeden zunifikowany system tlumaczen, wiec dodanie nowego jezyka nie wymaga zmian w schemacie bazy.

• DeepL API automatycznie tlumaczy tresc z angielskiego na polski i niemiecki przez zadania kolejkowane w tle
• Opisy generowane przez AI uzywaja lancucha fallbackow na wielu dostawcach LLM do generowania angielskiej tresci, ktora jest nastepnie tlumaczona przez DeepL
• Struktury URL per jezyk (/ dla EN, /pl/ dla polskiego, /de/ dla niemieckiego) z prawidlowo skonfigurowanymi tagami hreflang
• Statyczne napisy UI ladowane z plikow JSON, tlumaczenia tresci serwowane juz zlokalizowane przez API

Optymalizacja wydajnosci

System podzielonego budowania

Budowanie wszystkich trzech lokalizacji w jednym przebiegu Astro powodowalo wyczerpanie pamieci (10-20 GB RAM). Rozwiazanie: wlasny skrypt split build przetwarzajacy jedna lokalizacje na raz, uruchamiajacy indeksowanie Pagefind per lokalizacja, a nastepnie laczacy wszystko w koncowy katalog dist/. Calkowity czas budowania: ~5-6 minut dla wszystkich lokalizacji.

Redukcja zapytan API

Cache prefetch kategorii pobiera wszystkie produkty per glowna kategoria w pojedynczym zapytaniu API, nastepnie filtruje lokalnie. Zredukowalo to ~60 indywidualnych zapytan API do kilku wywolan wsadowych podczas budowania.

Wydajnosc frontendu

• content-visibility: auto na elementach produktow poza ekranem, redukujac koszt renderowania
• Stan zwiniecia sidebara przywracany z localStorage przed pierwszym renderowaniem, zapobiegajac CLS
• Preloading czcionek (czcionki marki VW), preconnect do CDN i domen analitycznych
• Reczne chunki Vite oddzielajace kod vendora (Vue, design system) od kodu stron
• Pierwsze 3 obrazy produktow ladowane natychmiast, z fetchpriority="high" na pierwszym obrazie; reszta leniwie

SEO i odkrywalnosc

Silne SEO jest glownym zrodlem ruchu, szczegolnie z wyszukiwarek grafiki. Kluczowe strategie:

• Dane strukturalne (JSON-LD) — Rozbudowany markup @graph z IndividualProduct (nie Product, aby sygnalizowac katalog nie-handlowy), BreadcrumbList, ItemList dla stron kategorii i encje Organization
• Mapy witryny XML — Generowane po stronie serwera per lokalizacja i typ (produkty, kategorie, strony), pobierane w czasie budowania z arkuszami stylów XSL do wyswietlania w przegladarce
• llms.txt — Pliki odkrywalnosci AI/LLM zgodne ze specyfikacja llmstxt.org
• Linkowanie wewnetrzne — Powiazane produkty, podobne produkty i przyciski nawigacji w kategorii (zwalidowane testami A/B) poprawiaja przeplyw linkow i uzytkownikow
• Pagefind — Offline’owe wyszukiwanie pelnotekstowe indeksowane per lokalizacja, bez zewnetrznych zaleznosci
• Dashboard SEO — Widgety panelu administracyjnego audytuja krotkie/dlugie tytuly, brakujace opisy i kompletnosc danych we wszystkich trzech jezykach

Interaktywne narzedzia

Trzy narzedzia Vue 3 po stronie klienta wzbogacaja uzytowalnosc katalogu:

• Kalkulator opon i felg — Porownuje dwie konfiguracje opon/felg, oblicza roznice srednicy i odchylenie predkosciomierza, z wizualizacja SVG
• Przelicznik mocy — Konwertuje miedzy KM, kW i PS z wizualnym wykresem slupkowym
• Dekoder kodow PR — Dekoduje fabryczne kody opcji VW (3-znakowe) odpytujac API, z cachowaniem po stronie klienta

Narzedzia te sa wyizolowane w osobnej trasie Astro, aby ich CSS (~25 KB) nie wplywal na glowne strony katalogu.

Backend i panel administracyjny

Backend oparty na Laravel 13 i Filament 5 dostarcza REST API i zapewnia kompleksowy panel administracyjny zorganizowany w funkcjonalne klastry:

Zarzadzanie trescia

• Zarzadzanie produktami ze szczegolowymi specyfikacjami, kodami PR, kompatybilnoscia silnikow i obsluga wielu jezykow
• Hierarchiczna organizacja kategorii z zarzadzaniem ikonami i obrazami OG
• Kreator stron CMS z 13 typami blokow (hero, jumbotron, karuzela, CTA, FAQ, statystyki itp.)
• Zarzadzanie tlumaczeniami z automatyzacja wsadowa DeepL i flagami ochrony dla krytycznych tlumaczen

REST API

API uzywa konfigurowalnych presetow odpowiedzi kontrolujacych glebokosc dolaczanych danych per endpoint — utrzymujac lekkie odpowiedzi dla list i bogate dla widokow szczegolowych. Naglowki cache HTTP sa dostrajane per trasa, aby zmaksymalizowac trafienia CDN.

Dashboardy analityki i monitoringu

• Google Analytics 4 — Odslony, odwiedzajacy, sesje, urzadzenia, top referrerzy, dane geograficzne (14 widgetow)
• Google Search Console — Klikniecia, wyswietlenia, CTR, srednia pozycja, top strony i zapytania
• Core Web Vitals — Sledzenie szeregu czasowego CLS, LCP, INP
• Google AdSense — Sledzenie przychodow z wielu stron z alertami o spadkach

Operacje i utrzymanie

• Wdrazanie strony jednym kliknieciem uruchamiajace buildy Astro przez zadania kolejkowane (osobna kolejka site-build, aby nie blokowac zadan tlumaczen/mediow)
• Czyszczenie cache Cloudflare wedlug URL, prefiksu lub typu modelu
• Narzedzia backup/przywracania bazy danych
• Logowanie aktywnosci i pelna sciezka audytu
• Dashboard kompletnosci danych audytujacy brakujace media, tlumaczenia, opisy i jakosc linkow

Baza wiedzy FAQ

Katalog zawiera zintegrowany system FAQ dostarczajacy specyfikacje techniczne i poradniki dla VW Polo 6R. Tresc jest zorganizowana wedlug kategorii produktow (opony, felgi, olej silnikowy, klimatyzacja, hamulce, zawieszenie, czesci karoserii) i obsluguje wielojezyczne wyswietlanie z linkami do szczegolowych wpisow na blogu.

Wdrazanie

Frontend uzywa strategii wdrazania atomowego:

• Push do main uruchamia GitHub Actions
• Split build Astro wykonywany na serwerze hostingowym
• Kazde wydanie trafia do katalogu ze znacznikiem czasu; public_html to symlink
• Rollback trwa ponizej 1 sekundy przez przepiecie symlinka na poprzednie wydanie

Wykorzystane technologie

Silne SEO, optymalizacja obrazow i dane strukturalne przyciagaja znaczacy ruch organiczny — szczegolnie z wyszukiwarek grafiki — podczas gdy architektura headless utrzymuje strone szybka, bezpieczna i latwa w utrzymaniu.