Stage Support — realizacja techniczna eventów
Dwujęzyczna strona krakowskiej firmy realizacji technicznej eventów — Next.js 16 + Strapi v5, własny CMS, SEO pod Google i AI, WCAG 2.2 AA, formularz zapytań.

Stage Support to krakowska firma zajmująca się techniczną realizacją eventów — koncertów, konferencji, gal firmowych, produkcji telewizyjnych — prowadzona przez Krzysztofa Pezdę od 2013 roku. Firma obok tego wynajmuje też własny sprzęt nagłośnieniowy i oświetleniowy, część zbudowaną osobiście przez właściciela.

Stara strona firmy była jednostronicową wizytówką bez portfolio realizacji, bez widoczności w Google i bez żadnego sposobu, by ktoś mógł wysłać zapytanie. Zbudowałem od podstaw nową stronę, opartą na Next.js, którą rozbudowałem o panel do samodzielnego zarządzania treścią, pełne SEO, formularz kontaktowy i wdrożenie na serwer.

📋 Metryki projektu

• Status: Zakończone, strona działa na środowisku testowym, czeka na finalne materiały od klienta przed przeniesieniem na docelową domenę
• Rola: Full-Stack Developer / Architekt — cały projekt od strategii po wdrożenie
• Zakres: Strategia i planowanie treści, panel administracyjny (CMS), implementacja frontu, SEO, formularz kontaktowy, dostępność, testy, wdrożenie produkcyjne
• Cel: Zamienić statyczną wizytówkę w stronę, która sama generuje zapytania od klientów i pozwala właścicielowi publikować nowe realizacje bez pomocy programisty

🚀 Jak powstawał projekt

Zaczęliśmy (razem z klientem) od zrozumienia, kim właściwie jest Stage Support — nie agencją eventową, która tylko koordynuje, ale firmą, która fizycznie stawia nagłośnienie, wiesza oświetlenie i obsługuje konsoletę. Ta różnica musiała być widoczna w każdej warstwie strony: w treściach, w strukturze portfolio, w samym designie.

Dalej praca poszła w kilku kierunkach równolegle: dwujęzyczność strony (polski i angielski, każdy pod własnym adresem URL), własny system do zarządzania treścią oparty na Strapi, żeby właściciel mógł samodzielnie dodawać realizacje, opinie klientów i ofertę bez pisania kodu. Każda publikacja w panelu automatycznie odświeża stronę — nie trzeba czekać na redeploy.

Kolejny duży etap to widoczność: metadane, dane strukturalne rozpoznawane przez Google, mapa strony, plik dla wyszukiwarek. Dodatkowo strona jest przygotowana pod to, żeby modele językowe typu ChatGPT czy Perplexity mogły ją poprawnie cytować, kiedy ktoś zapyta o wykonawcę technicznego eventów w Krakowie — to coraz ważniejszy kanał, o którym większość stron lokalnych firm zupełnie zapomina.

Potem formularz kontaktowy zbierający konkretne informacje o evencie (typ wydarzenia, data, liczba osób, miejsce) razem z ochroną przed spamem i limitem zapytań, dodanie Google Analytics z prawidłową zgodą na cookies, oraz runda poprawek pod dostępność — żeby strona dała się obsłużyć klawiaturą, czytnikiem ekranu, i żeby kontrasty kolorów spełniały standard WCAG. Na końcu testy automatyczne, konfiguracja wdrożenia na serwer (Docker, automatyczny build i deploy po każdej zmianie w kodzie) i backup danych.

🎯 Problem biznesowy

Krzysztof realizuje eventy klasy premium od ponad dekady, ale trudno to zobaczyć w internecie. Stara strona nie miała żadnego portfolio, nie było na niej śladu SEO, a osoba szukająca w Google „obsługa techniczna konferencji Kraków” trafiała na agencje eventowe, nie na Stage Support.

❌ Konkretne problemy

• Brak portfolio. Każda zrealizowana gala, koncert czy konferencja to potencjalny materiał, który przyciąga kolejnych klientów i pomaga w wyszukiwaniu — ale dodanie nowej realizacji wymagało programisty, więc nikt tego nie robił.
• Dwa różne biznesy, jedna niewidoczna strona. Obok eventów firma wynajmuje sprzęt nagłośnieniowy i oświetleniowy — czasem innym firmom z tej samej branży. Klienci szukający konkretnego sprzętu do wynajęcia nie mieli szans trafić na Stage Support.
• Zero ścieżki kontaktu. Nie było ustrukturyzowanego formularza, nie było telefonu widocznego na telefonie komórkowym, nie było wyraźnego przycisku „zapytaj o wycenę”.
• Brak widoczności w wyszukiwarkach i w AI. Konkurencja o lokalne frazy w Google wymaga poprawnie opisanych realizacji i danych strukturalnych. A coraz częściej klienci pytają nie Google, ale ChatGPT albo Perplexity — i tam Stage Support też nie istniało.
• Brak dostępności. Instytucje kultury i urzędy, które organizują przetargi na obsługę eventów, wymagają zgodności ze standardami dostępności — a stara strona nie miała nawet podstaw.

💡 Jak to zostało rozwiązane

• Strona odświeża się sama po publikacji w panelu. Gdy właściciel doda nową realizację i ją opublikuje, system CMS wysyła sygnał do strony, a ta natychmiast czyści odpowiednią część pamięci podręcznej i pokazuje nową treść — bez czekania na cykliczne odświeżanie czy ręczny redeploy. Mechanizm jest świadomym kompromisem: strony renderują się dynamicznie przy każdym wejściu (bo dwujęzyczność wymaga precyzyjnych adresów kanonicznych i hreflang per URL), ale same dane z panelu są buforowane, więc strona nie odpytuje panelu przy każdym odświeżeniu — tylko po publikacji, gdy bufor jest selektywnie unieważniany.
• Panel administracyjny bez niespodzianek. Wszystkie dane pobierane z systemu CMS przechodzą przez warstwę walidacji, więc jeśli ktoś w panelu zostawi puste pole albo wpisze coś nietypowego, strona się nie wywali — po prostu pokaże sensowny fallback.
• Rozwiązanie problemu z tłumaczeniami w panelu. System CMS, na którym stoi strona, ma pewną wadę: nowa treść po polsku nie tworzy automatycznie swojego angielskiego odpowiednika, a powiązania (np. „ta realizacja jest tagowana jako koncert”) nie kopiują się między wersjami językowymi. Napisałem mechanizm, który automatycznie tworzy angielski szkielet nowej treści (do ręcznego przetłumaczenia przez redaktora) i utrzymuje powiązania zsynchronizowane między wersją polską i angielską.
• SEO pod dwa kierunki naraz. Klasyczne SEO (tytuły, opisy, dane strukturalne rozpoznawane przez Google, mapa strony) oraz dodatkowo przygotowanie strony pod to, by asystenci AI mogli ją poprawnie zrozumieć i zacytować — plik dla botów, jasno opisane realizacje z konkretami (kto, gdzie, kiedy, jaki sprzęt), FAQ z konkretnymi odpowiedziami.
• Formularz zbierający sensowny kontekst, nie ogólne „napisz do nas”. Typ wydarzenia, data, liczba osób, miejsce — od razu wiadomo, o co pyta klient. Formularz ma ochronę przed botami i limit liczby zgłoszeń z jednego adresu IP na godzinę, a dane trafiają automatycznie na firmowy webhook, nie do bazy danych.
• Google Analytics tylko po zgodzie. Zgodnie z RODO — skrypt śledzący się nie ładuje, dopóki użytkownik nie zaakceptuje banera cookies.
• Dostępność sprawdzona automatycznie i ręcznie. Strona przechodzi zero błędów w automatycznym audycie dostępności (axe-core) na wszystkich stronach w obu językach — klawiatura, czytniki ekranu, kontrast kolorów, wielkość elementów klikanych na mobile.
• Dwie linie biznesu, dwie ścieżki. Oferta eventowa i wynajem sprzętu mają osobne strony, osobne SEO i osobne ścieżki kontaktu, bo trafiają do zupełnie innych grup odbiorców.

📈 Efekt

„Firma miała za sobą dekadę realizacji, ale w internecie nie było tego widać. Zbudowałem stronę, która pokazuje portfolio, sama się aktualizuje po każdej publikacji i pozwala właścicielowi pracować bez programisty.”

🛠️ Wyzwania techniczne

• Wada systemu CMS z tłumaczeniami. Strapi (system, na którym oparty jest panel treści) ma problem: powiązania między treściami (np. „ta realizacja dotyczy koncertu w Krakowie”) nie kopiują się automatycznie między wersją polską i angielską, mimo że pliki multimedialne tak. Napisałem dwa mechanizmy działające w tle: jeden tworzy angielski szkielet nowej treści od razu po dodaniu polskiej wersji, drugi utrzymuje powiązania zsynchronizowane między wersjami językowymi przy każdej zmianie.
• Strona buduje się nawet bez działającego panelu treści. Jeśli podczas budowania strony system CMS jest chwilowo niedostępny, budowanie i tak przechodzi — strona po prostu pokaże treść później, gdy panel wróci i przyjdzie pierwsze żądanie.
• Odświeżanie treści bez zbędnego czekania. Publikacja w panelu wysyła sygnał, który natychmiast czyści odpowiednią część pamięci podręcznej strony — więc nowa treść jest widoczna praktycznie od razu, a nie po godzinie oczekiwania na automatyczne odświeżenie.
• Dwie wersje językowe, każda pod własnym adresem, bez duplikowania kodu. Polska i angielska wersja mają osobne prefiksy w adresie (/pl/, /en/), ze swoimi tłumaczonymi nazwami podstron. Wejście na adres bez prefiksu przekierowuje na właściwą wersję językową na podstawie ustawień przeglądarki. Przełącznik języka zawsze prowadzi do tej samej treści w drugim języku, nie na stronę główną.
• Automatyczny backup z szybkim przywracaniem. Skrypty backupujące bazę danych i pliki multimedialne działają codziennie w nocy, z weryfikacją integralności archiwum. Przywrócenie całości po awarii trwa dosłownie kilka sekund.

🛠️ Architektura i stack techniczny

• Frontend: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS
• Panel treści (CMS): Strapi v5 + PostgreSQL, własne mechanizmy synchronizacji polsko-angielskiej
• SEO: automatyczne metadane, dane strukturalne (Schema.org), mapa strony, plik dla botów wyszukiwarek i AI
• Formularz kontaktowy: walidacja po stronie serwera, ochrona przed spamem, limit zgłoszeń, integracja z Make.com
• Analityka: Google Analytics 4, wyłącznie po zgodzie użytkownika na cookies
• Dostępność: zgodność ze standardem WCAG 2.2 AA, zero błędów w automatycznym audycie
• Testy: testy jednostkowe i integracyjne oraz testy end-to-end symulujące realne działania użytkownika w przeglądarce
• Wdrożenie: Docker, automatyczne budowanie i wdrażanie po każdej zmianie w kodzie, serwer VPS, monitoring dostępności strony, codzienny backup

🎨 Kluczowe decyzje projektowe

• Design „techniczny, nie eventowy”. Biało-szara baza z jednym mocnym akcentem kolorystycznym (pomarańcz), prosta typografia, układ oparty na siatce — całość ma komunikować precyzję i profesjonalizm wykonawcy technicznego, nie kolorowość agencji eventowej.
• Oferta jako jedna strona z sekcjami, nie osobne podstrony. Każda usługa ma swoją sekcję z linkiem-zakotwiczeniem — łatwiej się po tym przewija i łatwiej to zarządzać w panelu.
• Realizacje jako konkretne case studies, nie marketingowy opis. Klient, miejsce, data, liczba osób, wyzwania, efekt, użyty sprzęt, galeria zdjęć — taki format dobrze działa i w Google, i w narzędziach AI, bo jest faktograficzny, nie pusty w treści.
• Wynajem sprzętu jako osobna sekcja z kategoriami. Bez osobnych podstron na każdy produkt — wystarczy jedna strona z zakładkami (dźwięk, oświetlenie, obraz, scena) i tabelą parametrów.
• Dostępność od początku, nie jako poprawka na końcu. Cel: zero błędów w automatycznym audycie dostępności, żeby strona mogła być polecana też instytucjom publicznym, które tego wymagają w przetargach.

Artefakty

• Strona (wersja testowa): https://stagesupport.rafalmajewski.dev/pl
• Docelowy adres: stagesupport.pl (po dostarczeniu finalnych materiałów przez klienta)
• Kod źródłowy: RafalWojciechRolsky/stage-support-v2