तुमची फ्रंट-एंड कौशल्ये सुधारण्यासाठी आणखी 9 प्रकल्प

परिचय

तुम्ही प्रोग्रामिंगमध्ये नवीन असाल किंवा अनुभवी डेव्हलपर, नवीन संकल्पना आणि भाषा/फ्रेमवर्क शिकणे या उद्योगात ट्रेंडमध्ये राहण्यासाठी आवश्यक आहे.

उदाहरणार्थ, प्रतिक्रिया घ्या, जी फेसबुकने फक्त चार वर्षांपूर्वी ओपन-सोर्स केली होती आणि जगभरातील JavaScript डेव्हलपर्ससाठी आधीच प्रथम क्रमांकाची निवड बनली आहे.

Vue आणि Angular, अर्थातच, त्यांचा स्वतःचा कायदेशीर चाहता आधार देखील आहे. आणि मग Svelte आणि इतर सार्वत्रिक फ्रेमवर्क जसे की Next.js किंवा Nuxt.js आहेत. आणि गॅट्सबी, आणि ग्रिडसम, आणि क्वासार... आणि बरेच काही.

तुम्हाला एक अनुभवी JavaScript डेव्हलपर म्हणून सिद्ध करायचे असल्यास, तुम्हाला विविध फ्रेमवर्क आणि लायब्ररींचा अनुभव असला पाहिजे - चांगल्या जुन्या JS सोबत काम करण्याव्यतिरिक्त.

तुम्हाला 2020 मध्ये फ्रंट-एंड मास्टर बनण्यात मदत करण्यासाठी, मी नऊ वेगवेगळे प्रोजेक्ट एकत्र ठेवले आहेत, प्रत्येक वेगळ्या JavaScript फ्रेमवर्कवर आणि लायब्ररीवर फोकस करणारे टेक स्टॅक म्हणून तुम्ही तयार करू शकता आणि तुमच्या पोर्टफोलिओमध्ये जोडू शकता. लक्षात ठेवा की वस्तुस्थिती निर्माण करण्यापेक्षा काहीही तुम्हाला मदत करत नाही, म्हणून पुढे जा, मन वापरा आणि ते घडवून आणा

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

प्रतिक्रिया वापरून चित्रपट शोध ॲप (हुकसह)

रिॲक्ट वापरून चित्रपट शोध ॲप तयार करणे ही पहिली गोष्ट जी तुम्ही सुरू करू शकता. खाली अंतिम अनुप्रयोग कसा दिसेल याची प्रतिमा आहे:

तुम्ही काय शिकाल
हे ॲप तयार करून, तुम्ही तुलनेने नवीन Hooks API वापरून तुमची प्रतिक्रिया कौशल्ये सुधाराल. उदाहरण प्रकल्प रिॲक्ट घटक, बरेच हुक, एक बाह्य API आणि अर्थातच काही CSS शैली वापरतो.

टेक स्टॅक आणि वैशिष्ट्ये

• हुक सह प्रतिक्रिया
• तयार-प्रतिक्रिया-अनुप्रयोग
• जेएसएक्स
• CSS

कोणतेही क्लासेस न वापरता, हे प्रोजेक्ट तुम्हाला फंक्शनल रिॲक्टमध्ये परिपूर्ण प्रवेश बिंदू देतात आणि 2020 मध्ये तुम्हाला नक्कीच मदत करतील. आपण शोधू शकता उदाहरण प्रकल्प येथे. सूचनांचे अनुसरण करा किंवा ते स्वतःचे बनवा.

Vue सह चॅट ॲप

तुमच्यासाठी आणखी एक उत्तम प्रकल्प म्हणजे माझी आवडती JavaScript लायब्ररी वापरून चॅट ॲप तयार करणे: VueJS. अनुप्रयोग असे काहीतरी दिसेल:

तुम्ही काय शिकाल
या ट्युटोरियलमध्ये, तुम्ही सुरवातीपासून Vue ॲप कसे बनवायचे ते शिकाल - घटक तयार करणे, स्थिती हाताळणे, मार्ग तयार करणे, तृतीय-पक्ष सेवांशी कनेक्ट करणे आणि प्रमाणीकरण हाताळणे.

टेक स्टॅक आणि वैशिष्ट्ये

• व्ह्यू
• vuex
• व्ह्यू राउटर
• Vue CLI
• पुशर
• CSS

Vue सह प्रारंभ करण्यासाठी किंवा 2020 मध्ये विकासात जाण्यासाठी तुमची विद्यमान कौशल्ये सुधारण्यासाठी हा खरोखर एक चांगला प्रकल्प आहे. आपण शोधू शकता येथे ट्यूटोरियल.

अँगुलर 8 सह सुंदर हवामान ॲप

हे उदाहरण तुम्हाला अँगुलर 8 वापरून एक सुंदर हवामान ॲप तयार करण्यात मदत करेल:

तुम्ही काय शिकाल
हा प्रकल्प तुम्हाला सुरवातीपासून ॲप्लिकेशन्स बनवण्यामध्ये मौल्यवान कौशल्ये शिकवेल - डिझाईन ते डेव्हलपमेंट, डिप्लॉयमेंट-रेडी ॲप्लिकेशनपर्यंत.

टेक स्टॅक आणि वैशिष्ट्ये

• कोणीय 8
• फायरबेज
• सर्व्हर साइड रेंडरिंग
• ग्रिड आणि फ्लेक्सबॉक्ससह CSS
• मोबाइल अनुकूल आणि अनुकूलता
• गडद मोड
• सुंदर इंटरफेस

या सर्वसमावेशक प्रकल्पाबद्दल मला खरोखर जे आवडते ते म्हणजे तुम्ही एकाकी गोष्टींचा अभ्यास करू नका. त्याऐवजी, तुम्ही संपूर्ण विकास प्रक्रिया, डिझाइनपासून अंतिम उपयोजनापर्यंत शिकता.

Svelte वापरून टू-डू ऍप्लिकेशन

Svelte घटक-आधारित दृष्टिकोनावर नवीन मुलासारखे आहे - किमान प्रतिक्रिया, Vue आणि Angular सारखे. आणि हे 2020 साठी सर्वात लोकप्रिय नवीन उत्पादनांपैकी एक आहे.

टू-डू ॲप्स हा सर्वात चर्चेचा विषय असेलच असे नाही, परंतु ते तुम्हाला तुमची Svelte कौशल्ये सुधारण्यात खरोखर मदत करेल. हे असे दिसेल:

तुम्ही काय शिकाल
हे ट्यूटोरियल तुम्हाला सुरुवातीपासून शेवटपर्यंत Svelte 3 वापरून ॲप्लिकेशन कसे तयार करायचे ते दाखवेल. तुम्ही घटक, स्टाइलिंग आणि इव्हेंट हँडलर वापराल

टेक स्टॅक आणि वैशिष्ट्ये

• Svelte 3
• घटक
• CSS सह शैली
• ES 6 वाक्यरचना

तेथे बरेच चांगले Svelte स्टार्टर प्रकल्प नाहीत, म्हणून मला सापडले सुरुवात करण्यासाठी हा एक चांगला पर्याय आहे.

Next.js वापरून ई-कॉमर्स ॲप

बॉक्सच्या बाहेर सर्व्हर-साइड रेंडरिंगला समर्थन देणारे React ॲप्लिकेशन्स तयार करण्यासाठी Next.js सर्वात लोकप्रिय फ्रेमवर्क आहे.

यासारखे दिसणारे ई-कॉमर्स ॲप्लिकेशन कसे तयार करायचे हे हा प्रकल्प तुम्हाला दाखवेल:

तुम्ही काय शिकाल
या प्रकल्पात, तुम्ही Next.js सह कसे विकसित करायचे ते शिकू शकाल—नवीन पृष्ठे आणि घटक तयार करा, डेटा काढा आणि शैली आणि नेक्स्ट ॲप्लिकेशन तैनात करा.

टेक स्टॅक आणि वैशिष्ट्ये

• पुढील.जे.एस
• घटक आणि पृष्ठे
• डेटा सॅम्पलिंग
• शैलीकरण
• प्रकल्प उपयोजन
• SSR आणि SPA

काहीतरी नवीन शिकण्यासाठी ई-कॉमर्स ॲपसारखे वास्तविक-जगाचे उदाहरण असणे नेहमीच छान असते. आपण करू शकता येथे ट्यूटोरियल शोधा.

Nuxt.js सह संपूर्ण बहुभाषिक ब्लॉग

Nuxt.js हे Vue साठी आहे, React साठी Next.js काय आहे: सर्व्हर-साइड रेंडरिंग आणि सिंगल-पेज ऍप्लिकेशन्सची शक्ती एकत्र करण्यासाठी एक उत्तम फ्रेमवर्क
तुम्ही तयार करू शकता तो अंतिम अनुप्रयोग असे दिसेल:

तुम्ही काय शिकाल

या नमुना प्रकल्पामध्ये, तुम्ही Nuxt.js वापरून संपूर्ण वेबसाइट कशी तयार करावी ते शिकू शकाल, सुरुवातीच्या सेटअपपासून ते अंतिम उपयोजनापर्यंत.

हे Nuxt ने ऑफर केलेल्या अनेक छान वैशिष्ट्यांचा लाभ घेते, जसे की पृष्ठे आणि घटक आणि SCSS सह शैली.

टेक स्टॅक आणि वैशिष्ट्ये

• Nuxt.js
• घटक आणि पृष्ठे
• स्टोरीब्लॉक मॉड्यूल
• हॅगफिश
• राज्य व्यवस्थापनासाठी Vuex
• स्टाइलिंगसाठी SCSS
• Nuxt Middlewares

हा खरोखर छान प्रकल्प आहे, ज्यामध्ये अनेक उत्तम Nuxt.js वैशिष्ट्ये समाविष्ट आहेत. मला वैयक्तिकरित्या Nuxt सोबत काम करायला आवडते त्यामुळे तुम्ही ते वापरून पहा कारण ते तुम्हाला उत्कृष्ट Vue विकासक देखील बनवेल.

Gatsby सह ब्लॉग

Gatsby प्रतिक्रिया आणि GraphQL वापरून एक उत्कृष्ट स्थिर साइट जनरेटर आहे. हा प्रकल्पाचा परिणाम आहे:

तुम्ही काय शिकाल

या ट्युटोरियलमध्ये, तुम्ही React आणि GraphQL वापरून तुमचे स्वतःचे लेख लिहिण्यासाठी वापरत असलेला ब्लॉग तयार करण्यासाठी गॅट्सबी कसा वापरायचा ते शिकाल.

टेक स्टॅक आणि वैशिष्ट्ये

• गॅट्सबी
• प्रतिक्रिया द्या
• आलेख
• प्लगइन आणि थीम
• MDX/मार्कडाउन
• CSS बूटस्ट्रॅप
• नमुने

तुम्हाला कधी ब्लॉग सुरू करायचा असेल तर, हे एक उत्तम उदाहरण आहे React आणि GraphQL वापरून ते कसे बनवायचे.

मी असे म्हणत नाही की वर्डप्रेस ही एक वाईट निवड आहे, परंतु गॅट्सबीसह तुम्ही रिॲक्ट वापरून उच्च-कार्यक्षमता वेबसाइट तयार करू शकता - जे एक आश्चर्यकारक संयोजन आहे.

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

Vue साठी ग्रिडसम... ठीक आहे, आमच्याकडे नेक्स्ट/नक्स्ट सोबत हे आधीच होते.
पण ग्रिडसम आणि गॅट्सबीसाठीही हेच आहे. दोघेही त्यांचा डेटा स्तर म्हणून GraphQL वापरतात, परंतु Gridsome VueJS वापरतात. हे देखील एक आश्चर्यकारक स्थिर साइट जनरेटर आहे जे आपल्याला उत्कृष्ट ब्लॉग तयार करण्यात मदत करेल:

तुम्ही काय शिकाल

हा प्रकल्प तुम्हाला Gridsome, GraphQL आणि Markdown सह प्रारंभ करण्यासाठी एक साधा ब्लॉग कसा तयार करायचा हे शिकवेल. Netlify द्वारे अनुप्रयोग कसा उपयोजित करायचा हे देखील यात समाविष्ट आहे.

टेक स्टॅक आणि वैशिष्ट्ये

• काजळ
• व्ह्यू
• आलेख
• चिन्हांकित करा
• नेटलिफाई करा

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

Quasar वापरून साउंडक्लाउड सारखा ऑडिओ प्लेयर

Quasar हे आणखी एक Vue फ्रेमवर्क आहे जे मोबाईल ऍप्लिकेशन तयार करण्यासाठी वापरले जाऊ शकते. या प्रोजेक्टमध्ये तुम्ही ऑडिओ प्लेयर ॲप्लिकेशन तयार कराल, उदाहरणार्थ:

तुम्ही काय शिकाल

इतर प्रकल्प मुख्यत्वे वेब ॲप्लिकेशनवर केंद्रित असताना, हे तुम्हाला Vue आणि Quasar फ्रेमवर्क वापरून मोबाइल ॲप्लिकेशन कसे तयार करायचे ते दाखवेल.
तुमच्याकडे Android स्टुडिओ/एक्सकोड कॉन्फिगर केलेले कॉर्डोव्हा आधीपासूनच चालू असले पाहिजे. नसल्यास, मॅन्युअलमध्ये Quasar वेबसाइटची लिंक आहे जिथे ते तुम्हाला सर्वकाही कसे सेट करायचे ते दाखवतात.

टेक स्टॅक आणि वैशिष्ट्ये

• क्वासार
• व्ह्यू
• कॉर्डोबा
• वेव्हसर्फर
• UI घटक

लहान प्रकल्प, मोबाईल ऍप्लिकेशन्स तयार करण्यासाठी क्वासारची क्षमता प्रदर्शित करणे.

स्त्रोत: www.habr.com