आपके फ्रंट-एंड कौशल को निखारने के लिए 9 और परियोजनाएँ

परिचय

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

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

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

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

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

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

रिएक्ट के साथ मूवी सर्च ऐप (हुक के साथ)

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

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

टेक स्टैक और सुविधाएँ

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

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

Vue के साथ चैट ऐप

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

आप क्या सीखेंगे
इस ट्यूटोरियल में, आप सीखेंगे कि स्क्रैच से Vue ऐप कैसे बनाएं - घटक बनाएं, स्थिति संभालें, रूट बनाएं, तृतीय-पक्ष सेवाओं से कनेक्ट करें और यहां तक ​​कि प्रमाणीकरण भी संभालें।

टेक स्टैक और सुविधाएँ

• Vue
• वूएक्स
• वाउ राउटर
• Vue सीएलआई
• घुसेड़नेवाला
• सीएसएस

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

Angular 8 के साथ खूबसूरत मौसम ऐप

यह उदाहरण आपको Angular 8 का उपयोग करके एक सुंदर मौसम ऐप बनाने में मदद करेगा:

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

टेक स्टैक और सुविधाएँ

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

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

Svelte के साथ टू-डू ऐप

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

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

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

टेक स्टैक और सुविधाएँ

• सुडौल 3
• अवयव
• सीएसएस के साथ स्टाइलिंग
• सिंटैक्स ES6

वहाँ बहुत सारे अच्छे Svelte स्टार्टर प्रोजेक्ट नहीं हैं, इसलिए मैंने पाया यह शुरुआत करने के लिये एक अच्छा स्थान है.

Next.js के साथ ईकॉमर्स ऐप

नेक्स्ट.जेएस रिएक्ट ऐप्स बनाने के लिए सबसे लोकप्रिय फ्रेमवर्क है जो बॉक्स से बाहर सर्वर-साइड रेंडरिंग का समर्थन करता है।

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

आप क्या सीखेंगे
इस प्रोजेक्ट में, आप सीखेंगे कि नेक्स्ट.जेएस के साथ कैसे विकास करें—नए पेज और घटक बनाएं, डेटा पुनर्प्राप्त करें, और स्टाइल करें और नेक्स्ट एप्लिकेशन को तैनात करें।

टेक स्टैक और सुविधाएँ

• Next.js
• घटक और पृष्ठ
• डेटा नमूनाकरण
• stylization
• परियोजना परिनियोजन
• एसएसआर और एसपीए

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

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

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

आप क्या सीखेंगे

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

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

टेक स्टैक और सुविधाएँ

• अगला.जेएस
• घटक और पृष्ठ
• स्टोरीब्लॉक मॉड्यूल
• मिश्रण
• राज्य प्रबंधन के लिए Vuex
• स्टाइलिंग के लिए एससीएसएस
• नेक्स्ट मिडलवेयर

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

गैट्सबी के साथ ब्लॉग

गैट्सबी रिएक्ट और ग्राफक्यूएल का उपयोग करके एक बेहतरीन स्टेटिक साइट जनरेटर है। यह परियोजना का परिणाम है:

आप क्या सीखेंगे

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

टेक स्टैक और सुविधाएँ

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

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

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

ग्रिडसम के साथ ब्लॉग

Vue के लिए ग्रिडसम... ठीक है, हमारे पास नेक्स्ट/नेक्स्ट के साथ यह पहले से ही था।
लेकिन ग्रिडसम और गैट्सबी के लिए भी यही सच है। दोनों अपनी डेटा परत के रूप में GraphQL का उपयोग करते हैं, लेकिन Gridsome VueJS का उपयोग करता है। बेहतरीन ब्लॉग बनाने में आपकी सहायता के लिए यह एक अद्भुत स्थैतिक साइट जनरेटर भी है:

आप क्या सीखेंगे

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

टेक स्टैक और सुविधाएँ

• गदगद
• Vue
• GraphQL
• Markdown
• शुद्ध करना

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

क्वासर का उपयोग करके साउंडक्लाउड के समान ऑडियो प्लेयर

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

आप क्या सीखेंगे

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

टेक स्टैक और सुविधाएँ

• कैसर
• Vue
• कॉर्डोबा
• वेवसर्फर
• यूआई घटक

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

स्रोत: www.habr.com