Przejdź do głównej treści
Mateusz Miszczak

Case Studies

Case Studies

Wybrane obszary produkcyjne, które realizowałem w aplikacjach fintechowych.

  1. 01Realtime · Fintech

    Interfejsy fintechowe w czasie rzeczywistym

    Frontend Developer
    Panel partnera
    Fintech
    PROBLEM

    Wewnętrzny panel administracyjny nie zapewniał spójnego widoku kont klienta. Dane portfela, ceny aktywów i historia transakcji były rozproszone po osobnych ekranach, bez możliwości przechodzenia między poziomami ani inicjowania transakcji bezpośrednio z widoku portfela.

    PODEJŚCIE

    Zbudowałem wielopoziomowy widok portfela z animowanymi, wysuwanymi panelami kont, panelami szczegółów aktywów z ceną i historią transakcji oraz tabelami transakcji z filtrowaniem według typu. Wartości portfela, ceny aktywów i zawartość tabel są synchronizowane przez WebSockety, dzięki czemu dane zawsze odzwierciedlają aktualny stan rynku.

    REZULTAT

    Użytkownicy mogą teraz przejść od pełnego portfela klienta do konkretnego aktywa i uruchomić przepływ kupna lub sprzedaży bezpośrednio z panelu szczegółów, ze wstępnie uzupełnionym portfelem i aktywem. Wszystkie dane aktualizują się w czasie rzeczywistym, bez ręcznego odświeżania.

    • React
    • TypeScript
    • Redux Toolkit
    • React Query
    • REST API
    • WebSockets
  2. 02Przepływy finansowe

    Wieloetapowe przepływy finansowe

    Frontend Developer
    Trading
    SEPA
    PROBLEM

    Użytkownicy potrzebowali możliwości handlu aktywami i realizowania wypłat bankowych bezpośrednio w aplikacji. Oba przepływy wyglądają podobnie na poziomie interfejsu, ale mają zupełnie inną logikę biznesową, reguły walidacji, modele danych i stany operacji po stronie backendu, przez co wspólna implementacja byłaby niepraktyczna.

    PODEJŚCIE

    Zaprojektowałem i zbudowałem dwa niezależne, trzyetapowe przepływy: modal kupna i sprzedaży aktywów oraz system wypłat bankowych, każdy z własnymi schematami walidacji Zod, maszyną stanów i obsługą błędów. Oba reagują na rzeczywiste potwierdzenia z backendu przesyłane przez WebSockety, a nie tylko na odpowiedź na pierwsze żądanie.

    REZULTAT

    Oba przepływy poprawnie obsługują przypadki brzegowe: nieudane transakcje, stany pośrednie i przerwy w połączeniu sieciowym, a wszystko jest sterowane zdarzeniami WebSocket na żywo. Dzięki celowemu rozdzieleniu każdy przepływ można rozwijać i testować niezależnie.

    • React
    • TypeScript
    • React Query
    • REST API
    • WebSockets
    • Zod
  3. 03Systemy administracyjne

    Systemy administracyjne i onboarding klientów

    Frontend Developer
    Panel administracyjny
    Portal partnera
    PROBLEM

    Operacje administracyjne wymagały złożonych, wieloetapowych formularzy spełniających wymagania zgodności regulacyjnej. Wyszukiwanie w dużych zbiorach użytkowników generowało nadmiarową liczbę wywołań API z powodu braku mechanizmu debounce.

    PODEJŚCIE

    Zaimplementowałem pełny cykl życia konta użytkownika: zmiany statusu, kontrolę dostępu, zamykanie kont i odzyskiwanie dostępu do konta. W ramach onboardingu klientów zbudowałem wieloetapowe formularze walidowane Zod i zintegrowałem ustrukturyzowane dane zgodności regulacyjnej. Dodałem też debounce 500 ms w polu wyszukiwania, aby ograniczyć zbędne wywołania API.

    REZULTAT

    Debounce w wyszukiwaniu znacząco zmniejszył obciążenie API podczas wyszukiwania użytkowników. Wieloetapowe formularze onboardingu z walidacją Zod zapobiegają przesyłaniu nieprawidłowych danych i dają jasną informację zwrotną na każdym kroku. Obsłużony jest pełny cykl życia konta, łącznie ze stanami brzegowymi, takimi jak odzyskiwanie dostępu do konta.

    • React
    • TypeScript
    • Redux Toolkit
    • REST API
    • WebSockets
    • Zod
  4. 04Podatki i compliance

    Zarządzanie podatkami i przepływy dokumentów

    Frontend Developer
    Podatki
    Compliance
    PROBLEM

    Klienci potrzebowali wglądu w historię podatkową, wyboru roku podatkowego i zarządzania wnioskami o dokumenty podatkowe, ale interfejs nie miał mechanizmu synchronizacji ze stanami operacji po stronie backendu w trakcie wieloetapowych procesów. Po złożeniu wniosku brakowało wiarygodnej informacji, czy operacja się powiodła.

    PODEJŚCIE

    Zaimplementowałem widoki historii podatkowej klienta, wybór roku podatkowego, tabele dokumentów podatkowych oraz pełne przepływy tworzenia i edycji wniosków. Dane i stany interfejsu są sterowane odpowiedziami WebSocket, dzięki czemu każdy widok dokładnie odzwierciedla aktualny stan operacji po stronie backendu.

    REZULTAT

    Przepływ wniosków podatkowych obsługuje wszystkie stany pośrednie, od złożenia po potwierdzenie przez backend, bez odświeżania strony. Aktualizacje przez WebSockety wyeliminowały opóźnienie między działaniem użytkownika a reakcją interfejsu, dzięki czemu klienci widzą dokładny status na każdym etapie.

    • React
    • TypeScript
    • Redux Toolkit
    • React Query
    • WebSockets
    • Zod
  5. 05Marketing i CMS

    Wielojęzyczne strony landingowe i serwisy oparte na CMS

    Frontend Developer
    Next.js
    Strapi
    Turborepo
    SEO
    Analityka
    PROBLEM

    Dwa wielojęzyczne serwisy marketingowe trzeba było utrzymywać i rozwijać w ramach wspólnego ekosystemu Turborepo. Oba korzystały z treści zarządzanych w CMS, obsługi zgód cookie, Google Analytics, responsywnych układów i spójnej struktury we wszystkich wersjach językowych. Jeden serwis należało zbudować od podstaw, a drugi wymagał ciągłego rozwoju bez duplikowania wspólnej logiki frontendowej.

    PODEJŚCIE

    Zbudowałem od podstaw jeden wielojęzyczny serwis marketingowy w Next.js i kontynuowałem rozwój drugiego, istniejącego serwisu w tym samym ekosystemie Turborepo. Pracowałem z treściami z CMS Strapi, implementując responsywne sekcje landingowe, podstrony, animowane układy i renderowanie zależne od wersji językowej. Obsługę zgód cookie i Google Analytics wyodrębniłem do wspólnego pakietu Turborepo, z którego obie aplikacje korzystają przez jeden import i obiekt konfiguracyjny. Skupiłem się na przejrzystej architekturze informacji, semantycznym HTML-u, sekcjach wielokrotnego użytku, responsywności oraz łatwych w utrzymaniu, gotowych do produkcji komponentach.

    REZULTAT

    Oba serwisy marketingowe współdzielą teraz jedną warstwę obsługi cookies i analityki, bez zduplikowanej logiki zgód w monorepo. Pierwszy serwis został dostarczony od podstaw, z wieloma podstronami, animowanymi sekcjami i wielojęzycznymi treściami z CMS, a drugi jest nadal rozwijany na tej samej wspólnej architekturze frontendowej. Takie rozwiązanie ułatwia dodawanie nowych sekcji, aktualizowanie treści CMS we wszystkich wersjach językowych oraz utrzymanie spójnych, szybkich i łatwych w rozwoju stron marketingowych.

    • React
    • Next.js
    • TypeScript
    • Strapi CMS
    • Turborepo
    • Tailwind CSS
    • Framer Motion
    • Google Analytics
    • Cookie Consent
    • SEO
    • Responsive UI
Case Studies | Mateusz Miszczak