फ्रंट-एंड डोजो: डेवलपर कौशल को प्रशिक्षित करने के लिए प्रोजेक्ट (5 नए + 43 पुराने)

1. धारणा क्लोन

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

www.notion.so

नोशन क्लोन बनाकर आप क्या सीखेंगे:

• HTML खींचें और छोड़ें API. उपयोगकर्ता "माउस से पकड़ सकता है" खींचने योग्य तत्व और इसे अंदर रखें droppable क्षेत्र।
• अपने कंप्यूटर और स्मार्टफोन के बीच वास्तविक समय में डेटा को कैसे सिंक्रोनाइज़ करें।
• हम उपयोगकर्ताओं को रिकॉर्ड बनाने, पढ़ने, अपडेट करने और हटाने की अनुमति देते हैं, जिससे सीआरयूडी कौशल का प्रशिक्षण होता है।

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

2. Repl.it क्लोन

Repl.it वास्तविक समय सहयोगात्मक कोड संपादन के लिए एक उपकरण है। आप कई भाषाएँ चुन सकते हैं: जावास्क्रिप्ट, पायथन, गो और कोड को सीधे ब्राउज़र में चलाएँ। त्वरित डेमो और कोड साक्षात्कार के लिए बहुत उपयोगी।

उत्तर दें

Repl.it क्लोन बनाकर आप क्या सीखेंगे:

• ब्राउज़र (क्लाइंट-साइड) में कोड (सर्वर-साइड) कैसे चलाएं और निष्पादित करें।
• इनपुट डेटा (स्रोत कोड) पढ़ें और निष्पादन परिणाम प्रदर्शित करें।
• वेब पर फ़ाइलें और फ़ोल्डर्स कैसे बनाएं और परिणाम कैसे सहेजें।
• कोड सिंटैक्स को हाइलाइट कैसे करें.

3. Google फ़ोटो क्लोन

Google Photos फ़ोटो संग्रहीत करने और साझा करने की एक सेवा है।
कोई भी आधुनिक फोटो एप्लिकेशन बुनियादी कार्य कर सकता है: अपलोड करना, क्रॉप करना आदि। लोग अपने स्वयं के अवतार बनाना चाहते हैं और बिल्लियों की तस्वीरें साझा करना चाहते हैं, इसलिए आपको छवियों के साथ काम करने में सक्षम होना चाहिए।

www.google.com/photos/about

Google फ़ोटो क्लोन बनाकर आप क्या सीखेंगे:

• फोन, टैबलेट, लैपटॉप और यहां तक ​​कि विशाल टीवी स्क्रीन पर प्रतिक्रियाशील छवियां कैसे बनाएं।
• छवि अपलोड को कैसे प्रबंधित करें, विशेष रूप से बड़ी छवियां (>1 एमबी) और थोक अपलोड।
• छवि फ़ाइलों को संसाधित करें, थंबनेल के लिए या गैलरी खोलते समय फ़ोटो को काटें और आकार बदलें।
• बोनस: क्लाउड या स्थानीय डेटाबेस में छवियों को कैसे संग्रहीत करें।

4. गिफ़्स्की क्लोन

गिफ्स्की फ़ंक्शंस का उपयोग करके वीडियो को GIF में परिवर्तित करता हैस्पंदना करनेवाला कुशल क्रॉस-फ़्रेम पैलेट और टेम्पोरल एंटी-अलियासिंग के लिए। परिणाम एक GIF है जिसमें प्रति फ्रेम हजारों फूल हैं।

gif.स्की

गिफ़्स्की क्लोन बनाकर आप क्या सीखेंगे:

• वीडियो फ़ाइलों (.mp4 से .gif) को कैसे परिवर्तित करें।
• ड्रैग एंड ड्रॉप HTML API का उपयोग कैसे करें।
• छवि अनुकूलन और प्रसंस्करण कैसे काम करता है.

नोट: गिफ़्स्की एक ओपन सोर्स प्रोजेक्ट है और GitHub पर है!

5. क्रिप्टोकरेंसी दरों की निगरानी करना

रिएक्ट नेटिव क्रिप्टोकरेंसी ट्रैकर

मुद्रा दर ट्रैकर बनाकर आप क्या सीखेंगे:

• एपीआई के साथ कैसे काम करें और एपीआई से दूरस्थ रूप से डेटा कैसे प्राप्त करें।
• डेटा को सूची के रूप में कैसे प्रदर्शित करें.
• बोनस: यदि आप रुचि रखते हैं, तो मैंने हाल ही में लिखा था मूल्य ट्रैकर बनाने पर ट्यूटोरियल रिएक्ट नेटिव के साथ क्रिप्टोकरेंसी के लिए।

नोट: यहां GitHub उदाहरण भंडार.

पिछले प्रकाशनों से परियोजनाओं का चयन।

परत

www.reddit.com/r/layer

लेयर एक समुदाय है जहां हर कोई एक साझा "बोर्ड" पर एक पिक्सेल बना सकता है। मूल विचार का जन्म Reddit पर हुआ था। आर/लेयर समुदाय साझा रचनात्मकता का एक रूपक है, कि हर कोई एक निर्माता हो सकता है और एक सामान्य कारण में योगदान दे सकता है।

अपना खुद का लेयर प्रोजेक्ट बनाते समय आप क्या सीखेंगे:

• जावास्क्रिप्ट कैनवास कैसे काम करता है कैनवास को संचालित करने का तरीका जानना कई अनुप्रयोगों में एक महत्वपूर्ण कौशल है।
• उपयोगकर्ता अनुमतियों का समन्वय कैसे करें. प्रत्येक उपयोगकर्ता लॉग इन किए बिना हर 15 मिनट में एक पिक्सेल खींच सकता है।
• कुकी सत्र बनाएं.

Squoosh

squoush.app

स्क्वोश कई उन्नत विकल्पों के साथ एक छवि संपीड़न एप्लिकेशन है।

जीआईएफ 20 एमबी

स्क्वॉश का अपना संस्करण बनाकर आप सीखेंगे:

• छवि आकारों के साथ कैसे काम करें
• ड्रैग'एन'ड्रॉप एपीआई की मूल बातें जानें
• समझें कि एपीआई और इवेंट श्रोता कैसे काम करते हैं
• फ़ाइलें कैसे अपलोड और निर्यात करें

नोट: छवि कंप्रेसर स्थानीय है. सर्वर पर अतिरिक्त डेटा भेजना आवश्यक नहीं है. आप कंप्रेसर को घर पर रख सकते हैं, या आप इसे अपनी पसंद के अनुसार सर्वर पर उपयोग कर सकते हैं।

गणक

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

Jarodburchill.github.io/कैलकुलेटररिएक्टऐप

अपना खुद का कैलकुलेटर बनाकर आप सीखेंगे:

• संख्याओं और गणित संक्रियाओं के साथ कार्य करें
• इवेंट श्रोता एपीआई के साथ अभ्यास करें
• तत्वों को कैसे व्यवस्थित करें, शैलियों को समझें

क्रॉलर (खोज इंजन)

हर किसी ने एक खोज इंजन का उपयोग किया है, तो क्यों न अपना स्वयं का खोज इंजन बनाया जाए? जानकारी खोजने के लिए क्रॉलर की आवश्यकता होती है। हर कोई हर दिन इनका उपयोग करता है और इस तकनीक और विशेषज्ञों की मांग समय के साथ बढ़ती ही जाएगी।

गूगल सर्च इंजन

अपना स्वयं का खोज इंजन बनाकर आप क्या सीखेंगे:

• क्रॉलर कैसे काम करते हैं
• साइटों को कैसे अनुक्रमित करें और उन्हें रेटिंग और प्रतिष्ठा के आधार पर कैसे रैंक करें
• अनुक्रमित साइटों को डेटाबेस में कैसे संग्रहीत करें और डेटाबेस के साथ कैसे काम करें

म्यूजिक प्लेयर (Spotify, Apple Music)

हर कोई संगीत सुनता है - यह हमारे जीवन का एक अभिन्न अंग है। आइए बेहतर ढंग से समझने के लिए एक म्यूजिक प्लेयर बनाएं कि आधुनिक म्यूजिक स्ट्रीमिंग प्लेटफॉर्म की बुनियादी कार्यप्रणाली कैसे काम करती है।

Spotify

अपना स्वयं का संगीत स्ट्रीमिंग प्लेटफ़ॉर्म बनाकर आप क्या सीखेंगे:

• एपीआई के साथ कैसे काम करें. Spotify या Apple Music से API का उपयोग करें
• अगले/पिछले ट्रैक को कैसे चलाएं, रोकें या रिवाइंड करें
• वॉल्यूम कैसे बदलें
• उपयोगकर्ता रूटिंग और ब्राउज़र इतिहास कैसे प्रबंधित करें

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

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

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

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

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

किसी भी क्लास का उपयोग किए बिना, ये प्रोजेक्ट आपको कार्यात्मक रिएक्ट में सही प्रवेश बिंदु देते हैं और निश्चित रूप से 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
• कॉर्डोबा
• वेवसर्फर
• यूआई घटक

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

क्रेडिट कार्ड फॉर्म

सहज और आनंददायक माइक्रो-इंटरैक्शन के साथ एक अच्छा क्रेडिट कार्ड आकार। इसमें नंबर फ़ॉर्मेटिंग, सत्यापन और स्वचालित कार्ड प्रकार का पता लगाना शामिल है। यह Vue.js पर बनाया गया है और पूरी तरह उत्तरदायी भी है। (आप देख सकते हैं यहां.)

क्रेडिट-कार्ड-फ़ॉर्म

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

• प्रपत्रों को संसाधित करें और सत्यापित करें
• घटनाओं को संभालें (उदाहरण के लिए, जब फ़ील्ड बदलते हैं)
• समझें कि पृष्ठ पर तत्वों को कैसे प्रदर्शित और रखा जाए, विशेष रूप से फॉर्म के शीर्ष पर दिखाई देने वाली क्रेडिट कार्ड की जानकारी

बार चार्ट

हिस्टोग्राम एक चार्ट या ग्राफ़ है जो आयताकार पट्टियों के साथ श्रेणीबद्ध डेटा का प्रतिनिधित्व करता है जिनकी ऊंचाई या लंबाई उनके द्वारा दर्शाए गए मानों के समानुपाती होती है।

इन्हें लंबवत या क्षैतिज रूप से लगाया जा सकता है। वर्टिकल बार चार्ट को कभी-कभी लाइन चार्ट भी कहा जाता है।

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

• डेटा को संरचित और समझने योग्य तरीके से प्रदर्शित करें
• इसके अतिरिक्त: जानें कि तत्व का उपयोग कैसे करें canvas और इसके साथ तत्व कैसे बनाएं

यहां आप विश्व जनसंख्या डेटा पा सकते हैं। इन्हें वर्ष के अनुसार क्रमबद्ध किया जाता है।

ट्विटर हार्ट एनिमेशन

2016 में, ट्विटर ने अपने ट्वीट्स के लिए यह अद्भुत एनीमेशन पेश किया। 2019 तक, यह अभी भी हिस्सा दिखता है, तो क्यों न इसे स्वयं बनाया जाए?

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

• CSS विशेषता के साथ कार्य करें keyframes
• HTML तत्वों में हेरफेर और चेतन करें
• जावास्क्रिप्ट, HTML और CSS को मिलाएं

खोजने योग्य GitHub रिपॉजिटरी

यहां कुछ भी आकर्षक नहीं है—GitHub रिपॉजिटरी केवल एक महिमामंडित सूची है।
लक्ष्य रिपॉजिटरी को प्रदर्शित करना और उपयोगकर्ता को उन्हें फ़िल्टर करने की अनुमति देना है। उपयोग आधिकारिक GitHub एपीआई प्रत्येक उपयोगकर्ता के लिए रिपॉजिटरी प्राप्त करने के लिए।

GitHub प्रोफाइल पेज - github.com/indreklasn

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

• एपीआई से डेटा प्राप्त करें
• एपीआई से डेटा प्रदर्शित करें
• प्रत्येक खोज के लिए प्रासंगिक डेटा फ़िल्टर करें और दिखाएं
• वैकल्पिक: यदि आप किसी चुनौती के लिए तैयार हैं, तो उपयोग करें एपीआई v4, GraphQL का उपयोग करके बनाया गया। यदि आप ग्राफक्यूएल सीखना चाहते हैं, तो मेरे पिछले लेखों में से एक पर जाएँ.

Reddit स्टाइल चैट

अपनी सरलता और उपयोग में आसानी के कारण चैट संचार का एक लोकप्रिय तरीका है। लेकिन वास्तव में आधुनिक चैट रूम को क्या बढ़ावा देता है? वेबसॉकेट!

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

• वेबसॉकेट, वास्तविक समय संचार और डेटा अपडेट का उपयोग करें
• उपयोगकर्ता पहुंच स्तरों के साथ काम करें (उदाहरण के लिए, चैट चैनल के मालिक की भूमिका होती है admin, और कमरे में अन्य लोग - user)
• प्रपत्रों को संसाधित करें और सत्यापित करें - याद रखें, संदेश भेजने के लिए चैट विंडो है input
• अलग-अलग चैट बनाएं और जुड़ें
• व्यक्तिगत संदेशों के साथ काम करें. उपयोगकर्ता अन्य उपयोगकर्ताओं के साथ निजी तौर पर चैट कर सकते हैं। मूलतः, आप दो उपयोगकर्ताओं के बीच एक WebSocket कनेक्शन स्थापित कर रहे होंगे।

धारी शैली नेविगेशन

जो बात इस नेविगेशन को विशिष्ट बनाती है वह यह है कि पॉपओवर कंटेनर सामग्री में फिट होने के लिए बदल जाता है। नए पॉपओवर को खोलने और बंद करने के पारंपरिक व्यवहार की तुलना में इस संक्रमण में एक लालित्य है।

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

• सीएसएस एनिमेशन को ट्रांज़िशन के साथ संयोजित करें
• सामग्री को मंद करें और फ़्लोट किए गए तत्व पर सक्रिय वर्ग लागू करें

Pacman

पॅकमैन का अपना संस्करण बनाएं। यह यह जानने का एक शानदार तरीका है कि गेम कैसे विकसित किए जाते हैं और मूल बातें समझें। जावास्क्रिप्ट फ्रेमवर्क, रिएक्ट या Vue का उपयोग करें।

आपको सीखना होगा:

• तत्व कैसे गति करते हैं
• कैसे निर्धारित करें कि कौन सी कुंजी दबानी है
• टकराव के क्षण का निर्धारण कैसे करें
• आप आगे जा सकते हैं और भूत गति नियंत्रण जोड़ सकते हैं

आपको इस प्रोजेक्ट का एक उदाहरण मिलेगा भंडार में GitHub

उपयोगकर्ता प्रबंधन

परियोजना भंडार में GitHub

उपयोगकर्ता प्रशासन के लिए CRUD प्रकार का एप्लिकेशन बनाना आपको विकास की मूल बातें सिखाएगा। यह नए डेवलपर्स के लिए विशेष रूप से उपयोगी है।

आपको सीखना होगा:

• रूटिंग क्या है
• डेटा प्रविष्टि प्रपत्रों को कैसे संभालें और जांचें कि उपयोगकर्ता ने क्या दर्ज किया है
• डेटाबेस के साथ कैसे काम करें - क्रियाएं बनाएं, पढ़ें, अपडेट करें और हटाएं

अपने स्थान पर मौसम की जाँच करना

परियोजना भंडार में GitHub

यदि आप ऐप्स बनाना चाहते हैं, तो मौसम ऐप से शुरुआत करें। यह प्रोजेक्ट स्विफ्ट का उपयोग करके पूरा किया जा सकता है।

एप्लिकेशन बनाने का अनुभव प्राप्त करने के अलावा, आप सीखेंगे:

• एपीआई के साथ कैसे काम करें
• जियोलोकेशन का उपयोग कैसे करें
• टेक्स्ट इनपुट जोड़कर अपने एप्लिकेशन को अधिक गतिशील बनाएं। इसमें उपयोगकर्ता किसी विशिष्ट स्थान के मौसम की जांच करने के लिए अपना स्थान दर्ज कर सकेंगे।

आपको एक एपीआई की आवश्यकता होगी. मौसम डेटा प्राप्त करने के लिए, ओपनवेदर एपीआई का उपयोग करें। ओपनवेदर एपीआई के बारे में अधिक जानकारी यहां.

चैट विंडो

मेरी चैट विंडो क्रियाशील है, दो ब्राउज़र टैब में खुलती है

सॉकेट के साथ शुरुआत करने के लिए चैट विंडो बनाना सबसे अच्छा तरीका है। टेक स्टैक का विकल्प बहुत बड़ा है। उदाहरण के लिए, Node.js एकदम सही है।

आप सीखेंगे कि सॉकेट कैसे काम करते हैं और उन्हें कैसे लागू किया जाता है। यह इस परियोजना का मुख्य लाभ है.

यदि आप एक लारवेल डेवलपर हैं जो सॉकेट के साथ काम करना चाहते हैं, तो मेरा पढ़ें लेख

गिटलैब सीआई

स्रोत

यदि आप सतत एकीकरण (सीआई) में नए हैं, तो गिटलैब सीआई के साथ खेलें। कुछ वातावरण स्थापित करें और कुछ परीक्षण चलाने का प्रयास करें। यह बहुत कठिन परियोजना नहीं है, लेकिन मुझे यकीन है कि आप इससे बहुत कुछ सीखेंगे। कई विकास दल अब सीआई का उपयोग कर रहे हैं। इसका उपयोग कैसे करना है यह जानना उपयोगी है।

आपको सीखना होगा:

• गिटलैब सीआई क्या है?
• कैसे कॉन्फ़िगर करें .gitlab-ci.ymlजो GitLab उपयोगकर्ता को बताता है कि क्या करना है
• अन्य परिवेशों में कैसे तैनात करें

वेबसाइट विश्लेषक

एक स्क्रैपर बनाएं जो वेबसाइटों के शब्दार्थ का विश्लेषण करे और उनकी रेटिंग बनाए। उदाहरण के लिए, आप छवियों में गुम ऑल्ट टैग की जांच कर सकते हैं। या जांचें कि पेज में एसईओ मेटा टैग हैं या नहीं। उपयोगकर्ता इंटरफ़ेस के बिना एक स्क्रैपर बनाया जा सकता है।

आपको सीखना होगा:

• स्क्रेपर कैसे काम करता है?
• DOM चयनकर्ता कैसे बनाएं
• एल्गोरिदम कैसे लिखें
• यदि आप यहीं रुकना नहीं चाहते, तो एक यूजर इंटरफ़ेस बनाएं। आप जांची गई प्रत्येक वेबसाइट पर एक रिपोर्ट भी बना सकते हैं।

सामाजिक नेटवर्क पर भावना का पता लगाना

स्रोत

सोशल मीडिया पर भावनाओं का पता लगाना मशीन लर्निंग से परिचित होने का एक शानदार तरीका है।

आप केवल एक सामाजिक नेटवर्क का विश्लेषण करके शुरुआत कर सकते हैं। आमतौर पर हर कोई ट्विटर से शुरुआत करता है।

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

आपको सीखना होगा:

• मशीन लर्निंग क्या है

ट्रेलो क्लोन

इंद्रेक लासन से ट्रेलो क्लोन।

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

• अनुरोध प्रसंस्करण मार्गों (रूटिंग) का संगठन।
• खींचें और छोड़ें।
• नई वस्तुएं (बोर्ड, सूचियां, कार्ड) कैसे बनाएं।
• इनपुट डेटा का प्रसंस्करण और जाँच करना।
• क्लाइंट की ओर से: स्थानीय स्टोरेज का उपयोग कैसे करें, डेटा को स्थानीय स्टोरेज में कैसे सहेजें, स्थानीय स्टोरेज से डेटा कैसे पढ़ें।
• सर्वर साइड से: डेटाबेस का उपयोग कैसे करें, डेटाबेस में डेटा कैसे सेव करें, डेटाबेस से डेटा कैसे पढ़ें।

यहां एक रिपोजिटरी का उदाहरण दिया गया है, रिएक्ट+रेडक्स में बनाया गया।

व्यवस्थापक पैनल

जीथब रिपॉजिटरी।

एक सरल CRUD एप्लिकेशन, बुनियादी बातें सीखने के लिए आदर्श। आओ सीखें:

• उपयोगकर्ता बनाएँ, उपयोगकर्ता प्रबंधित करें।
• डेटाबेस के साथ इंटरैक्ट करें - उपयोगकर्ता बनाएं, पढ़ें, संपादित करें, हटाएं।
• इनपुट का सत्यापन करना और प्रपत्रों के साथ कार्य करना।

क्रिप्टोकरेंसी ट्रैकर (देशी मोबाइल ऐप)

जीथब भंडार।

कुछ भी: स्विफ्ट, ऑब्जेक्टिव-सी, रिएक्ट नेटिव, जावा, कोटलिन।

चलो पढ़ते हैं:

• देशी एप्लिकेशन कैसे काम करते हैं.
• एपीआई से डेटा कैसे पुनर्प्राप्त करें।
• नेटिव पेज लेआउट कैसे काम करते हैं.
• मोबाइल सिमुलेटर के साथ कैसे काम करें.

इस एपीआई को आज़माएं. यदि आपको कुछ बेहतर लगे तो टिप्पणियों में लिखें।

यदि आप रुचि रखते हैं, तो यह यहाँ है यहाँ एक ट्यूटोरियल है.

स्क्रैच से अपना खुद का वेबपैक कॉन्फिगरेशन सेट करें

तकनीकी रूप से, यह कोई एप्लिकेशन नहीं है, लेकिन यह समझना बहुत उपयोगी कार्य है कि वेबपैक अंदर से कैसे काम करता है। अब यह कोई "ब्लैक बॉक्स" नहीं, बल्कि एक समझने योग्य उपकरण होगा।

आवश्यकताएँ:

• es7 को es5 (मूल बातें) में संकलित करें।
• jsx को js - या - .vue से .js तक संकलित करें (आपको लोडर सीखना होगा)
• वेबपैक देव सर्वर और हॉट मॉड्यूल रीलोडिंग सेट करें। (vue-cli और create-react-app दोनों का उपयोग करें)
• हेरोकू, now.sh या Github का उपयोग करें, जानें कि वेबपैक प्रोजेक्ट कैसे तैनात करें।
• सीएसएस - एससीएसएस, लेस, स्टाइलस संकलित करने के लिए अपना पसंदीदा प्रीप्रोसेसर सेट करें।
• वेबपैक के साथ छवियों और एसवीजीएस का उपयोग करना सीखें।

यह संपूर्ण शुरुआती लोगों के लिए एक अद्भुत संसाधन है।

हैकरन्यूज़ क्लोन

प्रत्येक जेडी को अपना स्वयं का हैकरन्यूज़ बनाना आवश्यक है।

आप रास्ते में क्या सीखेंगे:

• हैकरन्यूज एपीआई के साथ कैसे इंटरैक्ट करें।
• सिंगल पेज एप्लिकेशन कैसे बनाएं।
• टिप्पणियाँ, व्यक्तिगत टिप्पणियाँ, प्रोफ़ाइल देखने जैसी सुविधाओं को कैसे कार्यान्वित करें।
• अनुरोध प्रसंस्करण मार्गों (रूटिंग) का संगठन।

Tudushechka

टोडोएमवीसी।

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

सीखना:

• नए कार्य बनाएं.
• जाँचें कि फ़ील्ड भरे हुए हैं।
• फ़िल्टर कार्य (पूर्ण, सक्रिय, सभी)। उपयोग filter и reduce.
• जावास्क्रिप्ट की मूल बातें समझें।

क्रमबद्ध ड्रैग और ड्रॉप सूची

जीथब भंडार।

समझने में बहुत मददगार एपीआई को खींचें और छोड़ें.

आओ सीखें:

• एपीआई खींचें और छोड़ें
• समृद्ध यूआई बनाएं

मैसेंजर क्लोन (मूल ऐप)

आप समझेंगे कि वेब एप्लिकेशन और मूल एप्लिकेशन दोनों कैसे काम करते हैं, जो आपको ग्रे मास से अलग करेगा।

हम क्या अध्ययन करेंगे:

• वेब सॉकेट (तत्काल संदेश)
• देशी एप्लिकेशन कैसे काम करते हैं.
• देशी अनुप्रयोगों में टेम्प्लेट कैसे काम करते हैं।
• मूल अनुप्रयोगों में अनुरोध प्रसंस्करण मार्गों को व्यवस्थित करना।

पाठ संपादक

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

किसी न किसी बिंदु पर, हर किसी ने टेक्स्ट एडिटर का उपयोग किया है। तो क्यों नहीं इसे स्वयं बनाएं?

रेडिट क्लोन

रेडिट एक सामाजिक समाचार एकत्रीकरण, वेब सामग्री रेटिंग और चर्चा साइट है।

Reddit मेरा अधिकांश समय लेता है, लेकिन मैं इस पर घूमना जारी रखता हूँ। Reddit क्लोन बनाना प्रोग्रामिंग सीखने का एक प्रभावी तरीका है (एक ही समय में Reddit ब्राउज़ करते समय)।

Reddit आपको बहुत समृद्ध प्रदान करता है API. किसी भी विशेषता को न छोड़ें या काम को बेतरतीब ढंग से न करें। वास्तविक दुनिया में ग्राहकों और ग्राहकों के साथ, आप बेतरतीब ढंग से काम नहीं कर सकते, या आप जल्दी ही अपनी नौकरी खो देंगे।

स्मार्ट ग्राहकों को तुरंत एहसास हो जाएगा कि काम ख़राब तरीके से किया जा रहा है और वे किसी और को ढूंढ लेंगे।

रेडिट एपीआई

एक खुला स्रोत एनपीएम पैकेज प्रकाशित करना

यदि आप जावास्क्रिप्ट कोड लिखते हैं, तो संभावना है कि आप पैकेज मैनेजर का उपयोग करेंगे। एक पैकेज मैनेजर आपको मौजूदा कोड का पुन: उपयोग करने की अनुमति देता है जिसे अन्य लोगों ने लिखा और प्रकाशित किया है।

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

पैकेज कुछ भी हो सकता है. यदि आपके पास कोई विचार नहीं है, तो अपना स्वयं का लॉडैश बनाएं और उसे प्रकाशित करें।

लोदाश: lodash.com

आपने जो कुछ ऑनलाइन किया है वह आपको दूसरों से 10% ऊपर रखता है। यहां कुछ उपयोगी संसाधन दिए गए हैं खुले स्रोतों और पैकेजों के बारे में।

फ्रीकोडकैम्प पाठ्यक्रम

एफसीसी पाठ्यक्रम

फ्रीकोडकैंप ने बहुत कुछ एकत्र किया है व्यापक प्रोग्रामिंग पाठ्यक्रम.

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

यदि आप पूरा पाठ्यक्रम पूरा करने में सफल हो जाते हैं तो आप अपनी पहली नौकरी के लिए अधिक योग्य होंगे।

स्क्रैच से एक HTTP सर्वर बनाएं

HTTP प्रोटोकॉल मुख्य प्रोटोकॉल में से एक है जिसके माध्यम से सामग्री इंटरनेट पर यात्रा करती है। HTTP सर्वर का उपयोग HTML, CSS और JS जैसी स्थिर सामग्री परोसने के लिए किया जाता है।

HTTP प्रोटोकॉल को शुरू से लागू करने में सक्षम होने से आपके ज्ञान का विस्तार होगा कि चीजें कैसे इंटरैक्ट करती हैं।

उदाहरण के लिए, यदि आप NodeJs का उपयोग करते हैं, तो आप जानते हैं कि Express एक HTTP सर्वर प्रदान करता है।

संदर्भ के लिए, देखें कि क्या आप कर सकते हैं:

• किसी भी लाइब्रेरी का उपयोग किए बिना एक सर्वर सेट करें
• सर्वर को HTML, CSS और JS सामग्री प्रस्तुत करनी होगी।
• एक राउटर को शुरू से लागू करना
• परिवर्तनों की निगरानी करें और सर्वर को अद्यतन करें

यदि आप नहीं जानते कि क्यों, तो उपयोग करें जाओ लैंग और एक HTTP सर्वर बनाने का प्रयास करें चायदान शुरूुआत से।

नोट्स के लिए डेस्कटॉप ऐप

हम सभी नोट लेते हैं, है ना?

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

बेझिझक इसे पहली चुनौती (पाठ संपादक) के साथ जोड़ें।

बोनस के रूप में, अपने डेस्कटॉप संस्करण को वेब संस्करण के साथ समन्वयित करने का प्रयास करें।

पॉडकास्ट (बादल क्लोन)

पॉडकास्ट कौन नहीं सुनता?

निम्नलिखित कार्यक्षमता वाला एक वेब एप्लिकेशन बनाएं:

• खाता बनाएं
• पॉडकास्ट खोजें
• पॉडकास्ट को रेट करें और उसकी सदस्यता लें
• रुकें और खेलें, गति बदलें, 30 सेकंड के लिए आगे और पीछे कार्य करें।

शुरुआती बिंदु के रूप में आईट्यून्स एपीआई का उपयोग करने का प्रयास करें। यदि आप किसी अन्य संसाधन के बारे में जानते हैं, तो कृपया टिप्पणियों में पोस्ट करें।

सहबद्ध.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

स्क्रीन कैप्चर

नमस्ते! मैं अभी अपनी स्क्रीन पर फिल्मांकन कर रहा हूं!

एक डेस्कटॉप या वेब ऐप बनाएं जो आपको अपनी स्क्रीन कैप्चर करने और क्लिप को इस रूप में सहेजने की अनुमति देता है .gif

यहां कुछ सुझावइसे कैसे हासिल किया जाए.

सूत्रों का कहना है

• डेवलपर के लिए 5 और साहसी प्रशिक्षण परियोजनाएं (लेयर, स्क्वॉश, कैलकुलेटर, वेबसाइट क्रॉलर, म्यूजिक प्लेयर)
• आपके फ्रंट-एंड कौशल को निखारने के लिए 9 परियोजनाएँ
• फ्रंट-एंड डेवलपर के लिए छह कार्य
• एक डेवलपर के लिए मजेदार अभ्यास
• 8 शैक्षिक परियोजनाएँ
• अभ्यास करने योग्य परियोजनाओं की एक और सूची

स्रोत: www.habr.com