હું તમારી Figma ડિઝાઇનમાંથી તમારો React અથવા Next.js ફ્રન્ટ એન્ડ બનાવીશ અને તેને તમારી API સાથે કનેક્ટ કરીશ

ડિઝાઇન થઈ ગઈ છે અને API તૈયાર છે અથવા લગભગ તૈયાર છે, પરંતુ વપરાશકર્તાઓ જે સ્ક્રીન જોશે તે હજી અસ્તિત્વમાં નથી. હું ફક્ત ફ્રન્ટ એન્ડ બનાવું છું: તમારું બેકએન્ડ, પ્રમાણીકરણ પ્રદાતા અને હોસ્ટિંગ જેમ છે તેમ રહે છે, અને કોડ તમારી રિપોઝીટરીમાં જાય છે. ડિલિવરી પછી 14 દિવસ સુધી, અમે સંમત થયા મુજબ કામ ન કરતી કોઈપણ વસ્તુને હું વિના મૂલ્યે સુધારું છું.

સ્ટાર્ટર સાથે તમને તમારી Figma ફાઇલમાંથી એક સ્ક્રીન અથવા પૃષ્ઠ મળે છે, રિસ્પોન્સિવ અને ટાઇપ કરેલું, તેના ડેટા તમારી API માંથી આવે છે, અથવા એન્ડપોઇન્ટ અસ્તિત્વમાં ન હોય ત્યાં સુધી મોકમાંથી. સ્ટાન્ડર્ડ તમારી API સાથે વાયર્ડ પાંચ સ્ક્રીન સુધી આવરી લે છે, જેમાં લોડિંગ, ખાલી અને ભૂલની સ્થિતિઓ અને માન્યતા સાથેના ફોર્મ્સ શામેલ છે. એડવાન્સ્ડ બાર સ્ક્રીન સુધીની મંજૂરી આપે છે અને તમારા પ્રમાણીકરણ પ્રદાતા સાથે કામ કરતી લૉગિન સ્ક્રીન, એપ્લિકેશન પર ઉપયોગમાં લેવાતા શેર કરેલા ઘટકો અને મુખ્ય પ્રવાહો માટેના પરીક્ષણો ઉમેરે છે.

હું ડિઝાઇનને નજીકથી અનુસરું છું: અંતર, પ્રકારનું સ્કેલ અને રંગો Figma ફાઇલમાંથી આવે છે. જ્યાં સ્ક્રીનનું કોઈ મોબાઇલ સંસ્કરણ નથી, ત્યાં હું તેને અનુમાન કરવાને બદલે બનાવતા પહેલા એક પ્રસ્તાવિત કરું છું. એપ રાઉટર સાથે Next.js મારું ડિફોલ્ટ છે; જ્યારે તમને સર્વર રેન્ડરિંગની જરૂર ન હોય ત્યારે Vite સાથે સાદો React બરાબર છે. સ્ટાઇલિંગ માટે હું Tailwind CSS અથવા CSS મોડ્યુલ્સનો ઉપયોગ કરું છું, જે પણ તમારા પ્રોજેક્ટમાં પહેલેથી જ હોય.

હું ડેસ્કટોપ પર Chrome, Firefox અને Edge માં અને વાસ્તવિક Android ફોન પર Chrome માં પરિણામ તપાસું છું.

મારા ફ્રન્ટ-એન્ડ કાર્યના બે જાહેર ઉદાહરણો પોર્ટફોલિયોમાં છે: ફિલ્ટર્સ, કાર્ટ અને ચેકઆઉટ સાથેનું Next.js સ્ટોરફ્રન્ટ, અને મારી પોતાની દ્વિભાષી સાઇટ.

હું ફક્ત લેખિતમાં કામ કરું છું, મીટિંગ્સ વિના. સ્ક્રીન અને તેમની પાછળના એન્ડપોઇન્ટ્સ હું શરૂ કરું તે પહેલાં સૂચિબદ્ધ કરવામાં આવે છે, એક પૂર્વાવલોકન લિંક કાર્યને જેમ જેમ વધે છે તેમ દર્શાવે છે, અને દર કાર્યકારી દિવસે ચેટમાં એક ટૂંકી પ્રગતિ નોંધ આવે છે.

તમારા પ્રોજેક્ટને પૂર્ણ કરવાના પગલાં
1. સ્ક્રીન સૂચિ - હું Figma ફાઇલ અને તમારા API દસ્તાવેજોમાંથી પસાર થાઉં છું અને દરેક સ્ક્રીન, તેની સ્થિતિઓ અને તે કૉલ કરે છે તે એન્ડપોઇન્ટ્સ લખું છું. તમે કોઈપણ કોડ પહેલાં સૂચિની પુષ્ટિ કરો છો.
2. આધાર અને શેર કરેલા ભાગો - પ્રોજેક્ટ સેટઅપ અથવા તમારી હાલની રિપોઝિટરી, Figma માંથી રંગો અને પ્રકાર, અને લેઆઉટ અને ઘટકો કે જે દરેક સ્ક્રીન ફરીથી ઉપયોગ કરે છે.
3. સ્ક્રીન અને ડેટા - દરેક સ્ક્રીન ડિઝાઇન મુજબ બનાવવામાં આવે છે અને તમારા API સાથે જોડાયેલ છે, જેમાં લોડિંગ, ખાલી અને ભૂલની સ્થિતિઓ છે. એક ગુમ થયેલ એન્ડપોઇન્ટને એક મોક મળે છે જે બદલવા માટે સરળ છે.
4. પૂર્વાવલોકન લિંક પર સમીક્ષા રાઉન્ડ - તમે ક્લિક કરો અને એક સૂચિમાં સુધારાઓ મોકલો. હું તેમને ઠીક કરું છું અને તે જ લિંક ફરીથી બતાવું છું.
5. હેન્ડઓવર - તમારી રિપોઝિટરીમાં કોડ, માળખા પર એક ટૂંકી નોંધ અને તેને કેવી રીતે ચલાવવું, અને એડવાન્સ્ડ પર, તમે દરેક રિલીઝ પહેલાં ચલાવી શકો છો તે પરીક્ષણો.