Ik bouw uw React- of Next.js-frontend op basis van een Figma-ontwerp en verbind deze met uw API

Het ontwerp is klaar en de API is klaar of bijna klaar, maar de schermen die gebruikers zullen zien bestaan nog niet. Ik bouw alleen de frontend: uw backend, authenticatieprovider en hosting blijven zoals ze zijn, en de code gaat naar uw repository. Gedurende 14 dagen na levering repareer ik alles wat niet werkt zoals we zijn overeengekomen, kosteloos.

Met Starter krijgt u één scherm of pagina uit uw Figma-bestand, responsief en getypt, met de gegevens afkomstig van uw API, of van een mock totdat het eindpunt bestaat. Standaard omvat maximaal vijf schermen die zijn gekoppeld aan uw API, met laad-, lege en foutstatussen en formulieren met validatie. Geavanceerd maakt maximaal twaalf schermen mogelijk en voegt inlogschermen toe die werken met uw authenticatieprovider, gedeelde componenten die in de hele app worden gebruikt, en tests voor de belangrijkste flows.

Ik volg het ontwerp nauwkeurig: spatiëring, lettergrootte en kleuren komen uit het Figma-bestand. Waar een scherm geen mobiele versie heeft, stel ik er een voor voordat ik het bouw, in plaats van te gissen. Next.js met de App Router is mijn standaard; puur React met Vite is prima als u geen server-rendering nodig heeft. Voor styling gebruik ik Tailwind CSS of CSS Modules, afhankelijk van wat uw project al heeft.

Ik controleer het resultaat in Chrome, Firefox en Edge op desktop, en in Chrome op een echte Android-telefoon.

Twee openbare voorbeelden van mijn front-end werk staan in het portfolio: een Next.js-winkel met filters, een winkelwagen en een afrekenpagina, en mijn eigen tweetalige site.

Ik werk alleen schriftelijk, zonder vergaderingen. De schermen en de eindpunten erachter worden vermeld voordat ik begin, een preview-link toont het werk naarmate het groeit, en een korte voortgangsnotitie komt elke werkdag in de chat.

Stappen voor het voltooien van uw project
1. Schermlijst - Ik doorloop het Figma-bestand en uw API-documentatie en noteer elk scherm, de statussen en de eindpunten die het aanroept. U bevestigt de lijst voordat er code wordt geschreven.
2. Basis- en gedeelde onderdelen - Projectopzet of uw bestaande repository, kleuren en lettertype van Figma, en de lay-out en componenten die elk scherm hergebruikt.
3. Schermen en gegevens - Elk scherm wordt gebouwd volgens het ontwerp en verbonden met uw API, met laad-, lege en foutstatussen. Een ontbrekend eindpunt krijgt een mock die eenvoudig te verwisselen is.
4. Reviewronde op de preview-link - U klikt door en stuurt correcties in één lijst. Ik repareer ze en toon dezelfde link opnieuw.
5. Overdracht - De code in uw repository, een korte notitie over de structuur en hoe deze uit te voeren, en op Advanced, tests die u kunt uitvoeren vóór elke release.