Frontend & Product Engineer
Ausgewählte Projekte aus Produktentwicklung, Designsystemen, KI-Anwendungen und kreativen Websites.
- Frontend: React, Next.js, TypeScript, Tailwind
- KI: OpenAI Realtime, Voxtral, Prüfung von LLM-Antworten, Evaluation
- Systeme: Storybook, Orval, TanStack React Query, Zustand
- Delivery: GitHub Actions, Playwright E2E, AWS, PHP
- Kreativ: Framer Motion, Three.js / React Three Fiber
KI-Patientensimulation für die Psychotherapieausbildung.
Mit RawTherapy üben Therapeut:innen schwierige Gespräche mit simulierten Patient:innen, per Text oder Sprachchat in Echtzeit, auf Englisch, Deutsch und Spanisch. Alle simulierten Patient:innen haben eine Lebensgeschichte, Überzeugungen und eine eigene Art zu sprechen und reagieren darauf, wie die therapierende Person vorgeht. Ich habe das Produkt entworfen und gebaut, vom Patientenverhalten über die Gesprächsoberfläche bis zu den Antwortprüfungen.
- Demo
- Auf Anfrage
- Meine Rolle
- Produktdesign und Full-Stack-Entwicklung, inklusive React-Interface, Simulations-Engine, Sprachchat in Echtzeit, KI-Qualitätsprüfungen und Auswertungs-Workflow
- Stack
- React, TypeScript, Fastify, PostgreSQL mit pgvector, Redis, OpenAI Realtime API, Voxtral, Playwright
Die Herausforderung
- Patient:innen sollen auf das Gespräch reagieren, statt einem festen Skript zu folgen
- KI-Antworten müssen in der Rolle bleiben und zur Vorgeschichte der jeweiligen Patient:innen passen
- Der Sprachchat soll sich natürlich anfühlen, mit wenig Verzögerung und zuverlässiger Transkription
- Bei einem Verbindungsabbruch muss der Gesprächsverlauf erhalten bleiben, ohne doppelte Einträge
- Feedback soll auf konkrete Momente der Sitzung zeigen
Mein Ansatz
- Überzeugungen, persönliche Regeln und Abwehrmechanismen für alle Patient:innen festgelegt. Die Reaktionen hängen davon ab, wie die therapierende Person vorgeht. Patient:innen können sich öffnen, zurückziehen oder die Sitzung beenden wollen.
- 10 fertige Patient:innen, dazu ein Editor und ein KI-Generator, um eigene zu erstellen.
- Frühere Momente im Gespräch fließen in die Antworten der Patient:innen ein.
- Die therapierende Person reflektiert die Sitzung, bevor sie die Auswertung sieht, damit die eigene Sicht nicht vom Feedback geprägt wird. Fachleute haben diese Reihenfolge gewählt.
- Fünf Kompetenzen der Gesprächsführung werden mit Regeln statt mit KI bewertet, damit die Ergebnisse vorhersagbar, stabil und leicht nachvollziehbar bleiben. Die Regeln betrachten Merkmale im Transkript, etwa offene Fragen, Reflexionen und Ratschläge. Das Sitzungsziel setzt den Übungsschwerpunkt.
- Jeder Befund in der Auswertung verweist auf die genaue Stelle im Transkript, mit Stärken, Verbesserungsfeldern und Übungsempfehlungen.
Schichtplanung und Personaleinsatz.
Ordio hilft Unternehmen, Personal einzuplanen und die tägliche Arbeit zu organisieren. Ich habe an den Screens für Schichtplanung und Personaleinsatz gearbeitet und komplexe Geschäftsregeln gemeinsam mit dem PHP-Backend-Team in Formulare und Ansichten übersetzt. Außerdem habe ich mit GitHub Actions, Playwright und AWS Amplify die Abläufe für Tests und Veröffentlichungen eingerichtet.
- Live
- ordio.com
- Meine Rolle
- Interfaces für Schichtplanung und Personaleinsatz, automatisiertes Testing und Release-Workflows
- Stack
- Next.js, React, TypeScript, GitHub Actions, Playwright, Docker, AWS Amplify
Die Herausforderung
- Komplexe Schichtpläne und Personaldaten leicht lesbar machen
- Geschäftsregeln in klare Formulare und Interaktionen übersetzen
- Dem Team ermöglichen, Änderungen vor dem Release in einer echten Umgebung zu testen
- Feature-Tests, Staging- und Production-Releases parallel am Laufen halten
Mein Beitrag
- Als Teil des Frontend-Teams Teile der Interfaces gebaut, mit denen Personal und Schichten geplant werden
- Mit dem PHP-Backend-Team Geschäftsregeln in Formulare und Ansichten übersetzt
- AWS-Amplify-Preview-Builds und Playwright-Tests für jeden Pull Request aufgesetzt, damit Produktmanagement und Customer Success jedes Feature vor dem Release einzeln testen konnten
- Docker-Workflows für Staging und Production gebaut und an die gemeinsame Release-Pipeline angebunden
Redesign von REMONDIS NEOS für die Stadtreinigung.
NEOS hat DATAFLEET abgelöst, die ältere Software von REMONDIS für die Stadtreinigung. Sie funktionierte, aber die Oberfläche war zu klein, und wichtige Funktionen waren schwer zu finden oder versteckt. Ich habe das Redesign vom Konzept bis zum Code umgesetzt: Usertests mit Mitarbeitenden der Stadtreinigung, eine klare User Journey in Figma und die Umsetzung in React. Die Mitarbeitenden brauchen für ihre täglichen Aufgaben jetzt weniger Klicks, und ihr Feedback hat das bestätigt.
- Meine Rolle
- Konzept, UX/UI-Design und Frontend-Entwicklung
- Vorgehen
- Usertests mit Mitarbeitenden der Stadtreinigung, Konzept und Design in Figma, Umsetzung in React
- Stack
- Figma, Next.js, React, Storybook, Tailwind CSS, TanStack React Query
Die Herausforderung
- Die bisherige DATAFLEET-Software sollte modernisiert werden
- Die Mitarbeitenden brauchten einen klaren Weg durch ihre täglichen Aufgaben
- Jede Änderung musste für die Menschen funktionieren, die das Tool täglich nutzen
Mein Vorgehen
- Usertests mit rund einem Dutzend Mitarbeitenden der Stadtreinigung
- Eine User Journey von der Karte über die erfassten Daten bis zur Bearbeitung, gestaltet in Figma
- Umsetzung in React, auf Basis einer eigenen Komponentenbibliothek, die ich mit Storybook dokumentiert habe
- Die Komponentenbibliothek wurde mit Blick auf die WCAG-Anforderungen entwickelt
Eine Kampagnen-Website für die Leica Q, bei der die Bilder im Mittelpunkt stehen.
Ich habe am Bau der Kampagnen-Website zur Leica Q für Virtue Worldwide mitgewirkt und mit Bildfolge, responsiven Layouts und dezenten Animationen die Fotografie zur Geltung gebracht.
- Art
- Visuelle Kampagne / Markenauftritt
- Meine Rolle
- Frontend-Entwicklung, responsive Layouts und Bildpräsentation
Mein Beitrag
- Layouts gebaut, die der Fotografie Raum zur Wirkung geben
- Abstände und Bildplatzierung an unterschiedliche Bildschirmgrößen angepasst
- Bewegung eingesetzt, die den Inhalt unterstützt, ohne von ihm abzulenken
Eine interaktive Reise entlang der Balkanroute der Geflüchteten.
Für die VICE-Redaktion habe ich eine interaktive Geschichte entworfen und gebaut, die der Balkanroute von Lesbos bis Berlin folgt. Die Lesenden bewegen sich über eine Karte von Europa, öffnen Städteseiten mit Artikeln, Fotos und 3D-Gelände und sehen, unter welchen harten Bedingungen Menschen unterwegs sind, von Winterkälte in den Bergen bis zur Sommerhitze. Die Website gibt es auf Englisch und Deutsch.
- Art
- Redaktionelles Projekt für die VICE-Redaktion
- Meine Rolle
- Design und Frontend-Entwicklung
- Stack
- Next.js, React, TypeScript, Tailwind CSS, next-intl, Framer Motion, React Three Fiber
Die Herausforderung
- Eine lange, schwere Geschichte in Schritte übersetzen, denen Lesende folgen können
- Zahlen zu Menschen, die ums Leben gekommen sind oder vermisst werden, klar und mit Sorgfalt zeigen
- Jedem Ort auf der Route ein eigenes Gefühl für den Ort geben
- Auf Englisch und Deutsch funktionieren
Was ich gebaut habe
- Eine interaktive Karte von Europa mit fünf Hauptstädten und zusätzlichen Stationen, die kurze Fakten mit Quellen öffnen
- Eine Grafik nach Ursache zu Menschen, die ums Leben gekommen sind oder vermisst werden, auf Basis der Daten des IOM Missing Migrants Project
- Städteseiten mit Artikel, Fotos, einer Kennzahl und einer 3D-Geländekarte der Region
- Eine Quellenseite mit UNHCR, IOM, Eurostat und dem Border Violence Monitoring Network
Ein Portfolio für Fotografie, Design und interaktive Experimente.
Ich habe meine persönliche Website entworfen und gebaut, um Fotografie, Design und interaktive Experimente zusammenzubringen.
- Projekte
- Costa Nostra, Valencia Street, Orgullo, LIM und weitere redaktionelle und experimentelle Fotoserien
- Meine Rolle
- Design und Frontend-Entwicklung
- Stack
- Next.js, React, TypeScript, Tailwind CSS, Framer Motion, Three.js, React Three Fiber, Vercel
Was ich gebaut habe
- Unterschiedliche Navigationsformen für verschiedene Bereiche der Seite
- Projektgalerien mit Layouts, die auf die Bilder zugeschnitten sind
- Animierte Übergänge und interaktive 3D-Elemente
- Responsive Seiten für Fotografie und redaktionelle Arbeiten
Mein Ansatz
- Die Bilder jedes Projekts bestimmen das Layout
- Bewegung und interaktive Elemente eingesetzt, um den redaktionellen Inhalt zu unterstützen
Wie ich arbeite.
Zuerst das echte Problem finden
Ich beginne bei den Menschen, die das Produkt nutzen, und bei dem, was sie ausbremst. Danach entscheide ich, was gebaut wird.
Von der Idee bis zum Release verantworten
Ich begleite Features von Konzept und Design über Code und Testing bis zum Deployment.
Das Routinierte automatisieren
Ich richte Tests, Preview-Builds und Release-Pipelines ein, damit Änderungen mit weniger manuellen Schritten live gehen.
KI nutzen und ihre Ergebnisse prüfen
Ich binde KI-Modelle in echte Produkte ein und ergänze Prüfungen, die Antworten abfangen, die vom Kurs abkommen.