मैं आपके React या Next.js फ्रंट एंड को Figma डिज़ाइन से बनाऊँगा और इसे आपके API से कनेक्ट करूँगा

डिज़ाइन हो गया है और एपीआई तैयार है या लगभग तैयार है, लेकिन उपयोगकर्ता जो स्क्रीन देखेंगे वे अभी तक मौजूद नहीं हैं। मैं केवल फ्रंट एंड बनाता हूं: आपका बैकएंड, प्रमाणीकरण प्रदाता और होस्टिंग वैसे ही रहते हैं, और कोड आपके रिपॉजिटरी में जाता है। डिलीवरी के 14 दिनों के लिए, मैं कुछ भी ठीक करता हूं जो हमने सहमत नहीं किया था, मुफ्त में।

स्टार्टर के साथ आपको अपनी फिग्मा फ़ाइल से एक स्क्रीन या पेज मिलता है, जो रिस्पॉन्सिव और टाइप किया गया होता है, जिसका डेटा आपके एपीआई से आता है, या एंडपॉइंट मौजूद होने तक एक मॉक से आता है। स्टैंडर्ड में आपके एपीआई से जुड़ी पांच स्क्रीन तक शामिल हैं, जिसमें लोडिंग, खाली और त्रुटि स्थितियां और सत्यापन के साथ फ़ॉर्म शामिल हैं। एडवांस्ड में बारह स्क्रीन तक की अनुमति है और इसमें लॉगिन स्क्रीन शामिल हैं जो आपके प्रमाणीकरण प्रदाता के साथ काम करती हैं, ऐप में उपयोग किए जाने वाले साझा घटक और मुख्य प्रवाह के लिए परीक्षण।

मैं डिज़ाइन का बारीकी से पालन करता हूं: स्पेसिंग, टाइप स्केल और रंग फिग्मा फ़ाइल से आते हैं। जहां एक स्क्रीन का कोई मोबाइल संस्करण नहीं है, मैं इसे बनाने से पहले एक का प्रस्ताव करता हूं बजाय अनुमान लगाने के। ऐप राउटर के साथ नेक्स्ट.जेएस मेरा डिफ़ॉल्ट है; जब आपको सर्वर रेंडरिंग की आवश्यकता नहीं होती है तो वाइट के साथ सादा रिएक्ट ठीक है। स्टाइलिंग के लिए मैं टेलविंड सीएसएस या सीएसएस मॉड्यूल का उपयोग करता हूं, जो भी आपके प्रोजेक्ट में पहले से है।

मैं डेस्कटॉप पर क्रोम, फ़ायरफ़ॉक्स और एज में, और एक वास्तविक एंड्रॉइड फोन पर क्रोम में परिणाम की जांच करता हूं।

मेरे फ्रंट-एंड काम के दो सार्वजनिक उदाहरण पोर्टफोलियो में हैं: फिल्टर, एक कार्ट और एक चेकआउट के साथ एक नेक्स्ट.जेएस स्टोरफ्रंट, और मेरी अपनी द्विभाषी साइट।

मैं केवल लिखित रूप में काम करता हूं, बिना बैठकों के। स्क्रीन और उनके पीछे के एंडपॉइंट्स मेरे शुरू करने से पहले सूचीबद्ध होते हैं, एक पूर्वावलोकन लिंक काम को बढ़ता हुआ दिखाता है, और हर कार्य दिवस चैट में एक छोटा प्रगति नोट आता है।

अपने प्रोजेक्ट को पूरा करने के चरण
1. स्क्रीन सूची - मैं फिग्मा फ़ाइल और आपके एपीआई दस्तावेज़ों को देखता हूँ और प्रत्येक स्क्रीन, उसकी स्थितियाँ और वह जिन एंडपॉइंट्स को कॉल करती है, उन्हें लिखता हूँ। आप किसी भी कोड से पहले सूची की पुष्टि करते हैं।
2. आधार और साझा भाग - प्रोजेक्ट सेटअप या आपकी मौजूदा रिपॉजिटरी, फिग्मा से रंग और प्रकार, और लेआउट और घटक जिन्हें हर स्क्रीन पुन: उपयोग करती है।
3. स्क्रीन और डेटा - प्रत्येक स्क्रीन को डिज़ाइन के अनुसार बनाया जाता है और आपके एपीआई से जोड़ा जाता है, जिसमें लोडिंग, खाली और त्रुटि की स्थितियाँ होती हैं। एक गुम एंडपॉइंट को एक मॉक मिलता है जिसे बदलना आसान होता है।
4. पूर्वावलोकन लिंक पर समीक्षा दौर - आप क्लिक करते हैं और एक सूची में सुधार भेजते हैं। मैं उन्हें ठीक करता हूँ और वही लिंक फिर से दिखाता हूँ।
5. हैंडओवर - आपकी रिपॉजिटरी में कोड, संरचना और इसे कैसे चलाना है, इस पर एक छोटा नोट, और उन्नत पर, परीक्षण जिन्हें आप प्रत्येक रिलीज़ से पहले चला सकते हैं।