Case study · Sport i technologia

FIBA Coaching App.

Pełne przepisanie platformy dla trenerów koszykówki - z migracją setek tysięcy rekordów, współpracą sztabu, trybem offline i uratowanym edytorem grafik taktycznych.

12miesięcy

266zmergowanych PR-ów

75ekranów

52typy treści w API

~3 800testów automatycznych

−50%wagi silnika edytora

Sytuacja wyjściowa

Klient miał używaną od lat aplikację: bibliotekę ćwiczeń i zagrywek, plany treningowe, kadrę, materiały edukacyjne oraz edytor grafik. Produkt działał, ale technologicznie stanął w miejscu.

Jedno konto = jeden trener

Wszystko należało do pojedynczego konta. Wspólny dostęp sztabu do zawodników, planów, obecności i biblioteki wymagał zmiany modelu własności danych.

Duży, historyczny zbiór danych

Około 442 tys. ćwiczeń, 304 tys. grafik taktycznych, ponad 30 tys. zagrywek, 18 tys. playbooków i tysiące planów treningowych na jedno konto - bez możliwości utraty danych.

Schemat pełen pułapek

Kolumny liczbowe zawierały tekst, relacje bywały puste, brakowało slugów, a dokumentacja i typy nie odpowiadały rzeczywistym danym produkcyjnym.

Brak mobilności

Aplikacja wymagała stałego połączenia, nie instalowała się na telefonie, a zamrożony edytor jQuery/Snap.svg nie obsługiwał dotyku na współczesnych urządzeniach.

Treści w starym CMS-ie

Artykuły były surowym HTML-em, a nagrania mieszały pliki MP4 i embedy bez spójnego modelu publikacji.

Zakres projektu

Przepisaliśmy aplikację dla trenera od podstaw: nowy frontend, API i model współpracy, ale na tych samych, zmigrowanych danych produkcyjnych. To nie był greenfield.

Zaproponowaliśmy model workspace'ów zamiast własności indywidualnej. Wybrany workspace decyduje, gdzie powstają rekordy, jaka biblioteka jest dostępna oraz kto może edytować i usuwać dane. Była to przygotowana wspólnie z klientem decyzja produktowa, nie tylko zadanie techniczne.

Plany treningoweBloki, stacje, sesje dzielone, obecność, notatki i cykle powtarzalne.

KalendarzWidoki miesiąca i dnia, serie treningów i zdarzenia odtworzone z legacy.

Biblioteka wiedzyĆwiczenia, zagrywki, playbooki, breakdown drills, kategorie i tagi per workspace.

KadraZespoły, zawodnicy, trenerzy, role, historia przynależności i zaproszenia.

Edytor grafikSchematy boiskowe z obsługą dotyku, pełnym ekranem i pracą krokową.

Materiały edukacyjneMigracja artykułów i klinik trenerskich, filtry, tagi i znaczniki w wideo.

Eksport PDFDziewięć widoków renderowanych w headless Chromium oraz paczka ZIP grafik.

Tryb offline (PWA)Odczyt i zapis bez sieci, trwała kolejka zmian, instalacja na iOS i Androidzie.

Dostarczyliśmy również całą warstwę serwerową: 52 typy treści w Strapi, endpointy zakresowane workspace'em, uprawnienia, zaproszenia, migracje i skrypty naprawcze dla danych legacy.

Edytor grafik taktycznych - osobny przypadek

Format sceny starego edytora był kontraktem dla około 304 tys. istniejących rysunków. Silnika nie można było po prostu wymienić. Otrzymaliśmy zamrożony bundle o wadze 1,3 MB, bez procesu budowania i wsparcia autora.

Co zastaliśmy

Brak dotyku

Nieaktualne API sprawiało, że narzędzia nie rejestrowały ruchu palcem, a pinch-to-zoom zostawiał przypadkowe kreski.

Ponad połowa martwego kodu

jQuery 1.8.3 i JSZip były ładowane mimo braku realnego użycia.

Niewidoczne archiwum

Rysunki zapisane wyłącznie jako XML nie pojawiały się w planach, miniaturach ani na wydrukach.

Interfejs nie na telefon

Dialogi wychodziły poza layout, kontrolki zasłaniały boisko, a część operacji wymagała myszy.

Jak do tego podeszliśmy

Wprowadziliśmy kontrolowane łatanie kodu dostawcy: zapisany punkt odniesienia, rejestr każdej poprawki, brak kasowania oryginalnego kodu i czytelne źródła odpowiadające każdej zmianie. Zachowaliśmy zgodność historycznych scen, a obcy silnik stał się bezpiecznie rozwijalną częścią produktu.

Rozmiar bundle'a1 334 KB673 KB

Po kompresji301 KB136 KB

Parsowanie i start29,1 ms6,9 ms

Miniatura grafiki~240 KB PNG~6 KB WebP

Rysowanie palcem działa na współczesnych iOS i Androidzie, a gest dwoma palcami nie brudzi boiska.
Historyczne sceny XML są renderowane tym samym silnikiem i odzyskują obrazy używane w planach, miniaturach, PDF-ach i ZIP-ach.
Wynik po odchudzeniu pozostaje bit w bit zgodny - zweryfikowaliśmy sceny, eksport PNG i strukturę boiska.
Tryb pełnoekranowy, gesty, edycja jednym dotknięciem i wariant koszykówki na wózkach zapewniają realną pracę na telefonie i tablecie.
Edytor działa offline, a grafiki utworzone bez sieci trafiają do trwałej kolejki zapisów.

Zastosowane technologie

Frontend: Next.js 16, React 19, TypeScript 5
UI: Tailwind CSS v4, Radix UI / shadcn, Vaul, dnd-kit, React Hook Form + Zod
Backend: Strapi 5, MySQL 8, migracje Knex, autoryzacja na ciasteczkach HttpOnly
Offline: Własny Service Worker, IndexedDB, trwały outbox i klucze idempotencji
Infrastruktura: AWS EC2, RDS, S3 i CloudFront; LocalStack oraz Docker Compose lokalnie
Dokumenty: Headless Chromium i Playwright do serwerowego renderowania PDF
Jakość: Vitest 4, Testing Library, Playwright, ESLint, Biome, CSP i automatyczne bramki jakości

Cała komunikacja z API odbywa się po stronie serwera. Przeglądarka nie odpytuje backendu bezpośrednio, a sesja pozostaje w ciasteczku HttpOnly.

Rola AI w przepisaniu platformy

Projekt był prowadzony w modelu wspomaganym przez AI od pierwszego dnia. Najważniejsze nie było samo generowanie kodu, lecz rygor sprawiający, że rezultat można bezpiecznie przyjąć do produkcji.

Standardy jako kontrakt

17 plików reguł i 7 opisanych procesów sprawiało, że każdy model oraz narzędzie rozpoczynały pracę z tym samym zestawem wymagań.

Wyspecjalizowane sesje

40 samodzielnych briefów zawierało zakres, mapę plików, kształt API i reguły najbardziej narażone na złamanie. Wyniki wracały jako zwykłe pull requesty.

Weryfikacja zamiast zaufania

Każdy fakt o backendzie potwierdzaliśmy na działającym API. Dokumentacja i typy były hipotezą, dopóki nie potwierdziły ich prawdziwe dane.

Bramki jakości

Typy, testy i dwa lintery automatycznie decydowały, czy zadanie jest skończone. Blisko 3 800 testów pozwalało poruszać się szybko bez regresji.

Wielotorowe review

Najbardziej ryzykowne obszary offline przeszły 11 udokumentowanych rund przeglądu. Każda znaleziona usterka otrzymała poprawkę i test regresji.

Decyzje pozostają ludzkie

Model workspace'ów, zakres feedbacku, sposób łatania silnika oraz decyzje o tym, czego nie budować, były przygotowane z konsekwencjami i zatwierdzane przez klienta.

Efekt: 266 pull requestów i 576 commitów w 12 miesięcy, równolegle z odtwarzaniem nieudokumentowanego modelu danych i utrzymaniem pełnego pokrycia testami.

Osiągnięte rezultaty

Aplikacja wdrożona

75 ekranów działa na produkcji, a staging aktualizuje się automatycznie.

Dane zachowane

Zmigrowaliśmy bibliotekę, grafiki, playbooki, cykle treningowe i archiwalne materiały bez utraty dorobku użytkowników.

Współpraca sztabu

Workspace'y, zaproszenia, role i spójne uprawnienia umożliwiły realną wspólną pracę.

Pełny tryb offline

Plany, obecność i edycja treści działają bez sieci, z ochroną przed konfliktem i podwójnym zapisem.

Aplikacja mobilna bez sklepów

PWA instaluje się na iOS i Androidzie i uruchamia jak aplikacja natywna.

Edytor uratowany

Jest o połowę lżejszy, obsługuje dotyk i offline, zachowując format około 304 tys. rysunków.

Jakość egzekwowana kodem

Około 3 800 testów oraz 64 scenariusze end-to-end obejmują także utratę sieci i restart przeglądarki.

Powtarzalny proces AI-assisted

Każdy z 266 PR-ów przeszedł review i komplet automatycznych bramek jakości.