web / corporate

TRY DIVE – Strona szkoły nurkowania z konfiguratorem ścieżki kursanta

Strona szkoły nurkowania z Sanoka zbudowana od zera na Astro 6 i Cloudflare: oferta kursów i wyjazdów prowadzona z własnego panelu, konfigurator ścieżki kursanta i płynne przejścia między podstronami.

TRY DIVE

2026-05-28

Wyzwanie

TRY DIVE to szkoła nurkowania z Sanoka, która szkoli nad Soliną i w Bieszczadach. Szkoła potrzebowała strony, która pokaże całą ofertę – od pierwszego nurkowania po kursy techniczne i wyjazdy – i którą da się prowadzić bez programisty. Główne wyzwania obejmowały:

Rozbudowana oferta: kursy dwóch federacji (IDF oraz SDI/TDI), kilka poziomów zaawansowania i wyjazdy. Osoba, która dopiero zaczyna, musi szybko zrozumieć, od czego zacząć i co jest dalej.
Samodzielna edycja: kursy, terminy, wyjazdy i artykuły zmieniają się w sezonie, więc szkoła musi je aktualizować sama, a zmiany mają być widoczne od razu.
Szybkość mimo zdjęć: strona pełna zdjęć podwodnych miała ładować się szybko także na telefonie, bez skoków układu.
Widoczność lokalna: strona miała być czytelna dla Google i asystentów AI przy wyszukiwaniu kursów nurkowania w Sanoku, nad Soliną i w Bieszczadach.

Rozwiązanie

Zbudowaliśmy stronę od zera na stacku, który łączy szybkość stron statycznych z treścią prowadzoną z panelu:

Astro 6 i Cloudflare: stałe podstrony są generowane z góry, a kursy, wyjazdy i artykuły czytane z bazy Cloudflare D1 i trzymane w pamięci podręcznej przez 5 minut. Całość działa na Cloudflare Workers, a gdy baza nie odpowiada, strona korzysta z zapasowej kopii danych.
Płynne przejścia: przechodzenie między podstronami działa jak w aplikacji, bez przeładowania całej strony (View Transitions w Astro).
Konfigurator ścieżki kursanta: użytkownik podaje cele, docelową głębokość, ukończone kursy i wiek, a algorytm układa kolejne kursy we właściwej kolejności, z uwzględnieniem wymagań wstępnych. Uzupełnia go 6 ścieżek tematycznych, m.in. nurkowanie pod lodem, na wrakach i z dzieckiem.
Własny panel administracyjny: panel w React z 12 widokami (kursy, wyjazdy, artykuły, autorzy, biblioteka mediów, zgłoszenia, ustawienia), chroniony przez Cloudflare Access. Zapis zmiany od razu odświeża pamięć podręczną zmienionych stron.
Bezpieczny formularz: Cloudflare Turnstile, ukryte pole na boty i limit 3 zgłoszeń na godzinę z jednego adresu; nagłówki bezpieczeństwa (m.in. CSP i HSTS) na wszystkich stronach.
SEO i AI: dane strukturalne schema.org (szkoła jako firma lokalna, kursy z terminami, wyjazdy, artykuły, FAQ, ścieżka nawigacji), plik llms.txt dla asystentów AI, mapa strony i zgody na cookies w Google Consent Mode v2.
Design: własny system designu w kolorach marki (granat i żółć), krój Geist serwowany z własnego serwera bez skoków układu przy ładowaniu i dostępność WCAG 2.1 AA jako założenie projektu.

Efekt

Szkoła dostaje stronę, którą może prowadzić sama. Cała oferta – 7 kategorii kursów, 6 ścieżek tematycznych i wyjazdy – jest dostępna pod 24 adresami w mapie strony. Nasze pomiary strony głównej (11.11.2026):

Lighthouse, telefon: Performance 92, Accessibility 100, Best Practices 100, SEO 100 (mediana z 3 pomiarów).
Lighthouse, komputer: Performance 99, Accessibility 100, Best Practices 100, SEO 100 (mediana z 3 pomiarów).
Dostępność: automatyczny test axe (WCAG 2.1 AA) bez uwag na 2 z 5 kluczowych podstron.
Jakość kodu: 90 commitów w dwa tygodnie (14–28 maja 2026). Przed każdym wdrożeniem automatycznie przechodzą lint, sprawdzenie typów, 40 testów jednostkowych i build. Repo ma też scenariusze end-to-end w Playwright (nawigacja, SEO, dostępność, formularz).