Vytvořím váš front-end v Reactu nebo Next.js z návrhu ve Figmě a připojím ho k vašemu API

Design je hotový a API je připravené nebo téměř připravené, ale obrazovky, které uživatelé uvidí, ještě neexistují. Stavím pouze front-end: váš backend, poskytovatel autentizace a hosting zůstávají tak, jak jsou, a kód jde do vašeho repozitáře. Po dobu 14 dnů po dodání opravím cokoli, co nefunguje, jak jsme se dohodli, zdarma.

Se Starterem získáte jednu obrazovku nebo stránku z vašeho souboru Figma, responzivní a typovanou, s daty pocházejícími z vašeho API, nebo z mocku, dokud koncový bod neexistuje. Standard pokrývá až pět obrazovek propojených s vaším API, se stavy načítání, prázdnými a chybovými stavy a formuláři s validací. Advanced umožňuje až dvanáct obrazovek a přidává přihlašovací obrazovky, které fungují s vaším poskytovatelem autentizace, sdílené komponenty používané v celé aplikaci a testy pro hlavní toky.

Pečlivě sleduji design: mezery, typografická škála a barvy pocházejí ze souboru Figma. Tam, kde obrazovka nemá mobilní verzi, navrhnu ji předtím, než ji postavím, namísto hádání. Next.js s App Routerem je můj výchozí; čistý React s Vite je v pořádku, když nepotřebujete serverové vykreslování. Pro stylování používám Tailwind CSS nebo CSS Modules, podle toho, co váš projekt již má.

Výsledek kontroluji v prohlížečích Chrome, Firefox a Edge na stolním počítači a v prohlížeči Chrome na skutečném telefonu Android.

Dva veřejné příklady mé práce na front-endu jsou v portfoliu: obchod Next.js s filtry, košíkem a pokladnou a můj vlastní dvojjazyčný web.

Pracuji pouze písemně, bez schůzek. Obrazovky a koncové body za nimi jsou uvedeny předtím, než začnu, náhledový odkaz ukazuje práci, jak roste, a krátká poznámka o pokroku přichází do chatu každý pracovní den.

Kroky k dokončení vašeho projektu
1. Seznam obrazovek – Projdu soubor Figma a dokumentaci vašeho API a zapíšu každou obrazovku, její stavy a koncové body, které volá. Seznam potvrdíte před jakýmkoli kódem.
2. Základní a sdílené části – Nastavení projektu nebo váš stávající repozitář, barvy a typ z Figmy a rozvržení a komponenty, které každá obrazovka znovu používá.
3. Obrazovky a data – Každá obrazovka je postavena podle návrhu a připojena k vašemu API, se stavy načítání, prázdnými a chybovými stavy. Chybějící koncový bod dostane mock, který lze snadno vyměnit.
4. Kolo revize na náhledovém odkazu – Proklikáte se a pošlete opravy v jednom seznamu. Opravím je a znovu zobrazím stejný odkaz.
5. Předání – Kód ve vašem repozitáři, krátká poznámka o struktuře a způsobu spuštění a u Advanced testy, které můžete spustit před každým vydáním.