मी तुमची React किंवा Next.js फ्रंट एंड Figma डिझाइनमधून तयार करेन आणि तुमच्या API शी जोडेन.

डिझाइन पूर्ण झाले आहे आणि API तयार आहे किंवा जवळजवळ तयार आहे, परंतु वापरकर्त्यांना दिसणाऱ्या स्क्रीन अजून अस्तित्वात नाहीत. मी फक्त फ्रंट एंड तयार करतो: तुमचे बॅकएंड, ऑथ प्रदाता आणि होस्टिंग जसे आहेत तसेच राहतात आणि कोड तुमच्या रिपॉझिटरीमध्ये जातो. वितरणाच्या 14 दिवसांनंतर, आम्ही सहमत झाल्याप्रमाणे काम न करणारी कोणतीही गोष्ट मी विनामूल्य दुरुस्त करतो.

स्टार्टरसह तुम्हाला तुमच्या Figma फाइलमधून एक स्क्रीन किंवा पृष्ठ मिळते, रिस्पॉन्सिव्ह आणि टाइप केलेले, ज्याचा डेटा तुमच्या API मधून येतो, किंवा एंडपॉइंट अस्तित्वात येईपर्यंत मॉक मधून येतो. स्टँडर्डमध्ये तुमच्या API शी जोडलेल्या पाच पर्यंत स्क्रीन समाविष्ट आहेत, ज्यात लोडिंग, रिकाम्या आणि एरर स्थिती आणि प्रमाणीकरणासह फॉर्म आहेत. ॲडव्हान्समध्ये बारा पर्यंत स्क्रीनची परवानगी आहे आणि तुमच्या ऑथ प्रदात्यासह काम करणाऱ्या लॉगिन स्क्रीन, ॲपमध्ये वापरले जाणारे शेअर केलेले घटक आणि मुख्य फ्लोसाठी चाचण्या जोडल्या जातात.

मी डिझाइनचे बारकाईने पालन करतो: स्पेसिंग, टाइप स्केल आणि रंग Figma फाइलमधून येतात. जिथे स्क्रीनची मोबाइल आवृत्ती नाही, तिथे मी ती तयार करण्यापूर्वी एक प्रस्तावित करतो. ॲप राउटरसह Next.js माझे डीफॉल्ट आहे; तुम्हाला सर्व्हर रेंडरिंगची आवश्यकता नसताना Vite सह साधा React ठीक आहे. स्टाइलिंगसाठी मी Tailwind CSS किंवा CSS मॉड्यूल्स वापरतो, तुमच्या प्रकल्पात जे काही आधीपासून आहे ते.

मी डेस्कटॉपवर Chrome, Firefox आणि Edge मध्ये आणि वास्तविक Android फोनवर Chrome मध्ये परिणाम तपासतो.

माझ्या फ्रंट-एंड कामाची दोन सार्वजनिक उदाहरणे पोर्टफोलिओमध्ये आहेत: फिल्टर, कार्ट आणि चेकआउटसह एक Next.js स्टोअरफ्रंट आणि माझी स्वतःची द्विभाषिक साइट.

मी फक्त लेखी काम करतो, मीटिंगशिवाय. मी सुरू करण्यापूर्वी स्क्रीन आणि त्यांच्यामागील एंडपॉइंट्सची यादी केली जाते, एक पूर्वावलोकन लिंक काम कसे वाढत आहे हे दर्शवते आणि प्रत्येक कामाच्या दिवशी चॅटमध्ये एक लहान प्रगती टीप येते.

तुमचा प्रकल्प पूर्ण करण्यासाठी पायऱ्या
1. स्क्रीन सूची - मी फिग्मा फाइल आणि तुमच्या API डॉक्समधून जातो आणि प्रत्येक स्क्रीन, तिची स्थिती आणि ती कॉल करत असलेले एंडपॉइंट्स लिहितो. कोणत्याही कोडपूर्वी तुम्ही सूचीची पुष्टी करता.
2. बेस आणि सामायिक भाग - प्रकल्प सेटअप किंवा तुमची विद्यमान रिपॉझिटरी, फिग्मामधील रंग आणि प्रकार, आणि प्रत्येक स्क्रीन पुन्हा वापरणारे लेआउट आणि घटक.
3. स्क्रीन आणि डेटा - प्रत्येक स्क्रीन डिझाइननुसार तयार केली जाते आणि तुमच्या API शी जोडली जाते, ज्यामध्ये लोडिंग, रिक्त आणि त्रुटी स्थिती असतात. गहाळ एंडपॉइंटला एक मॉक मिळतो जो बदलणे सोपे आहे.
4. पूर्वावलोकन लिंकवर पुनरावलोकन फेरी - तुम्ही क्लिक करा आणि एका सूचीमध्ये दुरुस्त्या पाठवा. मी त्या दुरुस्त करतो आणि तीच लिंक पुन्हा दाखवतो.
5. हस्तांतरण - तुमच्या रिपॉझिटरीमधील कोड, संरचनेबद्दल एक लहान टीप आणि ते कसे चालवायचे, आणि प्रगतवर, प्रत्येक रिलीझपूर्वी तुम्ही चालवू शकता अशा चाचण्या.