02— WOBEI ICH UNTERSTÜTZE

Lücken im Entwurf klären

Vor der Umsetzung prüfe ich den Ablauf auf fehlende Loading, Empty, Error und Success States. Offene Entscheidungen werden mit Design oder Product Management geklärt.

Wiederverwendbare Komponenten entwickeln

Ich setze responsive React- und TypeScript-Komponenten um und nutze ein vorhandenes Design System, wenn es eines gibt. Für wiederkehrende Muster gelten einheitliche Abstände, Schriften und Component States.

Daten und Funktionen anbinden

Ich verbinde das Interface mit Daten und berücksichtige Validierung, Berechtigungen und Fehlerfälle. Geprüft wird mit realistischen Inhalten.

Wichtige Abläufe testen

Ich prüfe Tastaturbedienung, Bildschirmgrößen und Browserverhalten. Automatisierte Browsertests kommen dort hinzu, wo sie wichtige User Flows absichern.

03— WENN IM ALLTAG ETWAS SCHIEFGEHT

LOADING, EMPTY, ERROR UND SUCCESS STATES.

Die Bedienelemente funktionieren mit Maus und Tastatur. Dieselbe Komponente deckt Laden, fehlende Daten, Fehler und eine erfolgreiche Antwort ab.

if (status === "loading") return <ProjectSkeleton />;

Wechseln Sie oben zwischen den States. Bei „Erneut versuchen“ erscheint zuerst der Loading State, danach das Ergebnis. Die Auswahl funktioniert auch mit der Tastatur.

04 / REACT-FRONTEND-ENTWICKLUNG

DIE ÜBERGABE ENDET, WENNDAS INTERFACEIM BROWSER FUNKTIONIERT.

Erst im Browser zeigt sich zum Beispiel, ob ein Layout mit langen Texten funktioniert oder eine Fehlermeldung weiterhilft. Solche Fragen kläre ich während der Umsetzung mit dem Team.

05— PROJEKTE

FRONTEND-PROJEKTE

01 / 2026

Bridagency

Design · Frontend · Full-Stack

Bridagency führt zweisprachig durch 23 Planungsschritte und verteilt das Budget proportional. Vor dem Start habe ich die Abläufe im Browser geprüft.

Case Study lesen

02 / 2025

Plox

Product Design · Full-Stack

In Plox können Menschen Pixelbilder im Browser erstellen und teilen. Wiederkehrende Interface-Muster verbinden den Editor mit der Community.

Case Study lesen

03 / 2026

Medienkundig

User Research · Product Design · Full-Stack

Medienkundig basiert auf Astro, React und Supabase. Zur Entwicklung gehören Accessibility-Checks und Tests wichtiger Browserabläufe.

Case Study lesen

06— FAQ

HÄUFIGE FRAGEN

Ja. Ich richte mich nach vorhandener Architektur, Konventionen und Komponentenbibliothek. Bevor ich neue Muster vorschlage, sehe ich mir an, wie das Team Änderungen entwickelt und veröffentlicht.

ZUM PROJEKTSTART

Vom KI-Prototyp zur Web-App: Was vor dem Launch fehlt →

Wie du den vorhandenen Stand prüfst und die nächste Entwicklungsphase beauftragst.

07 / KONTAKT

MÖCHTEN SIE EIN FRONTEND-PROJEKT BESPRECHEN?

Projekt besprechen