Rozwój design systemu dla globalnego marketplace’u G2A.com

G2A.com potrzebowało kompleksowego i skalowalnego design systemu dla globalnego marketplace’u obsługującego ponad 30 milionów użytkowników ze 180 krajów.

Kluczowym wyzwaniem było opracowanie re-używalnych komponentów UI w React z wykorzystaniem Tailwind CSS, które mogłyby wspierać dynamiczny rozwój platformy i być łatwo wdrażane w różnych częściach aplikacji.

Rozwiązanie musiało spełniać wymagania dostępności WCAG, działać responsywnie, wspierać wysoką wydajność aplikacji oraz być dobrze udokumentowane dla zespołów frontendowych.

Edge One Solutions wsparło G2A.com, dostarczając specjalistów IT odpowiedzialnych za rozwój design systemu i biblioteki komponentów UI.

Zakres wsparcia obejmował tworzenie komponentów w React, pracę z Tailwind CSS, dostosowanie komponentów do wymagań dostępności i responsywności oraz przygotowanie dokumentacji w Storybooku.

Zespół wspierał również optymalizację kodu pod kątem testowalności, standardów UX/UI, wydajności aplikacji oraz łatwiejszej integracji nowych funkcji przez inne zespoły deweloperskie.

W ramach projektu rozwijana jest skalowalna biblioteka komponentów UI w React, zbudowana z wykorzystaniem Tailwind CSS.

Biblioteka obejmuje zarówno podstawowe elementy interfejsu, takie jak przyciski i pola formularzy, jak również bardziej zaawansowane komponenty, m.in. okna modalne i karty produktów.

Komponenty są dokumentowane w Storybooku, co ułatwia ich ponowne wykorzystanie, wspiera spójność wizualną aplikacji i skraca czas integracji nowych funkcji w różnych częściach platformy.

W dużych platformach marketplace design system nie jest wyłącznie zestawem zasad wizualnych, ale techniczną podstawą szybkiego, spójnego i przewidywalnego rozwoju produktu.

Projekt G2A.com pokazuje, jak biblioteka komponentów UI może wspierać skalowanie platformy, automatyzację pracy frontendowej, dostępność interfejsów oraz spójność doświadczenia użytkownika.

Dla firm rozwijających globalne produkty cyfrowe podobne rozwiązania mogą skracać czas wdrażania nowych funkcji, ograniczać niespójności w interfejsie i ułatwiać współpracę między zespołami produktowymi oraz technologicznymi.