Je vais créer votre interface React ou Next.js à partir d'un design Figma et la connecter à votre API

Le design est fait et l'API est prête ou presque, mais les écrans que les utilisateurs verront n'existent pas encore. Je construis uniquement le front-end: votre backend, votre fournisseur d'authentification et votre hébergement restent tels quels, et le code va dans votre dépôt. Pendant 14 jours après la livraison, je corrige gratuitement tout ce qui ne fonctionne pas comme convenu.

Avec Starter, vous obtenez un écran ou une page de votre fichier Figma, réactif et typé, avec ses données provenant de votre API, ou d'une maquette jusqu'à ce que le point de terminaison existe. Standard couvre jusqu'à cinq écrans connectés à votre API, avec des états de chargement, vide et d'erreur et des formulaires avec validation. Advanced permet jusqu'à douze écrans et ajoute des écrans de connexion qui fonctionnent avec votre fournisseur d'authentification, des composants partagés utilisés dans toute l'application et des tests pour les flux principaux.

Je suis le design de près: l'espacement, l'échelle typographique et les couleurs proviennent du fichier Figma. Lorsqu'un écran n'a pas de version mobile, j'en propose une avant de la construire plutôt que de deviner. Next.js avec l'App Router est mon choix par défaut; React simple avec Vite convient lorsque vous n'avez pas besoin de rendu côté serveur. Pour le style, j'utilise Tailwind CSS ou CSS Modules, selon ce que votre projet utilise déjà.

Je vérifie le résultat dans Chrome, Firefox et Edge sur ordinateur de bureau, et dans Chrome sur un véritable téléphone Android.

Deux exemples publics de mon travail de front-end sont dans le portfolio: une vitrine Next.js avec filtres, un panier et un paiement, et mon propre site bilingue.

Je travaille uniquement par écrit, sans réunions. Les écrans et les points de terminaison derrière eux sont listés avant que je ne commence, un lien de prévisualisation montre le travail au fur et à mesure de son avancement, et une courte note de progression est envoyée dans le chat chaque jour ouvrable.

Étapes pour compléter votre projet
1. Liste des écrans - Je parcours le fichier Figma et la documentation de votre API et j'écris chaque écran, ses états et les appels d'API qu'il effectue. Vous confirmez la liste avant tout code.
2. Parties de base et partagées - Configuration du projet ou de votre dépôt existant, couleurs et type de Figma, et la mise en page et les composants que chaque écran réutilise.
3. Écrans et données - Chaque écran est construit selon le design et connecté à votre API, avec des états de chargement, vide et d'erreur. Un point de terminaison manquant reçoit une maquette facile à échanger.
4. Tour de révision sur le lien de prévisualisation - Vous cliquez et envoyez les corrections dans une liste. Je les corrige et affiche à nouveau le même lien.
5. Transfert - Le code dans votre dépôt, une courte note sur la structure et comment l'exécuter, et sur Advanced, des tests que vous pouvez exécuter avant chaque version.