Problem
Wejście do platformy było rozbite na kilka wariantów rejestracji i luźno powiązane ekrany logowania, weryfikacji i odzyskiwania dostępu. Taki obszar trudno było utrzymywać i rozwijać, a użytkownik w każdym miejscu trafiał na trochę inne zachowanie.
Moja rola
Implementacja całego frontendu nowego przepływu na podstawie projektu, łącznie z jego architekturą.
Co zbudowałem
- Ekrany rejestracji, logowania, resetu i zmiany hasła, weryfikacji e-maila, 2FA i odzyskiwania konta kluczem.
- Logowanie i rejestracja przez Google i Microsoft.
- Wspólne komponenty formularzy z jedną logiką walidacji, komunikatami błędów i stanami: ładowanie, zablokowany, sukces, błąd.
- Weryfikacja e-maila kodem, z możliwością ponownego wysłania.
- Krok płatności przy rozpoczęciu triala.
- Układy jedno- i dwukolumnowe, responsywność oraz tryb jasny i ciemny.
Wyzwania
01 · Walidacja
Wiele formularzy z różnymi regułami, a zachowanie ma być wszędzie takie samo. Reguły opisane w Zod i podpięte przez React Hook Form dały jeden sposób walidacji i komunikowania błędów. Wymagania, np. co do hasła, użytkownik widzi przed wysłaniem formularza, a nie dopiero po błędzie.
02 · Krytyczne miejsce bez marginesu na błąd
Przez rejestrację i logowanie przechodzi każdy użytkownik, więc każdy błąd oznacza utraconego klienta albo zablokowany dostęp do konta. Stany i przypadki brzegowe pokryłem testami w Vitest i uzgodniłem z QA przed wdrożeniem.
Efekt
- Jeden spójny przepływ wejścia do platformy zamiast kilku wariantów.
- Prostszy w utrzymaniu i rozwijaniu kod ekranów uwierzytelniania.
- Przepływ przygotowany pod przyszłe zmiany w onboardingu, cenniku i zakładaniu konta.