Wir suchen einen Front-End-Developer in Vollzeit, um die nutzerseitigen Bereiche unserer leistungsstarken Trading-Plattform zu entwerfen und zu bauen. Du hilfst dabei, klare, datenreiche Oberflächen zu schaffen, die es Tradern und Analysten ermöglichen, effizient und effektiv zu arbeiten.

Du arbeitest eng mit dem Back-End-Entwicklungsteam und dem Projektmanager zusammen, um gut integrierte Systeme zu liefern. Ein zentraler Bestandteil dieser Rolle ist deine Fähigkeit, Lösungsansätze, Abwägungen, Grenzen sowie Vor- und Nachteile offen mit dem Team zu diskutieren – nicht nur einem bestimmten Muster oder einer Bibliothek zu folgen.

## Kerneinsatzgebiete
– Frontend-Anwendungen für unsere Trading-Plattform entwickeln und pflegen.
– Mit Back-End-Entwicklern und dem Projektmanager zusammenarbeiten, um eine reibungslose Integration über alle Systeme hinweg sicherzustellen.
– Mehrseitige Layouts, Menüs und Workflows erstellen, die Usability mit Effizienz ausbalancieren.
– Das Design und die User Experience der Trading-Plattform, des Performance-&-Risk-Managers und der Backtesting-Engine mitgestalten.
– Charting- und Datenvisualisierungsfunktionen bauen und optimieren – unter anderem mit Bibliotheken wie TradingView oder D3.js – um viele Chart-Typen zu unterstützen (inklusive Tabellen und Multi-Series-Chart-Packs).
– UI/UX kontinuierlich verbessern: für Klarheit, Geschwindigkeit und intuitive Navigation.

## Qualifikationen
– Sehr gute Kommunikationsfähigkeiten und die Fähigkeit, effektiv mit Entwicklern, Projektmanagern und Stakeholdern aus dem Business zusammenzuarbeiten.
– Starke Design-Instinkte: Einfachheit und Effizienz, mit der Fähigkeit, komplexe Anforderungen in saubere, benutzerfreundliche Interfaces zu übersetzen.
– Kenntnisse über Finanzsysteme oder Trading-Konzepte sind von Vorteil.

## Kern-Stack (erforderlich)
– React 18 + Next.js (App Router), TypeScript, TailwindCSS.
– Sehr gute Fähigkeiten im State Management für hochfrequente Daten (z. B. Zustand, Redux Toolkit, useSyncExternalStore).

## Echtzeit-Daten & Performance
– Praxis mit WebSockets/SSE, einschließlich Reconnect/Backoff, authentifizierten Socket-Verbindungen und Topic-Re-Subscriptions.
– Erfahrung in der Implementierung von Backpressure, Puffern, Coalescing und Windowing, um UI-„Thrashing“ zu verhindern, wenn Tausende Updates pro Minute eintreffen.
– Erfahrung mit Data Virtualization (z. B. react-virtualized, react-window) für große Tabellen wie Orders, Positionen und Trades.
– Vertrautheit mit Web Workern/OffscreenCanvas und Message-Passing, um die Haupt-Thread-Performance zu erhalten.
– Verständnis von Latenzbudgets und Frame-Time-Profiling mit React DevTools sowie Browser-Performance-Tools.

## Charting & Visualisierung
– Praktische Erfahrung mit professionellen Charting-Bibliotheken (z. B. TradingView Charting Library, Lightweight Charts, Highcharts, D3).
– Echtzeit-Overlays wie Best Bid/Ask, Order-Book-Tiefe, letztes OHLCV sowie Order-/Positions-Annotations.
– Multi-Panel-Layouts (Preis, Volumen, Indikatoren) mit synchronisierten Crosshairs und gemeinsamen Zeitachsen.

## Architektur & Datenzugriff
– Clientseitiges Caching und Invalidation (z. B. TanStack Query/React Query).
– Schema-getriebene UI für Instrumente und Venues.
– Einsatz von Error Boundaries, Suspense sowie progressivem Hydration-/Streaming-Ansatz für große Next.js-Seiten.

## Auth, Sicherheit & Rollen
– Solides Verständnis von OIDC/JWT-Flows, Token-Refresh/-Rotation sowie WebSocket-Authentifizierung.
– Rollenbasierte Feature-Gating-Logik (Read-only vs. Trading-Berechtigungen).

## Testing, Qualität & Verlässlichkeit
– Unit-Tests für kritische Transformations-/Parser-Logik (z. B. Playwright/Vitest für End-to-End-/Interaktionsabläufe).
– Erfahrung mit Feature Flags, gestaffelten Rollouts und Monitoring mit Sentry/OpenTelemetry.

## Wünschenswert
– Erfahrung mit „Desktop-ähnlichen“ Interfaces (z. B. Drag-to-dock Panels, resizable Grids).
– Einblicke in WASM für rechenintensive Aufgaben (z. B. Indikator-Berechnungen).
– Vertrautheit mit FIX-/Crypto-Venue-Details wie Tick-Sizes, Lot-Sizes und Verhalten innerhalb von Trading-Sessions.

## Screening-Fragen
Bitte halte jede Antwort auf 4–8 Sätze. Stichpunkte sind erlaubt, wenn sie klar sind.

1) **UI-Migration (hrzk → Next.js):**
Wähle EINEN Bereich aus `hrzk.html` (z. B. Orders+Trades, Positions-Tabelle, Equity/Drawdown). Erkläre, wie du ihn auf React 18 + Next.js (App Router) + TypeScript + Tailwind migrieren würdest. Nenne deine Ordnerstruktur und was du als Client- vs. Server-Komponenten bauen würdest. Wir bewerten deine Abwägungen – nicht nur eine „einzig richtige“ Methode.

2) **Echtzeitdaten-Ingestion:**
Erkläre, wie du WebSockets/SSE für hochfrequente Updates handhaben würdest – inklusive reconnect/backoff, authentifizierter Sockets und Topic-Re-Subscriptions. Welche Fehler erwartest du im Produktionsbetrieb?

3) **Backpressure + Verhinderung von UI-Thrashing:**
Angenommen, es gibt tausende Updates pro Minute für Orders/Positionen/Trades. Beschreibe, wie du Buffering/Coalescing/Windowing implementieren würdest, sodass die UI responsiv bleibt. Erkläre, wie du dies mit State Management kombinierst (z. B. Zustand/RTK/useSyncExternalStore) sowie mit Virtualisierung (react-window/react-virtualized). Was würdest du messen, um zu zeigen, dass es funktioniert?

4) **Charting-Ansatz:**
Wir brauchen schnelle, gut lesbare, datenreiche Charts (z. B. Equity/Drawdown, Doughnut/Bars). Wähle einen Chart-Typ aus `hrzk.html` und erkläre, welche Bibliothek du verwenden würdest, deine Strategie für die Update-Frequenz sowie die Performance-Risiken und deine Gegenmaßnahmen.

5) **Auth + Rollen-Gating:**
Erkläre, wie du JWT/OIDC-Token-Refresh und WebSocket-Authentifizierung handhaben würdest, und implementiere anschließend Rollen-basierte Gating-Logik (Read-only vs. Trading). Nutze ein Beispiel wie „Cancel All Orders“ oder „Stop/Start Execution“ und erläutere, wann du etwas ausblendest, deaktivierst oder eine Warnung anzeigst.

6) **Remote Ownership + Teamarbeit:**
Teile ein Beispiel, in dem du remote die Verantwortung für eine unklare Aufgabe übernommen hast. Beschreibe dann, wie du mit einem kleinen Entwicklungsteam zusammenarbeiten würdest: wie du klärende Fragen stellst, Risiken früh kommunizierst und vermeidest, „local-optimum“-Code zu shippen, der andere Teile des Systems beschädigen könnte.

## Was dich erwartet (Interviewprozess)
Unser Prozess ist größtenteils asynchron und konzentriert sich auf echte Arbeit. Du beginnst mit der Einreichung deines CV und einer kurzen strukturierten Bewerbung. Ausgewählte Kandidat:innen absolvieren einen asynchronen technischen Screen. Finalist:innen erhalten eine bezahlte, zeitlich begrenzte Aufgabenstellung, die zum Rollenprofil passt. Der gesamte Prozess dauert typischerweise 4–6 Wochen.

## FAQs
– **Muss ich auf die Fragen antworten?** Ja. Bitte beantworte sie in einem offenen Format – idealerweise per Anschreiben. Das ist verpflichtend für das Screening.
– **Muss ich Live-Interviews machen?** Die meisten Schritte sind asynchron, um Terminabstimmung zu minimieren; Live-Calls sind nur minimal.
– **Muss ich beim Sample auf Kamera sein?** Nein – Screen + Voice reichen.
– **Welche Tools kann ich verwenden, um Aufnahmen einzureichen?** Jedes gängige Screen-Recording- oder File-Sharing-Tool ist in Ordnung, solange das Video leicht anzusehen ist.
– **Ist die finale Aufgabe bezahlt?** Ja. Final ausgewählte Kandidat:innen führen eine bezahlte, zeitlich begrenzte Arbeitssample-Aufgabe durch.