Ich erstelle Ihr React- oder Next.js-Frontend aus einem Figma-Design und verbinde es mit Ihrer API

Das Design ist fertig und die API ist bereit oder fast bereit, aber die Bildschirme, die die Benutzer sehen werden, existieren noch nicht. Ich baue nur das Frontend: Ihr Backend, Ihr Authentifizierungsanbieter und Ihr Hosting bleiben wie sie sind, und der Code geht in Ihr Repository. Für 14 Tage nach der Lieferung behebe ich alles, was nicht wie vereinbart funktioniert, kostenlos.

Mit Starter erhalten Sie einen Bildschirm oder eine Seite aus Ihrer Figma-Datei, responsiv und getypt, wobei die Daten von Ihrer API oder von einem Mock stammen, bis der Endpunkt existiert. Standard umfasst bis zu fünf Bildschirme, die mit Ihrer API verbunden sind, mit Lade-, Leer- und Fehlerzuständen und Formularen mit Validierung. Advanced ermöglicht bis zu zwölf Bildschirme und fügt Anmeldebildschirme hinzu, die mit Ihrem Authentifizierungsanbieter funktionieren, gemeinsame Komponenten, die in der gesamten App verwendet werden, und Tests für die Hauptabläufe.

Ich folge dem Design genau: Abstände, Schriftskalierung und Farben stammen aus der Figma-Datei. Wo ein Bildschirm keine mobile Version hat, schlage ich eine vor, bevor ich sie baue, anstatt zu raten. Next.js mit dem App Router ist mein Standard; reines React mit Vite ist in Ordnung, wenn Sie kein Server-Rendering benötigen. Für das Styling verwende ich Tailwind CSS oder CSS Modules, je nachdem, was Ihr Projekt bereits hat.

Ich überprüfe das Ergebnis in Chrome, Firefox und Edge auf dem Desktop und in Chrome auf einem echten Android-Telefon.

Zwei öffentliche Beispiele meiner Frontend-Arbeit finden Sie im Portfolio: ein Next.js-Storefront mit Filtern, einem Warenkorb und einem Checkout sowie meine eigene zweisprachige Website.

Ich arbeite nur schriftlich, ohne Meetings. Die Bildschirme und die dahinter liegenden Endpunkte werden vor Beginn aufgelistet, ein Vorschaulink zeigt die Arbeit während des Wachstums, und eine kurze Fortschrittsnotiz kommt jeden Arbeitstag im Chat.

Schritte zur Fertigstellung Ihres Projekts
1. Bildschirmliste – Ich gehe die Figma-Datei und Ihre API-Dokumentation durch und notiere jeden Bildschirm, seine Zustände und die Endpunkte, die er aufruft. Sie bestätigen die Liste vor jedem Code.
2. Basis- und gemeinsame Teile – Projekt-Setup oder Ihr bestehendes Repository, Farben und Typ aus Figma sowie das Layout und die Komponenten, die jeder Bildschirm wiederverwendet.
3. Bildschirme und Daten – Jeder Bildschirm wird nach dem Design erstellt und mit Ihrer API verbunden, mit Lade-, Leer- und Fehlerzuständen. Ein fehlender Endpunkt erhält einen Mock, der leicht ausgetauscht werden kann.
4. Überprüfungsrunde über den Vorschaulink – Sie klicken sich durch und senden Korrekturen in einer Liste. Ich behebe sie und zeige denselben Link erneut.
5. Übergabe – Der Code in Ihrem Repository, ein kurzer Hinweis zur Struktur und zur Ausführung sowie bei Advanced Tests, die Sie vor jeder Veröffentlichung ausführen können.