Costruirò il tuo front-end React o Next.js da un design Figma e lo collegherò alla tua API

Il design è fatto e l'API è pronta o quasi pronta, ma le schermate che gli utenti vedranno non esistono ancora. Costruisco solo il front-end: il tuo backend, il provider di autenticazione e l'hosting rimangono come sono, e il codice va nel tuo repository. Per 14 giorni dopo la consegna, risolvo gratuitamente qualsiasi cosa non funzioni come concordato.

Con Starter ottieni una schermata o pagina dal tuo file Figma, responsive e tipizzata, con i suoi dati provenienti dalla tua API, o da un mock finché l'endpoint non esiste. Standard copre fino a cinque schermate collegate alla tua API, con stati di caricamento, vuoti ed errore e moduli con validazione. Advanced consente fino a dodici schermate e aggiunge schermate di login che funzionano con il tuo provider di autenticazione, componenti condivisi utilizzati in tutta l'app e test per i flussi principali.

Seguo attentamente il design: spaziatura, scala dei caratteri e colori provengono dal file Figma. Laddove una schermata non abbia una versione mobile, ne propongo una prima di costruirla anziché indovinare. Next.js con l'App Router è il mio predefinito; React puro con Vite va bene quando non hai bisogno di rendering lato server. Per lo styling uso Tailwind CSS o CSS Modules, a seconda di quello che il tuo progetto ha già.

Controllo il risultato in Chrome, Firefox ed Edge su desktop, e in Chrome su un vero telefono Android.

Due esempi pubblici del mio lavoro di front-end sono nel portfolio: un negozio Next.js con filtri, un carrello e un checkout, e il mio sito bilingue.

Lavoro solo per iscritto, senza riunioni. Le schermate e gli endpoint sottostanti sono elencati prima che io inizi, un link di anteprima mostra il lavoro mentre cresce, e una breve nota di progresso arriva nella chat ogni giorno lavorativo.

Passi per completare il tuo progetto
1. Elenco schermate - Esamino il file Figma e la documentazione della tua API e annoto ogni schermata, i suoi stati e gli endpoint che chiama. Confermi l'elenco prima di qualsiasi codice.
2. Parti base e condivise - Configurazione del progetto o del tuo repository esistente, colori e tipo da Figma, e il layout e i componenti che ogni schermata riutilizza.
3. Schermate e dati - Ogni schermata è costruita secondo il design e collegata alla tua API, con stati di caricamento, vuoti ed errore. Un endpoint mancante ottiene un mock facile da scambiare.
4. Ciclo di revisione sul link di anteprima - Clicchi e invii le correzioni in un unico elenco. Le correggo e mostro di nuovo lo stesso link.
5. Consegna - Il codice nel tuo repository, una breve nota sulla struttura e su come eseguirlo, e su Avanzate, test che puoi eseguire prima di ogni rilascio.