# Katalog czesci i akcesoriow > Katalog oryginalnych czesci OEM do Volkswagena Polo 6R oparty na headless CMS. Frontend Astro SSG z interaktywnymi narzędziami Vue 3, backend Laravel REST API, panel Filament, automatyczne tlumaczenia DeepL, opisy generowane przez AI oraz pipeline obrazow na Cloudflare R2. - URL: https://spoko.space/pl/vw-polo-6r-parts-catalog/ - Published: 2026-04-02 - Updated: 2026-04-02 - Tags: astro, vue3, unocss, laravel, filament, pwa, cloudflare, i18n, meilisearch, redis ---## 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](https://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.