Nitaunda React au Next.js yako ya mbele kutoka kwenye muundo wa Figma na kuiunganisha kwenye API yako

Muundo umekamilika na API iko tayari au karibu tayari, lakini skrini ambazo watumiaji wataziona bado hazipo. Ninaunda sehemu ya mbele tu: backend yako, mtoa huduma wa uthibitishaji na mwenyeji hubaki kama zilivyo, na msimbo huenda kwenye hazina yako. Kwa siku 14 baada ya uwasilishaji, narekebisha chochote ambacho hakifanyi kazi kama tulivyokubaliana, bila malipo.

Ukiwa na Starter unapata skrini moja au ukurasa kutoka faili yako ya Figma, inayojibu na iliyoandikwa, na data yake ikitoka kwenye API yako, au kutoka kwa dhihaka hadi kituo cha mwisho kitakapokuwepo. Standard inashughulikia hadi skrini tano zilizounganishwa kwenye API yako, zenye hali za kupakia, tupu na hitilafu na fomu zenye uthibitishaji. Advanced inaruhusu hadi skrini kumi na mbili na huongeza skrini za kuingia zinazofanya kazi na mtoa huduma wako wa uthibitishaji, vipengele vilivyoshirikiwa vinavyotumika katika programu yote, na majaribio kwa mtiririko mkuu.

Nafuata muundo kwa karibu: nafasi, ukubwa wa fonti na rangi hutoka kwenye faili ya Figma. Ambapo skrini haina toleo la simu, ninapendekeza moja kabla ya kuijenga badala ya kukisia. Next.js na App Router ndio chaguo langu-msingi; React tupu na Vite ni sawa wakati huhitaji uwasilishaji wa seva. Kwa mitindo ninatumia Tailwind CSS au CSS Modules, chochote ambacho mradi wako tayari unacho.

Ninaangalia matokeo katika Chrome, Firefox na Edge kwenye kompyuta, na katika Chrome kwenye simu halisi ya Android.

Mifano miwili ya umma ya kazi yangu ya mbele iko kwenye kwingineko: duka la Next.js lenye vichungi, rukwama na malipo, na tovuti yangu mwenyewe ya lugha mbili.

Nafanya kazi kwa maandishi tu, bila mikutano. Skrini na vituo vya mwisho vilivyo nyuma yao vimeorodheshwa kabla sijaanzisha, kiungo cha hakikisho kinaonyesha kazi inavyokua, na noti fupi ya maendeleo huja kwenye gumzo kila siku ya kazi.

Hatua za kukamilisha mradi wako
1. Orodha ya skrini - Ninapitia faili ya Figma na nyaraka zako za API na kuandika kila skrini, hali zake na simu za vituo vya mwisho inavyopiga. Unathibitisha orodha kabla ya msimbo wowote.
2. Sehemu za msingi na zilizoshirikiwa - Usanidi wa mradi au hazina yako iliyopo, rangi na aina kutoka Figma, na mpangilio na vipengele ambavyo kila skrini hutumia tena.
3. Skrini na data - Kila skrini imejengwa kwa muundo na kuunganishwa kwenye API yako, na hali za kupakia, tupu na hitilafu. Kituo cha mwisho kinachokosekana hupata dhihaka ambayo ni rahisi kubadilisha.
4. Raundi ya ukaguzi kwenye kiungo cha hakikisho - Unabofya na kutuma marekebisho katika orodha moja. Ninayarekebisha na kuonyesha kiungo hicho hicho tena.
5. Makabidhiano - Msimbo katika hazina yako, noti fupi juu ya muundo na jinsi ya kuuendesha, na kwenye Advanced, majaribio unayoweza kuendesha kabla ya kila toleo.