FitKPCS
(Babí léto 2025)

FitKPCS je firemní webová aplikace pro sportovní výzvu Babí léto 2025. Zaměstnanci synchronizují aktivity přes Strava API, sbírají body za sporty, soutěží v týmech, lajkují a komentují si vzájemně tréninky.

Moje role byla Přispěvatelka — 24 reálných commitů za 17 dní (26. 11. — 12. 12. 2025), primárně na větvi fixes. Pracovala jsem na feedu aktivit, detailu aktivity s mapou a na architektonickém zlepšení sdíleného stavu lajků napříč třemi komponentami.

FitKPCS spojuje firemní sociální feed s tracking platformou. Uživatel propojí svůj Strava účet, aktivity se automaticky synchronizují do feedu, kde je tým vidí, lajkuje a komentuje. Bodový systém škáluje podle sportu, žebříček ukazuje pořadí jednotlivců i týmů. Vedle toho modul charitativních cílů, news draft posty se sdílením na sociální sítě a invitation flow pro nové uživatele přes magic link.

9 commitů v hlavní obrazovce platformy — unified feed:

• Multi-select filtry — filtrování feedu podle více uživatelů najednou s lazy loading (data se načítají až při otevření dropdownu, ne při každém refreshi stránky).
• Filtr podle výzvy — nový filtr s refaktoringem komponent (přejmenování quick-filters → feed-filters, smazání nepoužívaných souborů).
• Header navigation — hover animace na notification bell, přesun Feedback a Dovolené do dropdown menu.
• Performance optimalizace — načítání a render feed aktivit.
• Synchronizace lajků — fix konzistence likes mezi API a komponentami.

Klíčové soubory: components/dashboard/unified-feed.tsx, components/dashboard/feed-filters.tsx, app/api/feed/unified/route.ts, hooks/use-unified-feed.ts.

11 commitů v modálním detailu aktivity. Klíčový kus práce:

• Interaktivní Leaflet mapa v detailu aktivity (nová komponenta activity-route-map.tsx) — OpenStreetMap dlaždice, lazy loading polyline dat ze Strava API, start/end markery na trase.
• Hero mapa s trasou jako fallback pro aktivity bez fotky — místo prázdného hero se zobrazí mapa.
• Sjednocení barvy trasy na všech mapách (jednotná černá).
• Carousel fotek — vylepšení activity-photo-carousel.tsx.
• UI detailu — modal layout, sport sekce, badge bodů, komentáře s GIF pickerem (lazy loading obrázků).
• Responsivita modalů — mobile-first přepracování všech feed modalů.

Lajky se zobrazovaly na třech místech: ve feed kartě, v photo carouselu a v detail modalu. Každá komponenta měla svůj vlastní stav — když uživatel lajkoval z modalu, feed pod ním ukazoval zastaralý počet, dokud se znovu nenačetl.

Vytvořila jsem React Context LikesContext jako jediný zdroj pravdy pro lajky napříč těmito třemi komponentami. Změna se propíše okamžitě všude, bez čekání na re-fetch. To vyžadovalo i opravu Tailwind safelist pro dynamické badge barvy bodů (bez safelistu by se vygenerované třídy odstřihly při buildu).

7 commitů v polish a konzistenci designu:

• Jednotný design lajkovacích tlačítek (kulaté vs. pill shape s počtem).
• Vylepšení profilu uživatele a kontrastů na sportovní stránce.
• Komplexní mobile-first responsivita modalů — detail aktivity, photo carousel, komentáře.
• Vylepšení vzhledu activity cards (badge bodů, layout).
• Plovoucí action tlačítka — UI fixes.

Sdílení stavu lajků mezi nezávislými komponentami.

Tři komponenty (feed card, carousel, modal) si držely lokální stav. Místo prop drillingu jsem zvolila React Context — jeden source of truth, change propagation bez refetch.

Strava polyline jako lazy load.

Polyline data pro mapu (encoded GPS trace) jsou velká a Strava API má rate limity. Mapa se vykresluje až když uživatel rozevře detail aktivity — nikoliv ve feedu.

Tailwind safelist pro dynamické třídy.

Body za sport se renderovaly přes dynamicky generované Tailwind třídy (bg-{color}-{shade}). Tailwind build je při tree-shakingu odstřihl jako nepoužívané. Fix: přidání do safelistu.

Mobile-first refit feature postavené pro desktop.

Modal detailu aktivity vznikl jako desktop dialog. Hodně commitů v posledních dnech projektu šlo na zužování breakpointů, scroll management a touch targets pro telefon.

Z git logu autora schwubova@kpcs.cz: