Zum Hauptinhalt springen
Mateusz Miszczak

Fallstudien

Fallstudien

Ausgewählte Produktionsbereiche, an denen ich in Fintech-Anwendungen, in Delivery und Infrastruktur und auf CMS-basierten Websites gearbeitet habe.

  1. 01Echtzeit · Fintech

    Fintech-Interfaces in Echtzeit

    Frontend Engineer
    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. Statt bei der Navigation neu zu laden, werden Portfoliowerte, Asset-Preise und Tabelleninhalte über WebSockets synchronisiert, denn im Trading-Kontext sind veraltete Preise schlimmer als gar keine. Außerdem fülle ich Wallet und Asset vor, wenn ein Trade aus einem Asset-Panel gestartet wird, sodass der Kontext, in dem der Nutzer bereits ist, erhalten bleibt.

    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 Engineer
    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 sie bewusst nicht hinter einer Abstraktion vereinheitlicht. Die oberflächliche Ähnlichkeit hätte in jedem Schritt bedingte Verzweigungen erzwungen, und die beiden Abläufe haben keinen Grund, sich gemeinsam zu ändern. Stattdessen habe ich zwei unabhängige, dreistufige Abläufe gebaut: ein Trading-Modal für Kauf und Verkauf von Assets sowie ein System für Bankauszahlungen, jeweils mit eigenen Zod-Schemata, eigener State-Machine und Fehlerbehandlung. Beide reagieren auf echte Backend-Bestätigungen über WebSockets, nicht nur auf die Antwort der ersten Anfrage, denn eine Anfrage mit Status 200 bedeutet nicht, dass das Geld bewegt wurde.

    ERGEBNIS

    Beide Abläufe behandeln Randfälle korrekt, darunter fehlgeschlagene Transaktionen, ausstehende Zwischenzustände und Netzwerkunterbrechungen. Weil sie getrennt sind, lässt sich jeder ändern, testen und nachvollziehen, ohne den anderen anzufassen, was sich bereits ausgezahlt hat, als der Trading-Ablauf fortgeschrittenere Ordertypen erhielt.

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

    Admin-Systeme und Kunden-Onboarding

    Frontend Engineer
    Admin-Panel
    Partnerportal
    PROBLEM

    Administrative Vorgänge erforderten komplexe, mehrstufige Formulare mit regulatorischen Compliance-Anforderungen. Die Suche in großen Nutzerdatenbeständen löste bei jedem Tastenanschlag eine Anfrage aus, weil keine Debounce-Strategie vorhanden war.

    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, wobei jeder Schritt bei Abschluss statt beim Absenden validiert wird, sodass ein Operator nicht fünf Schritte nach dem Fehler davon erfährt. Das Suchfeld habe ich mit einem 500-ms-Debounce versehen, lang genug, um das Tippen abzufangen, aber kurz genug, dass die Ergebnisse weiterhin unmittelbar wirken.

    ERGEBNIS

    Die Suche ging von einer Anfrage pro Tastenanschlag auf eine pro abgeschlossenem Suchbegriff zurück und reduzierte den Suchverkehr bei einer typischen Anfrage um rund eine Größenordnung. Mehrstufige Onboarding-Formulare mit Zod-Validierung verhindern ungültige Eingaben und geben auf jeder Stufe klares Feedback, und der Konto-Lebenszyklus ist durchgängig abgedeckt, einschließlich Randzuständen wie der Wiederherstellung des Kontozugriffs.

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

    Steuerverwaltung und Dokumentprozesse

    Frontend Engineer
    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. Da Steuerdokumente rechtsverbindlich sind, habe ich jeden Zustand aus echten Backend-Bestätigungen über WebSockets abgeleitet, statt optimistisch zu aktualisieren, und dafür eine etwas langsamer wahrgenommene Reaktion in Kauf genommen, damit einem Kunden nie ein Status angezeigt wird, der nicht real ist.

    ERGEBNIS

    Der Antragsablauf deckt alle Zwischenzustände ab, von der Einreichung bis zur Backend-Bestätigung, ohne dass die Seite neu geladen werden muss. Kunden sehen in jedem Schritt den genauen Status, und der Support bekommt keine Fragen mehr zu Anträgen, die scheinbar abgeschickt wurden, es aber nicht waren.

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

    Mehrsprachige Landing Pages und CMS-basierte Websites

    Frontend Engineer
    Next.js
    Strapi
    Turborepo
    SEO
    Analytics
    PROBLEM

    Zwei mehrsprachige Marketing-Websites mussten innerhalb eines gemeinsamen Turborepo-Ökosystems gepflegt werden, beide mit CMS-verwalteten Inhalten, Cookie-Consent, Google Analytics und sprachabhängigem Rendering. Eine musste von Grund auf neu gebaut werden, die zweite weiterentwickelt, ohne gemeinsame Frontend-Logik zwischen ihnen zu duplizieren.

    ANSATZ

    Ich habe eine mehrsprachige Next.js-Marketing-Website von Grund auf neu gebaut und eine zweite im selben Monorepo weiterentwickelt, mit Strapi-Inhalten, responsiven Landing-Bereichen, animierten Layouts und sprachabhängigem Rendering. Statt Consent und Analytics zweimal zu implementieren, habe ich sie in ein gemeinsames Turborepo-Paket ausgelagert, das beide Apps über einen einzigen Import und ein Konfigurationsobjekt nutzen, sodass eine Änderung an der Consent-Logik einmal erfolgt und nicht zwischen den Seiten auseinanderdriften kann.

    ERGEBNIS

    Eine Website wurde von Grund auf neu geliefert, mit mehreren Unterseiten, animierten Bereichen und mehrsprachigen CMS-Inhalten, während die zweite auf derselben gemeinsamen Architektur weiterläuft. Keine der Apps enthält eine eigene Kopie der Consent-Logik, und neue Landing-Bereiche oder Sprachinhalte lassen sich hinzufügen, ohne Frontend-Code anzufassen.

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