Unë do të ndërtoj front-end-in tuaj React ose Next.js nga një dizajn Figma dhe do ta lidh atë me API-n tuaj

Dizajni është bërë dhe API është gati ose pothuajse gati, por ekranet që do të shohin përdoruesit nuk ekzistojnë ende. Unë ndërtoj vetëm front-end-in: backend-i juaj, ofruesi i autentifikimit dhe hostingu mbeten siç janë, dhe kodi shkon në depozitën tuaj. Për 14 ditë pas dorëzimit, unë rregulloj çdo gjë që nuk funksionon siç kemi rënë dakord, pa pagesë.

Me Starter ju merrni një ekran ose faqe nga skedari juaj Figma, të përgjegjshëm dhe të shkruar, me të dhënat e tij që vijnë nga API-ja juaj, ose nga një maket derisa të ekzistojë pika fundore. Standard mbulon deri në pesë ekrane të lidhura me API-n tuaj, me gjendje ngarkimi, bosh dhe gabimi dhe formularë me vërtetim. Advanced lejon deri në dymbëdhjetë ekrane dhe shton ekrane hyrjeje që funksionojnë me ofruesin tuaj të autentifikimit, komponentë të përbashkët të përdorur në të gjithë aplikacionin dhe teste për rrjedhat kryesore.

Unë ndjek dizajnin me kujdes: hapësira, shkalla e tipit dhe ngjyrat vijnë nga skedari Figma. Kur një ekran nuk ka version celular, unë propozoj një para se ta ndërtoj atë, në vend që të hamendësoj. Next.js me App Router është parazgjedhja ime; React i thjeshtë me Vite është në rregull kur nuk keni nevojë për renderim në server. Për stilim përdor Tailwind CSS ose CSS Modules, cilindo që projekti juaj tashmë ka.

Unë kontrolloj rezultatin në Chrome, Firefox dhe Edge në desktop, dhe në Chrome në një telefon real Android.

Dy shembuj publikë të punës sime front-end janë në portofol: një dyqan Next.js me filtra, një shportë dhe një arkë, dhe faqja ime dygjuhëshe.

Unë punoj vetëm me shkrim, pa takime. Ekranet dhe pikat fundore pas tyre listohen para se të filloj, një lidhje paraprake tregon punën ndërsa ajo rritet, dhe një shënim i shkurtër progresi vjen në bisedë çdo ditë pune.

Hapat për përfundimin e projektit tuaj
1. Lista e ekraneve - Unë kaloj nëpër skedarin Figma dhe dokumentet tuaja API dhe shkruaj çdo ekran, gjendjet e tij dhe thirrjet API që bën. Ju konfirmoni listën para çdo kodi.
2. Pjesët bazë dhe të përbashkëta - Konfigurimi i projektit ose depozita juaj ekzistuese, ngjyrat dhe tipi nga Figma, dhe paraqitja dhe komponentët që çdo ekran ripërdor.
3. Ekranet dhe të dhënat - Çdo ekran ndërtohet sipas dizajnit dhe lidhet me API-n tuaj, me gjendje ngarkimi, bosh dhe gabimi. Një pikë fundore që mungon merr një maket që është i lehtë për t'u ndërruar.
4. Raundi i rishikimit në lidhjen paraprake - Ju klikoni dhe dërgoni korrigjime në një listë. Unë i rregulloj ato dhe tregoj përsëri të njëjtën lidhje.
5. Dorëzimi - Kodi në depozitën tuaj, një shënim i shkurtër mbi strukturën dhe si ta ekzekutoni, dhe në Advanced, teste që mund t'i ekzekutoni para çdo lëshimi.