Liga Astra: liga tenisowa, która sama publikuje wyniki

Problem

Strona ligi działała na WordPressie, ale prawie nic w niej nie korzystało z WordPressa. Każda podstrona ligowa pokazywała pięć okienek z jednego Arkusza Google, wyciętych według wpisanych na sztywno zakresów komórek. Rankingi pochodziły z dwóch kolejnych arkuszy, strona główna i strony z historią były dashboardami Looker Studio, a wyniki przesyłano przez osadzony Formularz Google.

Takie rozwiązanie rodziło konkretne problemy:

• Zawierało błędy w danych. Audyt działającej witryny ujawnił wiersze z nieistniejącymi zawodnikami, tabelę ligową sprzeczną z wprowadzonymi wynikami i kolumnę rankingu, która każdemu odwiedzającemu pokazywała błąd arkusza.
• Było niewidoczne dla wyszukiwarek. Treści z osadzonych arkuszy nie da się zaindeksować, a na telefonach same tabele przewijały się niezależnie od reszty strony. A tabela ligi to dokładnie to, czego zawodnicy szukają.
• Nie miało pamięci. Każda runda nadpisywała poprzednią, więc historia istniała tylko w dashboardach.
• Było kruche. Każda zmiana składu wymagała ręcznej podmiany linków do arkuszy w WordPressie, a do 25 z 41 zaindeksowanych stron w ogóle nie dało się dojść z menu.

Podejście

Zanim cokolwiek zaproponowaliśmy, spisaliśmy, z czego tak naprawdę składa się obecny serwis, podstrona po podstronie. Tańszą opcję, czyli zostawienie arkuszy i pobieranie z nich danych podczas generowania widoku, wyceniliśmy i odrzuciliśmy, bo przeniosłaby do nowej wersji wszystkie dotychczasowe problemy.

Klub wybrał bazę danych jako jedno źródło prawdy. Resztę ukształtowały trzy decyzje:

• Wprowadzenie błędnych danych ma być niemożliwe, a nie tylko mało prawdopodobne. Mecz musi wskazywać dwóch prawdziwych zawodników, a tabela jest liczona z wyników, a nie wpisywana obok nich, więc nigdy nie może im przeczyć.
• Publiczna strona zostaje statyczna. Odwiedzający dostają proste, szybkie strony. Baza danych nie jest bezpośrednio dostępna z internetu; strona jest z niej przebudowywana, gdy coś się zmienia.
• Przebudowujemy tylko to, z czego ludzie korzystają. Odtworzyliśmy 16 stron z menu, a pozostałe stare adresy przekierowujemy.

Przeczytaj diagram jako tekst

1. Przed: Wyniki przesyłane przez Formularz Google, potem Jedna zakładka arkusza na ligę, nadpisywana co rundę, potem Pięć osadzonych okienek na stronie ligi, potem Dashboardy Looker Studio jako jedyne archiwum wyników, potem Wokół tego strona w WordPressie. Nieindeksowalne, niewygodne na telefonie i podatne na wzajemnie sprzeczne dane.
2. jedno źródło prawdy o zawodnikach i wynikach
3. Po: Wyniki wpisywane na telefonie z krótkim kodem, potem Panel administracyjny dla organizatora, potem Baza ligi: tabele liczone z wyników, potem Statyczna strona generowana bezpośrednio z bazy, potem Cotygodniowy mail z wynikami, zatwierdzany przez organizatora. Dane w tabelach muszą zgadzać się z wynikami.

Wdrożenie

• Strona publiczna. Tabele lig, siatki wyników, terminarze, strony zawodników, ranking klubowy kobiet i mężczyzn, statystyki i regulamin, łącznie 32 strony. Nawigację i szerokie tabele zaprojektowaliśmy najpierw z myślą o telefonach: wysuwane menu zamiast menu otwieranego po najechaniu kursorem i siatka wyników przewijana w bok z przypiętymi nazwiskami.
• Panel administracyjny. Po polsku, dla jednego organizatora: tworzenie rundy przez wklejenie składów (terminarz generuje się sam), edycja i łączenie zawodników, przenoszenie zawodnika między ligami z podglądem tego, co się zmieni, import starych sezonów z CSV i drukowanie pustych terminarzy na A4.
• Wpisywanie wyników z telefonu. Osoba wpisująca wyniki otwiera jeden publiczny adres i podaje kod złożony z trzech polskich słów. Telefon zostaje zapamiętany, a kod otwiera siatkę wyników i nic więcej.
• Publikacja. Zapisanie wyniku uruchamia przebudowę witryny, a zmiany są widoczne publicznie po około dwóch minutach. Strona diagnostyczna w panelu wyjaśnia krok po kroku, dlaczego zapisany wynik jeszcze się nie pojawił.
• Cotygodniowy newsletter. W każdy poniedziałek podsumowanie wyników jest przygotowywane automatycznie i wysyłane mailem do organizatora, który je zatwierdza albo odrzuca. Bez tej zgody nic nie wychodzi. Listę subskrybentów odzyskaliśmy ze starej wtyczki WordPressa, zachowując status zgody każdej osoby.
• Regulamin jako osobne podstrony. Zasady przenieśliśmy z osadzonego PDF-a na czytelne strony z linkiem do każdego punktu, więc można je znaleźć w wyszukiwarce i zacytować w wiadomości.
• Przełączenie, które dało się cofnąć. Nowa strona najpierw działała pod prywatnym adresem. Wdrożenie sprowadzało się do zmiany dwóch nazw katalogów z opcją automatycznego cofnięcia zmian, a starą instalację WordPressa zachowaliśmy w osobnym katalogu na wszelki wypadek, zamiast ją usuwać.
• Kontrola przy każdej zmianie. Testy automatyczne sprawdzają poprawność danych, parser wyników i zgodność eksportu z PHP ze stroną, a przy każdym wdrożeniu weryfikowane są wszystkie linki wewnętrzne.

Przeczytaj diagram jako tekst

1. Człowiek: Wynik wpisany na telefonie (kod z trzech słów)
2. Zapisany i sprawdzony (w jednej transakcji)
3. Tabele przeliczone (z wyników, nigdy nie wpisuje się ich ręcznie)
4. Strona wygenerowana na nowo z danych (automatycznie)
5. Publiczne tabele zaktualizowane (ok. 2 minuty)

Efekt

• Nowa strona działa od 17 września 2026 roku i zastąpiła WordPressa, osadzone arkusze, Formularz Google i dashboardy Looker Studio.
• Tabele i ranking klubowy są liczone z wyników, więc błędy i niespójności ze starej strony już się nie powtórzą.
• Organizator prowadzi ligę z jednego panelu, a wyniki wpisane z telefonu trafiają na publiczne strony bez naciskania żadnego przycisku.
• Strony lig są czytelne na telefonie i prawidłowo indeksują się w wyszukiwarkach.
• Główne zdjęcie na stronie startowej jest serwowane jako responsywny WebP: telefon pobiera wersję 19 kB zamiast oryginału o wadze 2,6 MB.

Przeczytaj diagram jako tekst

1. 30 sie: Przegląd starej strony; wybór bazy danych
2. 31 sie: Start panelu administracyjnego i eksportu danych
3. 4 wrz: Pierwsze wdrożenie testowe; newsletter; import CSV
4. 9 wrz: Import prawdziwych danych ligi
5. 10 wrz: Link do formularza wyników dla sędziów i organizatorów
6. 11 wrz: Kody z trzech słów; narzędzia do przełączenia
7. 17 wrz: Start
8. 21 wrz: Regulamin w formie podstron serwisu
9. 13 paź: Poniedziałkowy szkic wysyłany do zatwierdzenia

Wnioski

Problem ze stroną małego klubu to często bałagan w danych, który tylko wygląda na problem z wyglądem. Kiedy pojawiło się jedno wiarygodne źródło informacji o zawodnikach i wynikach, bez trudu udało się stworzyć szybką stronę, tabele wygodne do przeglądania na telefonie oraz zautomatyzować cotygodniowy newsletter.

Technologie

Astro, Tailwind CSS, TypeScript, Zod, PHP, MariaDB, GitHub Actions

Rodzaj

Strategia i wdrożenie

• website
• sports
• league
• admin-panel
• newsletter
• wordpress-migration
• static-site
• mobile-first