Zum Hauptinhalt springen
Mateusz Miszczak

Fallstudien

Fallstudien

Ausgewählte Produktionsbereiche, an denen ich in Fintech-Anwendungen gearbeitet habe.

  1. 01Echtzeit · Fintech

    Fintech-Interfaces in Echtzeit

    Frontend Developer
    Partner-Panel
    Fintech
    PROBLEM

    Dem internen Admin-Panel fehlte eine zusammenhängende Sicht auf die Kundenkonten. Portfoliodaten, Asset-Preise und Transaktionshistorie waren über separate Ansichten verteilt, ohne die Möglichkeit, zwischen den Ebenen zu navigieren oder Handelsaktionen direkt aus dem Portfolio eines Kunden zu starten.

    ANSATZ

    Ich habe eine mehrstufige Portfolio-Ansicht entwickelt, mit animierten, ausklappbaren Konto-Panels, Asset-Detailansichten mit Preis und Transaktionshistorie sowie Transaktionstabellen mit Filterung nach Typ. Portfoliowerte, Asset-Preise und Tabelleninhalte werden über WebSockets synchronisiert, sodass die Daten immer die aktuelle Marktlage widerspiegeln.

    ERGEBNIS

    Nutzer können jetzt vom vollständigen Portfolio eines Kunden bis zu einem einzelnen Asset navigieren und Kauf- oder Verkaufsprozesse direkt aus der Asset-Detailansicht starten, mit vorausgefülltem Wallet und Asset. Alle Daten aktualisieren sich in Echtzeit, ohne manuelles Neuladen.

    • React
    • TypeScript
    • Redux Toolkit
    • React Query
    • REST API
    • WebSockets
  2. 02Finanzprozesse

    Mehrstufige Finanzprozesse

    Frontend Developer
    Trading
    SEPA
    PROBLEM

    Nutzer mussten Asset-Trades und Bankauszahlungen direkt in der Anwendung durchführen können. Beide Abläufe ähneln sich an der Oberfläche, haben aber völlig unterschiedliche Geschäftslogik, Validierungsregeln, Datenmodelle und Backend-Operationszustände, was eine gemeinsame Implementierung unpraktisch machte.

    ANSATZ

    Ich habe zwei unabhängige, dreistufige Abläufe entworfen und umgesetzt: ein Trading-Modal für den Kauf und Verkauf von Assets sowie ein System für Bankauszahlungen, jeweils mit eigenen Zod-Validierungsschemata, eigener State-Machine und Fehlerbehandlung. Beide reagieren auf echte Backend-Bestätigungen über WebSockets, nicht nur auf die Antwort der ersten Anfrage.

    ERGEBNIS

    Beide Abläufe behandeln Randfälle korrekt, darunter fehlgeschlagene Transaktionen, Zwischenzustände und Netzwerkunterbrechungen, alles gesteuert durch WebSocket-Events in Echtzeit. Durch die bewusste Trennung bleibt jeder Ablauf unabhängig wartbar und testbar.

    • React
    • TypeScript
    • React Query
    • REST API
    • WebSockets
    • Zod
  3. 03Admin-Systeme

    Admin-Systeme und Kunden-Onboarding

    Frontend Developer
    Admin-Panel
    Partnerportal
    PROBLEM

    Administrative Vorgänge erforderten komplexe, mehrstufige Formulare mit regulatorischen Compliance-Anforderungen. Die Suche in großen Nutzerdatenbeständen erzeugte übermäßig viele API-Aufrufe, weil eine Debounce-Strategie fehlte.

    ANSATZ

    Ich habe den vollständigen Konto-Lebenszyklus umgesetzt: Statusänderungen, Zugriffskontrolle, Kontoschließung und Wiederherstellung des Kontozugriffs. Für das Kunden-Onboarding habe ich mehrstufige Formulare mit Zod-Validierung gebaut und strukturierte Compliance-Daten integriert. Außerdem habe ich das Suchfeld mit einem 500-ms-Debounce versehen, um redundante API-Aufrufe zu reduzieren.

    ERGEBNIS

    Das Debouncing der Suche hat die API-Last bei der Nutzersuche deutlich reduziert. Mehrstufige Onboarding-Formulare mit Zod-Validierung verhindern das Absenden ungültiger Daten und geben auf jeder Stufe klares Feedback. Der gesamte Konto-Lebenszyklus ist abgedeckt, einschließlich Randfällen wie der Wiederherstellung des Kontozugriffs.

    • React
    • TypeScript
    • Redux Toolkit
    • REST API
    • WebSockets
    • Zod
  4. 04Steuern & Compliance

    Steuerverwaltung und Dokumentprozesse

    Frontend Developer
    Steuern
    Compliance
    PROBLEM

    Kunden mussten ihre Steuerhistorie einsehen, Steuerjahre auswählen und Anträge auf Steuerdokumente verwalten können, aber die UI hatte keinen Mechanismus, um während mehrstufiger Abläufe mit den Backend-Operationszuständen synchron zu bleiben. Nach dem Einreichen eines Antrags gab es keine verlässliche Rückmeldung, ob er erfolgreich war.

    ANSATZ

    Ich habe Ansichten der Kundensteuerhistorie, die Auswahl des Steuerjahres, Tabellen für Steuerdokumente und vollständige Abläufe zum Erstellen und Bearbeiten von Anträgen umgesetzt. Daten und UI-Zustände werden durch WebSocket-Antworten gesteuert, sodass jede Ansicht den aktuellen Stand der Backend-Operationen genau widerspiegelt.

    ERGEBNIS

    Der Antragsablauf deckt alle Zwischenzustände ab, von der Einreichung bis zur Backend-Bestätigung, ohne dass die Seite neu geladen werden muss. Die WebSocket-gesteuerten Updates haben die Verzögerung zwischen Nutzeraktion und UI-Feedback beseitigt, sodass Kunden in jedem Schritt den genauen Status sehen.

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

    Mehrsprachige Landing Pages und CMS-basierte Websites

    Frontend Developer
    Next.js
    Strapi
    Turborepo
    SEO
    Analytics
    PROBLEM

    Zwei mehrsprachige Marketing-Websites mussten innerhalb eines gemeinsamen Turborepo-Ökosystems gepflegt und weiterentwickelt werden. Beide nutzten CMS-verwaltete Inhalte, Cookie-Consent, Google Analytics, responsive Layouts und eine konsistente Struktur über mehrere Sprachen hinweg. Eine Website musste von Grund auf neu entwickelt werden, die zweite sollte laufend weiterentwickelt werden, ohne gemeinsame Frontend-Logik zu duplizieren.

    ANSATZ

    Ich habe eine mehrsprachige Next.js-Marketing-Website von Grund auf neu entwickelt und parallel eine bestehende zweite Website im selben Turborepo-Ökosystem weiterentwickelt. Dabei habe ich mit CMS-Inhalten aus Strapi gearbeitet und responsive Landing-Bereiche, Unterseiten, animierte Layouts und sprachabhängiges Rendering umgesetzt. Cookie-Consent und Google Analytics habe ich in ein gemeinsames Turborepo-Paket ausgelagert, das beide Anwendungen über einen einzigen Import und ein Konfigurationsobjekt nutzen. Der Fokus lag auf klarer Informationsarchitektur, semantischem Markup, wiederverwendbaren Bereichen, responsivem Verhalten und wartbaren, produktionsreifen Komponenten.

    ERGEBNIS

    Beide Marketing-Websites teilen sich jetzt eine wiederverwendbare Cookie- und Analytics-Schicht, ohne duplizierte Consent-Logik im Monorepo. Eine Website wurde von Grund auf neu geliefert, mit mehreren Unterseiten, animierten Bereichen und mehrsprachigen CMS-Inhalten, während die zweite auf Basis derselben gemeinsamen Frontend-Architektur weiterentwickelt wird. Dieses Setup erleichtert es, neue Landing-Bereiche hinzuzufügen, CMS-Inhalte über alle Sprachen hinweg zu aktualisieren und die Marketing-Seiten konsistent, performant und wartbar zu halten.

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