Potrzebne jest dokończenie frontendu istniejącego projektu React/TypeScript. Nie jest to rozwój od zera, a staranne zamknięcie kilku błędów UI/UX w już działającym produkcie.
Projekt:
D&D podręcznik z wyszukiwarką, sekcjami, szczegółami, glosariuszem zasad, autoryzacją, profilami, komentarzami, filtrami i mobilnym menu.
Stos technologiczny:
- React 19
- TypeScript
- Vite 7
- Tailwind CSS 4
- Framer Motion
- TanStack React Query
- react-hook-form
- zod
- Google OAuth
- PWA
- SSR/prerender
Ważny kontekst dotyczący kodu:
- główna logika frontendu jest mocno skupiona w jednym dużym App.tsx
- nawigacja nie jest klasycznym przepływem react-router, a ręcznym przez history.pushState / popstate
- filtry już działają i synchronizują się z parametrami zapytania
- auth-flow jest już zrealizowany: logowanie, rejestracja, weryfikacja e-maila, zapomniane hasło, logowanie przez Google
- są wewnętrzne smart-linki po terminach i sekcjach
- są animacje przez Framer Motion
Potrzebne jest zamknięcie takich zadań:
1. Przebudować auth-flow z naciskiem na logowanie
Problem:
Obecnie w UI miejscami nacisk jest na “logowanie / rejestrację”. Należy skupić się na logowaniu.
Co jest potrzebne:
- główne CTA powinno być “Zaloguj się”
- pierwszy ekran modalu autoryzacji powinien być logowaniem
- z ekranu logowania powinien być normalny przejście do rejestracji
- rejestracja pozostaje dostępna, ale jako ścieżka drugorzędna
- nie łamać zapomnianego hasła, weryfikacji e-maila, logowania przez Google
Rezultat:
Przepływ wygląda nowocześniej i logiczniej: główna akcja — logowanie, ale nowy użytkownik wciąż łatwo dociera do rejestracji.
2. Naprawić wyświetlanie filtra podczas przewijania na desktopie i mobilnie
Problem:
Podczas przewijania górny blok wyszukiwania/filtra wygląda źle lub prawie nie jest czytelny.
Co jest potrzebne:
- albo zrobić, aby blok filtra/wyszukiwania był normalnie widoczny podczas przewijania
- albo logicznie go ukrywać podczas przewijania
- rozwiązanie powinno działać równie adekwatnie na desktopie i mobilnie
Rezultat:
Filtr nie “wisi w powietrzu”, nie gubi się w interfejsie i nie wygląda na zepsuty.
3. Naprawić błąd mobilny: pierwsze dotknięcie elementu menu/zakładki pokazuje podpowiedź, a nie wykonuje akcji
Problem:
Na mobilnym urządzeniu pierwsze dotknięcie elementu zakładki/menu wywołuje tooltip/podpowiedź, a przejście działa dopiero przy drugim dotknięciu.
Co jest potrzebne:
- pierwsze dotknięcie powinno od razu wykonywać akcję
- tooltip nie powinien blokować głównej interakcji na mobilnym
- tooltip hover/focus na desktopie należy zachować, jeśli to możliwe bez regresji
Rezultat:
Na mobilnym nawigacja działa od pierwszego dotknięcia.
4. Usunąć powtórne odtwarzanie animacji przy powrocie w mobilnej przeglądarce
Problem:
Na mobilnym urządzeniu przy powrocie w przeglądarce ponownie odtwarzana jest nasza animacja reveal/scroll.
Co jest potrzebne:
- nie usuwać animacji całkowicie
- usunąć właśnie powtórne odtwarzanie w scenariuszu powrotu w przeglądarce
- zachować normalną animację w zwykłym scenariuszu przejścia
Rezultat:
Przy powrocie w przeglądarce strona przywraca się bez powielonej animacji.
Co jest ważne:
- nie przepisywać projektu od zera
- nie łamać ręcznego routingu
- nie łamać parametrów zapytania filtrów
- nie łamać auth-flow
- nie łamać wewnętrznej nawigacji po smart linkach
- pożądany minimalny, staranny refaktoring tylko tam, gdzie jest naprawdę potrzebny
Co będzie plusem:
- doświadczenie z Framer Motion
- doświadczenie z mobilną przeglądarką
Co oczekuję od wykonawcy:
- Używać grupy na Telegramie, gdzie są zadania oraz wideo/zrzuty ekranu
- krótko opisać, jak będziecie podchodzić do zadań
- po wykonaniu pull request z commitami do każdej zmiany
- pożądane zrzuty ekranu/krótkie wideo/GIF z poprawkami desktop/mobilne
- nie tylko “naprawić wizualnie”, ale nie złamać obecnej logiki