Młodzieżowa Liga E-sportowa (MLE) to organizacja skupiająca młodych graczy w rywalizacji na najwyższym poziomie. Projekt wymagał kompleksowego podejścia - od naprawy problemów z responsywnością, przez redesign, aż po dodanie nowych funkcjonalności.
Współpraca z zespołem MLE zaowocowała nowoczesną, w pełni responsywną stroną, która sprosta wymogom zarówno zawodników, jak i kibiców.
Problemy do rozwiązania
Poprzednia wersja strony miała kilka istotnych wad, które utrudniały korzystanie z niej:
Złamany layout na mobile - Strona nie działała poprawnie na smartfonach i tabletach.
Przestarzały design - Wygląd nie odzwierciedlał dynamizmu e-sportu.
Brak kluczowych informacji - Trudno było znaleźć harmonogramy turniejów i wyniki.
Ciężki kod CSS - Mieszanka różnych stylów spowalniała stronę.
Zakres prac
1. Migracja CSS → Tailwind
Przepisaliśmy cały CSS, korzystając z Tailwind CSS. To przyspieszyło development i zredukowało objętość plików stylów o ponad 60%.
2. Naprawa responsywności
Zoptymalizowaliśmy layout na urządzeniach mobilnych - zastosowaliśmy flexbox i grid, aby wszystkie sekcje wyglądały idealnie na każdym ekranie.
3. Nowy design hero section
Sekcja główna została zaprojektowana od podstaw - dynamiczny gradient, animacje i wyraźny CTA przyciągają uwagę od pierwszych sekund.
4. Panel turniejów i drużyn
Dodaliśmy interaktywną listę turniejów z możliwością przeglądania harmonogramów, wyników i składów drużyn. Wszystko w jednym miejscu.
5. Dwujęzyczność (PL/EN)
MLE organizuje turnieje międzynarodowe, dlatego strona musiała wspierać wiele języków. Zaimplementowaliśmy system tłumaczeń, który pozwala łatwo przełączać się między polskim a angielskim.
Stack technologiczny
React + TypeScript - Dla dynamicznych komponentów
Tailwind CSS - Szybki i elastyczny styling
i18next - System tłumaczeń
Vite - Ultraszybki build tool
Rezultaty projektu
Po wdrożeniu nowej wersji strony, MLE odnotowało wzrost ruchu na stronie o 40% oraz większe zaangażowanie społeczności w organizowane turnieje.
W kolejnych etapach planujemy dodać system rejestracji drużyn oraz live scoring podczas meczów.
Zobacz stronę na żywo
youth-esports-league.com →
