तपाईंसँग डिजाइन र ब्याकइन्ड छ, र प्रयोगकर्ताहरूले वास्तवमा देख्ने भाग चाहिन्छ। म फिग्मा स्क्रिनहरूलाई टाइपस्क्रिप्टमा प्रतिक्रिया वा Next.js फ्रन्ट एन्डमा परिणत गर्छु, फोनदेखि डेस्कटपसम्म उत्तरदायी, र यसलाई लोडिङ, खाली र त्रुटि अवस्थाहरू ह्यान्डल गरी तपाईंको API मा जडान गर्छु।
म तपाईंको प्रतिक्रिया वा Next.js फ्रन्ट एन्ड फिग्मा डिजाइनबाट बनाउनेछु र यसलाई तपाईंको API मा जडान गर्नेछु
तपाईंको Figma फाइलबाट एउटा स्क्रिन, रेस्पोन्सिभ, टाइप गरिएको र तपाईंको API सँग जोडिएको।
- एउटा स्क्रिन
- रेस्पोन्सिभ डिजाइन
- तपाईंको API सँग जोडिएको
- स्रोत कोड
5 स्क्रिनसम्म तपाईंको API मा जोडिएको, लोडिङ, खाली र त्रुटि अवस्थाहरू सहित।
- 5 स्क्रिनसम्म
- रेस्पोन्सिभ डिजाइन
- तपाईंको API सँग जोडिएको
- स्रोत कोड
12 स्क्रिनसम्म, तपाईंको प्रमाणीकरण विरुद्ध लगइन, साझा कम्पोनेन्टहरू र परीक्षणहरू।
- 12 स्क्रिनसम्म, लगइन, परीक्षणहरू
- रेस्पोन्सिभ डिजाइन
- तपाईंको API सँग जोडिएको
- स्रोत कोड
अनुकूलित प्रस्ताव अनुरोध गर्नुहोस्
अनुकूलित प्रस्ताव अनुरोध गर्न लग इन गर्नुहोस्
यो Zinner बाट व्यक्तिगत प्रस्ताव अनुरोध गर्न नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्पूर्व-बिक्री प्रश्न सोध्नुहोस्
प्रश्न सोध्न लग इन गर्नुहोस्
प्लेटफर्म स्प्याम कम गर्न, पूर्व-बिक्री सन्देशहरू लग इन गरिएका प्रयोगकर्ताहरूले मात्र पठाउन सक्छन्।
यो Zinner लाई सिधै सन्देश पठाउन नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्लग इन आवश्यक छ
यो Zinner लाई सन्देश पठाउन नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्लग इन आवश्यक छ
निजीकृत प्रस्ताव अनुरोध गर्न नि:शुल्क खाता सिर्जना गर्नुहोस् वा लग इन गर्नुहोस्।
लग इन / दर्ता गर्नुहोस्एक नजरमा
तपाईंलाई निर्णय गर्न मद्दत गर्न यस सेवाको बारेमा मुख्य विवरणहरू। Zinn Hub द्वारा उत्पन्न, विक्रेता द्वारा होइन।
मूल्य स्थिति
टेक स्ट्याक
उत्तरदायी र क्रस-ब्राउजर
API एकीकरण
समर्थन अवधि
तपाईंले के प्राप्त गर्नुहुनेछ
पूर्ण विवरण
डिजाइन सकिएको छ र API तयार छ वा लगभग तयार छ, तर प्रयोगकर्ताहरूले देख्ने स्क्रिनहरू अझै अवस्थित छैनन्। म फ्रन्ट एन्ड मात्र बनाउँछु: तपाईंको ब्याकएन्ड, प्रमाणीकरण प्रदायक र होस्टिङ जस्ता छन् त्यस्तै रहन्छन्, र कोड तपाईंको भण्डारमा जान्छ। डेलिभरी पछि 14 दिनसम्म, हामीले सहमत भए अनुसार काम नगर्ने कुनै पनि कुरा म निःशुल्क समाधान गर्छु।
स्टार्टरको साथ तपाईंले आफ्नो Figma फाइलबाट एउटा स्क्रिन वा पृष्ठ पाउनुहुन्छ, रेस्पोन्सिभ र टाइप गरिएको, यसको डेटा तपाईंको API बाट आउँछ, वा अन्तिम बिन्दु अवस्थित नभएसम्म मकबाट। स्ट्यान्डर्डले तपाईंको API मा जोडिएका पाँच स्क्रिनसम्म कभर गर्दछ, लोडिङ, खाली र त्रुटि अवस्थाहरू र प्रमाणीकरण सहितका फारमहरू सहित। एडभान्स्डले बाह्र स्क्रिनसम्म अनुमति दिन्छ र तपाईंको प्रमाणीकरण प्रदायकसँग काम गर्ने लगइन स्क्रिनहरू, एपभरि प्रयोग गरिएका साझा कम्पोनेन्टहरू, र मुख्य प्रवाहहरूको लागि परीक्षणहरू थप्छ।
म डिजाइनलाई नजिकबाट पछ्याउँछु: स्पेसिङ, टाइप स्केल र रङहरू Figma फाइलबाट आउँछन्। जहाँ स्क्रिनको मोबाइल संस्करण छैन, म अनुमान गर्नुको सट्टा यसलाई निर्माण गर्नु अघि एउटा प्रस्ताव गर्छु। App Router सँग Next.js मेरो पूर्वनिर्धारित हो; तपाईंलाई सर्भर रेन्डरिङ आवश्यक नभएको बेला Vite सँग सादा React ठीक छ। स्टाइलिंगको लागि म Tailwind CSS वा CSS Modules प्रयोग गर्छु, जुन तपाईंको परियोजनामा पहिले नै छ।
म डेस्कटपमा Chrome, Firefox र Edge मा, र वास्तविक एन्ड्रोइड फोनमा Chrome मा परिणाम जाँच गर्छु।
मेरो फ्रन्ट-एन्ड कार्यका दुई सार्वजनिक उदाहरणहरू पोर्टफोलियोमा छन्: फिल्टरहरू, एउटा कार्ट र एउटा चेकआउट सहितको Next.js स्टोरफ्रन्ट, र मेरो आफ्नै द्विभाषी साइट।
म बैठकहरू बिना, लिखित रूपमा मात्र काम गर्छु। स्क्रिनहरू र तिनीहरूको पछाडिका अन्तिम बिन्दुहरू मैले सुरु गर्नु अघि सूचीबद्ध गरिन्छन्, एउटा पूर्वावलोकन लिङ्कले काम बढ्दै जाँदा देखाउँछ, र प्रत्येक कार्य दिन च्याटमा छोटो प्रगति नोट आउँछ।
आफ्नो परियोजना पूरा गर्ने चरणहरू
1. स्क्रिन सूची - म फिग्मा फाइल र तपाईंको API कागजातहरू हेर्छु र प्रत्येक स्क्रिन, यसको अवस्थाहरू र यसले कल गर्ने अन्तिम बिन्दुहरू लेख्छु। तपाईंले कुनै पनि कोड गर्नु अघि सूची पुष्टि गर्नुहुन्छ।
2. आधार र साझा भागहरू - परियोजना सेटअप वा तपाईंको अवस्थित भण्डार, फिग्माबाट रङहरू र प्रकार, र प्रत्येक स्क्रिनले पुन: प्रयोग गर्ने लेआउट र कम्पोनेन्टहरू।
3. स्क्रिन र डेटा - प्रत्येक स्क्रिन डिजाइन अनुसार बनाइएको छ र तपाईंको API मा जडान गरिएको छ, लोडिङ, खाली र त्रुटि अवस्थाहरू सहित। हराएको अन्तिम बिन्दुले एउटा नक्कल पाउँछ जुन स्वैप गर्न सजिलो छ।
4. पूर्वावलोकन लिङ्कमा समीक्षा राउन्ड - तपाईंले क्लिक गर्नुहुन्छ र एक सूचीमा सुधारहरू पठाउनुहुन्छ। म तिनीहरूलाई ठीक गर्छु र उही लिङ्क फेरि देखाउँछु।
5. हस्तान्तरण - तपाईंको भण्डारमा कोड, संरचना र यसलाई कसरी चलाउने भन्ने बारे छोटो नोट, र उन्नतमा, प्रत्येक रिलीज अघि तपाईंले चलाउन सक्ने परीक्षणहरू।
Zinner गुणस्तर ग्यारेन्टी
प्लेटफर्ममा सामेल हुनु अघि प्रत्येक Zinner को समीक्षा र अनुमोदन गरिन्छ।
सबै सेवाहरू हाम्रो गुणस्तर आश्वासन प्रतिबद्धताद्वारा समर्थित छन्।
तपाईंले डेलिभर गरिएको काम अनुमोदन नगरेसम्म तपाईंको भुक्तानी सुरक्षित छ।
प्याकेजहरू तुलना गर्नुहोस्
| कार्य | स्टार्टर | मानक | उन्नत |
|---|---|---|---|
| वितरण समय | 4 दिन | 9 दिन | 18 दिन |
| पुनरावलोकनहरू | 1 | 2 | 3 |
| दायरा | एउटा स्क्रिन | 5 स्क्रिनसम्म | 12 स्क्रिनसम्म, लगइन, परीक्षणहरू |
| उत्तरदायी डिजाइन | ✓ | ✓ | ✓ |
| तपाईंको API मा जडान गरिएको | ✓ | ✓ | ✓ |
| स्रोत कोड | ✓ | ✓ | ✓ |
नमूनाहरू
यस Zinn सँग सम्बन्धित विक्रेताको कामको उदाहरणहरू हेर्नुहोस्।
पोर्टफोलियो
यस Zinn सँग सम्बन्धित विक्रेताको कामको उदाहरणहरू।
फर्मलाइन: स्ट्राइपको साथ Next.js स्टोर
तपाईंले क्लिक गर्न सक्ने स्टोरफ्रन्ट: 16 सङ्कलनमा 4 पोस्टरहरू, URL मा रहने फिल्टरहरू र खोज, एउटा कार्ट, हल्का र गाढा थिमहरू, र डेमो अर्डर वा परीक्षण मोडमा वास्तविक स्ट्राइप चेकआउट सत्रमा समाप्त हुने चेकआउट। मैले यसलाई Next.js स्थिर निर्यातको रूपमा टाइपस्क्रिप्टमा Tailwind CSS सँग बनाएको छु। कार्ड भुक्तानीहरू क्लाउडफ्लेयर वर्कर मार्फत जान्छन् जसले सर्भरमा कार्टको मूल्य पुन: निर्धारण गर्छ र स्ट्राइपको वेबहुक हस्ताक्षर प्रमाणित गर्छ।
Next.js मा द्विभाषी व्यक्तिगत साइट
अंग्रेजी र रूसीमा एक-पृष्ठ व्यक्तिगत साइट, सेवा खण्ड र मेरो डेमो परियोजनाहरूको लिङ्कहरू सहित। मैले यसलाई Next.js, React र TypeScript सँग स्थिर निर्यातको रूपमा डिजाइन र निर्माण गरेको छु, सादा CSS मोड्युलहरू र कुनै UI फ्रेमवर्क बिना स्टाइल गरिएको। यसमा हल्का र गाढा थिमहरू छन्, र प्रत्येक भाषाको लागि सामाजिक पूर्वावलोकन छवि निर्माण समयमा उत्पन्न हुन्छ। GitHub Actions ले यसलाई Bunny CDN मा निर्माण र डिप्लोय गर्छ, जसले सुरक्षा हेडरहरू थप्छ र www र सादा HTTP लाई मुख्य HTTPS ठेगानामा रिडिरेक्ट गर्छ।
सेवा विवरणहरू
बारम्बार सोधिने प्रश्नहरू
हो। म प्रत्येक स्क्रिनको लागि मोबाइल लेआउट निर्माण गर्नु अघि, लिखित रूपमा वा द्रुत स्केचको रूपमा प्रस्ताव गर्छु, ताकि तपाईंले यसलाई अन्त्यमा पत्ता लगाउनुको सट्टा अग्रिम अनुमोदन गर्नुहोस्।
हो। म फोल्डर संरचना, नामकरण र पहिले नै त्यहाँ रहेको शैलीलाई पछ्याउँछु, त्यसैले नयाँ कोडले उही ढाँचाहरू प्रयोग गर्दछ र अर्को विकासकर्ताले दुई शैलीहरू फेला पार्दैन।
म फाइलबाट स्पेसिङ, साइज र रङहरू मिलाउँछु। जहाँ डिजाइन र वास्तविक डेटा असहमत हुन्छ, जस्तै नक्कल भन्दा लामो नाम, म यसलाई झण्डा लगाउँछु र लेआउट बिग्रन दिनुको सट्टा समाधान सुझाव दिन्छु।
यो सेवा फ्रन्ट एन्ड मात्र हो। एक्सप्रेस वा NestJS सँग Node.js मा ब्याकएन्डको लागि, मेरो ब्याकएन्ड Zinn हेर्नुहोस्, वा दुवै अर्डर गर्नुहोस् र म तिनीहरूलाई सँगै उद्धृत गर्नेछु।
ग्राहक समीक्षाहरू
हाम्रा ग्राहकहरूले यस Zinn बारे के भन्छन् हेर्नुहोस्
श्रेणीहरू
Zinner नीतिहरू
सम्बन्धित Zinns
Next.js, React, Firebase र Node.js प्रयोग गरेर व्यावसायिक वेब अनुप्रयोगहरू विकास गर्नुहोस्
