Case study
MediaVision
MediaVision to firma dostarczająca technologie i marketing dla branży farmaceutycznej. Ten case study opisuje dwujęzyczną stronę marketingową zbudowaną dla niej: front-end w Next.js eksportowany statycznie, zasilany przez headless WordPress, z pipeline’em dostarczania, który przebudowuje się automatycznie przy każdej zmianie treści. Całość powstała w procesie inżynierskim wspieranym przez AI.
- Klient
- Technologie i marketing dla branży farmaceutycznej
- Rok
- 2026
- Rola
- Architektura, front-end, DevOps
- Strona
- mediavision.pl
- Stack
- Next.js 16
- TypeScript
- Tailwind 4
- GSAP
- Headless WordPress (ACF, Polylang, Yoast, Contact Form 7)
- GitHub Actions
Brief
MediaVision potrzebowało dwujęzycznej (PL/EN) strony marketingowej ze stronami produktowymi i usługowymi oraz portfolio realizacji, edytowalnej przez klienta bez udziału developera, szybkiej i dobrze indeksowanej.
Architektura
Strona działa w architekturze headless. WordPress pełni rolę panelu administracyjnego: grupy pól ACF są zdefiniowane w kodzie jako lokalny JSON, Polylang paruje treści polskie i angielskie, Yoast dostarcza metadane SEO i dane schema, a zgłoszenia z Contact Form 7 trafiają przez REST API.
Front-end to Next.js 16 na App Router, budowany z output: 'export', generujący statyczny HTML. Każda strona ma pełne domyślne treści PL i EN zapisane w kodzie, dzięki czemu strona renderuje się poprawnie nawet bez treści z CMS-a. Jeden plik routes.ts jest jedynym źródłem prawdy dla zlokalizowanych ścieżek.
Pipeline dostarczania
Kod znajduje się w monorepo na GitHubie. Gałąź staging wdraża się na środowisko stagingowe, main na mediavision.pl. GitHub Actions buduje statyczny eksport i wysyła go przez rsync po SSH na hosting współdzielony, pomijając .htaccess.
Niewielka wtyczka do WordPressa wysyła zdarzenie repository_dispatch przy każdym zapisie treści przez edytora, co automatycznie uruchamia przebudowę stagingu i produkcji. Zachowanie robots i indeksowania sterowane jest zmienną środowiskową, dzięki czemu jedna instancja WordPressa bezpiecznie zasila zarówno staging z noindex, jak i zaindeksowaną produkcję.
Wydajność i SEO
Wideo w hero zostało przekodowane z 22 MB do 4 MB na desktopie i z 28 MB do 3 MB na mobile. Grafiki przeniesiono na WebP z jawnymi atrybutami loading, decoding i fetchpriority, a klatka plakatowa jest preloadowana.
Sitemapa generowana jest po buildzie. Hreflang, tagi canonical i dane JSON-LD pochodzą z Yoast, a sekcje z canvasem i wideo mają tekst czytelny dla robotów. Ścieżka główna przekierowuje na /pl/ przez 301, a www przekierowuje na domenę bez prefiksu.
Jak wykorzystano AI
Cały projekt powstał w procesie inżynierskim wspieranym przez AI z użyciem Claude Code: burza mózgów, spisana specyfikacja projektowa, plan wdrożenia, równoległe subagenty budujące osobne strony na podstawie ramek z Figmy, pikselowy audyt każdej strony względem eksportów z Figmy w prawdziwej przeglądarce, i pętla przeglądu.
Dwujęzyczne modele treści i skrypty tłumaczeniowe zostały wygenerowane i zweryfikowane w ten sam sposób. Nie chodzi o autouzupełnianie. Chodzi o AI jako zdyscyplinowany proces: specyfikacja, plan, przegląd.
Utrzymanie
Po uruchomieniu strony konto hostingowe padło ofiarą ataku malware. Ponieważ front-end jest statycznym eksportem z repozytorium, stronę odtworzono z kodu źródłowego, usunięto wektor ataku i wzmocniono zabezpieczenia hostingu.
Efekt
Redaktorzy publikują treści bez udziału developera. Każda publikacja uruchamia nowy statyczny build. Strona działa na dwóch środowiskach, staging i produkcja, a sam front-end to zwykła statyczna strona, którą obsłuży dowolny hosting.