फ्रंट-एंड कौशल को सुधारने के लिए 9 और परियोजनाएं

परिचय

भले ही आप प्रोग्रामिंग में नए हैं या पहले से ही एक अनुभवी डेवलपर हैं, इस उद्योग में, नई अवधारणाओं और भाषाओं / रूपरेखाओं को सीखना रुझान के साथ बनाए रखना आवश्यक है।

उदाहरण के लिए, रिएक्ट को लें, जिसका कोड फेसबुक केवल चार साल पहले खुला था, जो दुनिया भर में जावास्क्रिप्ट डेवलपर्स के लिए पहले से ही नंबर एक विकल्प बन गया है।

Vue और Angular, निश्चित रूप से, उनके अपने वैध प्रशंसक आधार भी हैं। और नेवले या अन्य सार्वभौमिक ढांचे जैसे Next.js या Nuxt.js. और गैट्सबी, और ग्रिड्सोम, और क्वासर ... और भी बहुत कुछ।

यदि आप अपने आप को एक अनुभवी जावास्क्रिप्ट डेवलपर के रूप में साबित करना चाहते हैं, तो आपके पास कम से कम कुछ अनुभव होना चाहिए जिसमें विभिन्न चौखटे और पुस्तकालयों के साथ काम करना - अच्छे पुराने जेएस के साथ काम करने के अलावा।

2020 में आपको फ्रंट-एंड मास्टर बनने में मदद करने के लिए, मैंने नौ अलग-अलग परियोजनाओं को एक साथ रखा है, जिनमें से प्रत्येक को एक तकनीकी स्टैक के रूप में विभिन्न जावास्क्रिप्ट फ्रेमवर्क और लाइब्रेरी के लिए समर्पित किया गया है जिसे आप अपने पोर्टफोलियो में बना सकते हैं और जोड़ सकते हैं। याद रखें कि कुछ भी आपको अभ्यास में चीजें बनाने से ज्यादा मदद नहीं करता है, इसलिए आगे बढ़ें, अपने दिमाग को चालू करें और इसे संभव बनाएं

इस लेख का अनुवाद एडिसन सॉफ्टवेयर के सहयोग से किया गया, जो एक कंपनी है जो मल्टी-ब्रांड स्टोर के लिए वर्चुअल फिटिंग रूम बनाती है , और सॉफ्टवेयर का परीक्षण भी करती है ।

प्रतिक्रिया मूवी खोज एप (हुक के साथ)

पहली चीज जो आप शुरू कर सकते हैं, वह है रिएक्ट के साथ मूवी सर्च एप बनाना। नीचे एक छवि दी गई है कि अंतिम आवेदन कैसा दिखेगा:



तुम क्या सीखते हो?
इस एप्लिकेशन को बनाने से, आप अपेक्षाकृत नए एपीआई हुक का उपयोग करके अपने रिएक्ट कौशल में सुधार करेंगे। नमूना परियोजना रिएक्ट घटकों, कई हुक, एक बाहरी एपीआई और, निश्चित रूप से, कुछ सीएसएस शैलियों का उपयोग करती है।

तकनीकी ढेर और विशेषताएं

• हुक के साथ प्रतिक्रिया करें
• बनाने प्रतिक्रिया-ऐप
• JSX
• सीएसएस

किसी भी वर्ग का उपयोग किए बिना, ये प्रोजेक्ट आपको कार्यात्मक प्रतिक्रिया के लिए सही प्रवेश बिंदु देते हैं और निश्चित रूप से 2020 में आपकी मदद करेंगे। आप यहां एक उदाहरण परियोजना पा सकते हैं। निर्देशों का पालन करें या अपने स्वाद के लिए सब कुछ करें।

Vue का उपयोग करके चैट अनुप्रयोग

आपके लिए एक और बेहतरीन परियोजना मेरे पसंदीदा जावास्क्रिप्ट पुस्तकालय का उपयोग करके एक चैट एप्लिकेशन बनाना है: VueJS। एप्लिकेशन कुछ इस तरह दिखाई देगा:



तुम क्या सीखते हो?
इस गाइड में, आप सीखेंगे कि स्क्रैच से Vue एप्लिकेशन कैसे बनाया जाए - घटक बनाएं, प्रोसेस स्टेट्स, रूट बनाएं, थर्ड-पार्टी सर्विसेज से कनेक्ट करें, और ऑथेंटिकेशन भी प्रोसेस करें।

तकनीकी ढेर और विशेषताएं

• Vue
• Vuex
• वाउ राउटर
• Vue सीएलआई
• ढकेलनेवाला
• सीएसएस

यह वीयू के साथ काम करना शुरू करने या 2020 में विकसित करने के लिए अपने मौजूदा कौशल को सुधारने के लिए वास्तव में एक शानदार परियोजना है। आप यहाँ ट्यूटोरियल पा सकते हैं।

कोणीय 8 के साथ मौसम को देखने के लिए एक सुंदर अनुप्रयोग

यह उदाहरण आपको कोणीय 8 का उपयोग करके मौसम को देखने के लिए एक सुंदर एप्लिकेशन बनाने में मदद करेगा:



तुम क्या सीखते हो?
यह परियोजना आपको खरोंच से आवेदन बनाते समय मूल्यवान कौशल सिखाएगी - डिजाइन से विकास तक, सही पर तैनाती के लिए तैयार।

तकनीकी ढेर और विशेषताएं

• कोणीय 8
• Firebase
• सर्वर साइड प्रतिपादन
• सीएसएस ग्रिड और फ्लेक्सबॉक्स के साथ
• मोबाइल के अनुकूल और अनुकूलन क्षमता
• डार्क मोड
• सुंदर इंटरफ़ेस

मैं वास्तव में इस सभी शामिल परियोजना के बारे में क्या पसंद करता हूं कि आप अलगाव में चीजों का अध्ययन नहीं करते हैं। इसके बजाय, आप संपूर्ण विकास प्रक्रिया का अध्ययन करते हैं, डिजाइन से लेकर अंतिम तैनाती तक।

निःशुल्क Svelte का उपयोग करने के लिए ऐप

Svelte एक घटक दृष्टिकोण में एक नए बच्चे की तरह है - कम से कम रिएक्ट, Vue, और कोणीय के समान। और यह 2020 के लिए सबसे नए उत्पादों में से एक है।

टू-डू ऐप्स सबसे जरूरी विषय नहीं है, लेकिन यह वास्तव में आपके Svelte कौशल को बेहतर बनाने में आपकी मदद करता है। यह इस तरह दिखेगा:



तुम क्या सीखते हो?
यह ट्यूटोरियल आपको दिखाएगा कि Svelte 3 का उपयोग करके एप्लिकेशन कैसे बनाया जाए, शुरू से आखिर तक। आप घटकों, स्टाइल और ईवेंट हैंडलर का उपयोग करेंगे

तकनीकी ढेर और विशेषताएं

• Svelte 3
• घटकों
• सीएसएस स्टाइल
• ईएस 6 सिंटेक्स

Svelte के लिए कई अच्छे स्टार्ट-अप प्रोजेक्ट नहीं हैं, इसलिए मुझे शुरुआत करने के लिए यह अच्छा विकल्प मिला।

Next.js का उपयोग कर ईकॉमर्स एप्लिकेशन

Next.js प्रतिक्रियाशील एप्लिकेशन बनाने के लिए सबसे लोकप्रिय ढांचा है जो बॉक्स के बाहर सर्वर-साइड रेंडरिंग का समर्थन करता है।

यह परियोजना आपको दिखाएगी कि ई-कॉमर्स एप्लिकेशन कैसे बनाया जाता है जो इस तरह दिखता है:



तुम क्या सीखते हो?
इस परियोजना में, आप सीखेंगे कि Next.js का उपयोग करके कैसे विकसित किया जाए - नए पृष्ठ और घटक बनाएं, डेटा निकालें, और अगला एप्लिकेशन भी स्टाइल और तैनात करें।

तकनीकी ढेर और विशेषताएं

• Next.js
• अवयव और पृष्ठ
• डेटा सैंपलिंग
• stylization
• परियोजना की तैनाती
• एसएसआर और एसपीए

कुछ नया सीखने के लिए, ई-कॉमर्स एप्लिकेशन जैसे वास्तविक जीवन का उदाहरण देना हमेशा बहुत अच्छा होता है। आप यहाँ ट्यूटोरियल पा सकते हैं ।

Nuxt.js के साथ एक पूर्ण बहुभाषी ब्लॉग

Nuxt.js, Vue के लिए, Next.js फॉर रिएक्ट के समान: सर्वर-साइड रेंडरिंग क्षमताओं और सिंगल-पेज एप्लिकेशन के संयोजन के लिए एक शानदार ढांचा
अंतिम एप्लिकेशन जिसे आप बना सकते हैं वह इस तरह दिखाई देगा:



तुम क्या सीखते हो?

इस नमूना परियोजना में, आप सीखेंगे कि शुरुआती सेटअप से अंतिम तैनाती तक - Nuxt.js का उपयोग करके एक पूरी वेबसाइट कैसे बनाई जाए।

यह कई दिलचस्प विशेषताओं का उपयोग करता है जो Nuxt की पेशकश कर सकते हैं, जैसे पृष्ठ और घटक, साथ ही SCSS के साथ स्टाइल।

तकनीकी ढेर और विशेषताएं

• Nuxt.js
• अवयव और पृष्ठ
• स्टोरीब्लॉक मॉड्यूल
• hagfish
• राज्य प्रबंधन के लिए Vuex
• स्टाइल के लिए एस.सी.एस.
• नुक्ते मध्यवार

यह वास्तव में अच्छा प्रोजेक्ट है , जिसमें Nuxt.js. की कई शानदार विशेषताएं शामिल हैं। मैं व्यक्तिगत रूप से Nuxt के साथ काम करना पसंद करता हूं, इसलिए आपको इसे आज़माना चाहिए, क्योंकि यह आपको एक बेहतरीन Vue डेवलपर भी बनाएगा।

गैट्सबी ब्लॉग

Gatsby React और GraphQL का उपयोग करके एक महान स्थिर साइट जनरेटर है। यह परियोजना का परिणाम है:



तुम क्या सीखते हो?

इस गाइड में, आप सीखेंगे कि एक ब्लॉग बनाने के लिए गैट्सबी का उपयोग कैसे करें जिसे आप अपने स्वयं के लेखों को लिखने के लिए उपयोग करेंगे, जो कि रिएक्ट और ग्राफकलाइन का उपयोग करेंगे।

तकनीकी ढेर और विशेषताएं

• Gatsby
• प्रतिक्रिया
• GraphQL
• प्लगइन्स और थीम्स
• MDX / मार्कडाउन
• बूटस्ट्रैप सीएसएस
• टेम्पलेट्स

यदि आप कभी भी एक ब्लॉग शुरू करना चाहते हैं, तो यह एक बढ़िया उदाहरण है कि रिएक्ट और ग्राफकॉल का उपयोग करके इसे कैसे बनाया जाए।

मैं यह नहीं कह रहा हूं कि वर्डप्रेस एक बुरा विकल्प है, लेकिन गैट्सबी के साथ आप रिएक्ट का उपयोग करके उच्च-प्रदर्शन साइट बना सकते हैं - जो एक अद्भुत संयोजन है।

ग्रिडसोम ब्लॉग

Vue के लिए ग्रिड ... खैर, हम पहले से ही नेक्सट / Nuxt के साथ यह कर चुके थे।
लेकिन ग्रिड्स और गैट्सबी के लिए भी यही सच है। दोनों एक डेटा लेयर के रूप में ग्राफकॉल का उपयोग करते हैं, लेकिन ग्रिड्स वुजेएस का उपयोग करता है। यह भी एक बढ़िया स्थैतिक साइट जनरेटर है जो आपको महान ब्लॉग बनाने में मदद करता है:



तुम क्या सीखते हो?

यह परियोजना आपको सिखाएगी कि ग्रिडसाइड, ग्राफकॉक और मार्कडाउन के साथ आरंभ करने के लिए एक सरल ब्लॉग कैसे बनाया जाए। यह भी बताता है कि Netlify के माध्यम से आवेदन को कैसे तैनात किया जाए।

तकनीकी ढेर और विशेषताएं

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

यह, ज़ाहिर है, सबसे व्यापक ट्यूटोरियल नहीं है, लेकिन यह ग्रिड्स और मार्कडाउन की बुनियादी अवधारणाओं को शामिल करता है और एक अच्छा प्रारंभिक बिंदु हो सकता है ।

साउंडक्लाउड-जैसे ऑडियो प्लेयर क्वासर का उपयोग कर रहा है

क्वासर एक और Vue फ्रेमवर्क है जिसका उपयोग आप मोबाइल एप्लिकेशन बनाने के लिए कर सकते हैं। इस परियोजना में, आप एक ऑडियो प्लेयर एप्लिकेशन बनाएंगे, उदाहरण के लिए:



तुम क्या सीखते हो?

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

तकनीकी ढेर और विशेषताएं

• कैसर
• Vue
• Cordova
• वेव सर्फर
• UI घटक

मोबाइल एप्लिकेशन बनाने के लिए क्वासर की क्षमताओं को प्रदर्शित करने वाली एक छोटी परियोजना ।

ब्लॉग भी पढ़ें
EDISON कंपनी:

के लिए 20 पुस्तकालय
शानदार iOS आवेदन