Gagawin ko ang iyong React o Next.js front end mula sa isang disenyo ng Figma at ikokonekta ito sa iyong API

Tapos na ang disenyo at handa na o halos handa na ang API, ngunit wala pa ang mga screen na makikita ng mga user. Ginagawa ko lang ang front end: ang iyong backend, auth provider at hosting ay mananatili kung ano sila, at ang code ay mapupunta sa iyong repository. Sa loob ng 14 araw pagkatapos ng paghahatid, inaayos ko ang anumang hindi gumagana ayon sa napagkasunduan, nang walang bayad.

Sa Starter makakakuha ka ng isang screen o pahina mula sa iyong Figma file, responsive at naka-type, na ang data ay nagmumula sa iyong API, o mula sa isang mock hanggang sa magkaroon ng endpoint. Sakop ng Standard ang hanggang limang screen na nakakonekta sa iyong API, na may loading, empty at error states at mga form na may validation. Pinapayagan ng Advanced ang hanggang labindalawang screen at nagdaragdag ng mga login screen na gumagana sa iyong auth provider, mga shared component na ginagamit sa buong app, at mga pagsubok para sa mga pangunahing daloy.

Sinusundan ko nang malapit ang disenyo: ang spacing, type scale at mga kulay ay nagmumula sa Figma file. Kung saan walang mobile na bersyon ang isang screen, nagmumungkahi ako ng isa bago ito gawin sa halip na hulaan. Ang Next.js na may App Router ang aking default; ang plain React na may Vite ay ayos lang kung hindi mo kailangan ng server rendering. Para sa styling ginagamit ko ang Tailwind CSS o CSS Modules, alinman ang mayroon na sa iyong proyekto.

Sinusuri ko ang resulta sa Chrome, Firefox at Edge sa desktop, at sa Chrome sa isang tunay na Android phone.

Dalawang pampublikong halimbawa ng aking front-end na trabaho ay nasa portfolio: isang Next.js storefront na may mga filter, isang cart at isang checkout, at ang aking sariling bilingual na site.

Nagsusulat lang ako, nang walang mga pulong. Ang mga screen at ang mga endpoint sa likod nito ay nakalista bago ako magsimula, isang preview link ang nagpapakita ng trabaho habang lumalaki ito, at isang maikling tala ng progreso ang dumarating sa chat bawat araw ng trabaho.

Mga Hakbang para sa pagkumpleto ng iyong proyekto
1. Listahan ng screen - Sinusuri ko ang Figma file at ang iyong mga API docs at isinusulat ang bawat screen, ang mga estado nito at ang mga endpoint na tinatawag nito. Kinukumpirma mo ang listahan bago ang anumang code.
2. Base at shared parts - Pag-setup ng proyekto o ang iyong umiiral na repository, mga kulay at uri mula sa Figma, at ang layout at mga component na ginagamit muli ng bawat screen.
3. Mga screen at data - Ang bawat screen ay ginawa ayon sa disenyo at konektado sa iyong API, na may loading, empty at error states. Ang isang nawawalang endpoint ay nakakakuha ng mock na madaling palitan.
4. Review round sa preview link - Nagki-click ka at nagpapadala ng mga pagwawasto sa isang listahan. Inaayos ko ang mga ito at ipinapakita muli ang parehong link.
5. Paglilipat - Ang code sa iyong repository, isang maikling tala sa istraktura at kung paano ito patakbuhin, at sa Advanced, mga pagsubok na maaari mong patakbuhin bago ang bawat release.