Powrót do projektów

Strona publiczna · Fintech

GRX — Platforma publiczna

Inżynier Frontend — pełna odpowiedzialność za architekturę · Feb 2026 – Jul 2026

GRX to szwajcarski ekosystem crypto-fintech obejmujący płatności, giełdę i tokenizowane aktywa rzeczywiste. Zbudowałem publiczną platformę od zera — stronę marketingową, strony cenowe i produktowe oraz sekcję kariery — wraz ze współdzieloną biblioteką komponentów, na której teraz działa strona i reszta produktów firmy.

Wyzwanie

GRX miał trzy produkty w budowie jednocześnie — Pay, Exchange, RWA — i nie miał ani publicznej strony, by je zaprezentować, ani współdzielonej biblioteki komponentów dla zespołów, które je budowały, więc każdy ekran produktu był osobną, jednorazową implementacją tych samych przycisków, pól i kart. Dwa problemy, jedna przyczyna: zbudować stronę od zera i zbudować pod nią system projektowy, aby strona i produkty w końcu mówiły tym samym językiem wizualnym.

Podejście

  • Wydzieliłem współdzieloną bibliotekę komponentów — ponad 50 komponentów — od zera, używaną zarówno przez stronę marketingową, jak i aplikacje produktowe, zamykając rozbieżność między tym, co pokazuje marketing, a tym, jak faktycznie wygląda produkt
  • Renderowanie po stronie serwera z routingiem uwzględniającym język wbudowanym w strukturę URL, więc każda strona produktu jest wysyłana przetłumaczona i statycznie wygenerowana dla każdego języka
  • Dostępne prymitywy interakcji (dialogi, zakładki, akordeony) zbudowane raz we wspólnej bibliotece zamiast ręcznego zarządzania fokusem w każdym komponencie
  • Treści kariery i redakcyjne tworzone jako tekst strukturalny i renderowane w czasie builda, co utrzymuje pipeline treści poza krytyczną ścieżką wdrożenia
  • Budżet wydajności egzekwowany jako automatyczna bramka, a nie jednorazowy audyt, dzięki czemu regresje są wychwytywane przed mergem

Rezultat

95+

wynik Lighthouse, mobilny LCP poniżej 1,5s

50+

współdzielona biblioteka 50+ komponentów, ~70% mniej niespójności wizualnych

Strona główna — pozycjonowanie GRX w płatnościach, giełdzie i tokenizowanych aktywach
GRX Pay — strona produktowa dla obszaru płatności
Cennik GRX Pay — warstwowa struktura prowizji dla merchantów, od samoobsługi po indywidualne umowy wolumenowe
GRX Exchange — strona listy oczekujących dla handlu detalicznego, uruchomiona przed premierą
O GRX — strona pozycjonująca firmę
Kariera — hub rekrutacyjny, treści tworzone w Markdown i renderowane w czasie builda

@grx/ui — biblioteka komponentów

200+ ikon monet — jeden z zestawów ikon dostarczanych z biblioteką
Tokeny projektowe — skale kolorów, promieni i cieni udokumentowane w bibliotece komponentów
Skala typografii — każdy rozmiar tekstu wyświetlacza i podstawowego, udokumentowany z dokładnymi metrykami
Prawdziwy ekran ustawień, zbudowany z biblioteki — Modal, Switch, ikony i Typography działające razem