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

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

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



www.notion.so

आप एक धारणा क्लोन बनाकर क्या सीखते हैं:

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

इस लेख का अनुवाद EDISON सॉफ्टवेयर के सहयोग से किया गया, जो एक ऐसी कंपनी है जो अनुप्रयोगों और साइटों को विकसित करती है , और स्टार्टअप्स में भी निवेश करती है ।

2. क्लोन प्रतिकृति

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



repl.it

आप एक रिप्लिट.टोन क्लोन बनाकर क्या सीखेंगे:

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

3. क्लोन गूगल फोटोज

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



www.google.com/photos/about

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

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

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

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



gif.ski

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

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

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

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

प्रतिक्रियाशील मूल निवासी क्रिप्टोक्यूरेंसी ट्रैकर

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

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

नोट: यहाँ GitHub का उदाहरण भंडार है ।

---

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

परत

www.reddit.com/r/layer

परत एक समुदाय है जहां हर कोई एक आम "बोर्ड" पर पिक्सेल खींच सकता है। मूल विचार रेडिट पर पैदा हुआ था। R / Layer समुदाय सह-निर्माण के लिए एक रूपक है जो हर कोई एक निर्माता हो सकता है और एक सामान्य कारण में योगदान कर सकता है।

अपना लेयर प्रोजेक्ट बनाने के लिए आप क्या सीखेंगे:

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

Squoosh

squoosh.app

स्क्वॉश एक छवि संपीड़न अनुप्रयोग है जिसमें कई उन्नत विकल्प हैं।


Squoosh के अपने संस्करण को बनाकर आप सीखेंगे:

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

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

कैलकुलेटर

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


jarodburchill.imtqy.com/CalculatorReactApp

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

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

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

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


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

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

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

संगीत खिलाड़ी (Spotify, Apple Music)

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


Spotify

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

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

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

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



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

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

• हुक के साथ प्रतिक्रिया करें
• बनाने प्रतिक्रिया-ऐप
• 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 घटक

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

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

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



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

क्या सीखें:

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

बार ग्राफ

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

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



क्या सीखें:

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

यहां आप दुनिया की आबादी का डेटा पा सकते हैं। वे साल के अनुसार हल कर रहे हैं।

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

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


क्या सीखें:

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

खोज समारोह के साथ GitHub रिपॉजिटरी

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



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

क्या सीखें:

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

रेडिट स्टाइल चैट्स

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



क्या सीखें:

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

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

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



क्या सीखें:

• संक्रमण के साथ सीएसएस एनीमेशन को मिलाएं
• सामग्री को शेड करें और रोमिंग आइटम पर सक्रिय वर्ग लागू करें

Pacman

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

आप सीखेंगे:

• आइटम कैसे चलते हैं
• किस कुंजी को कैसे निर्धारित किया जाए
• टकराव के क्षण का निर्धारण कैसे करें
• आप वहां रुक नहीं सकते और भूत नियंत्रण जोड़ सकते हैं

आप इस प्रोजेक्ट का एक उदाहरण GitHub रिपॉजिटरी में पा सकते हैं ।

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

गिटहब रिपोजिटरी प्रोजेक्ट

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

आप सीखेंगे:

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

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

गिटहब रिपोजिटरी प्रोजेक्ट

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

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

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

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

चैट विंडो

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

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

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

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

गिटलब सी.आई.

स्रोत

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

आप सीखेंगे:

• GitLab CI क्या है?
• कॉन्फ़िगर कैसे करें .gitlab-ci.yml , जो GitLab उपयोगकर्ता को बताता है कि क्या करना है
• अन्य वातावरण में कैसे तैनात करें

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

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

आप सीखेंगे:

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

सामाजिक नेटवर्क में मनोदशाओं का निर्धारण

स्रोत

सोशल नेटवर्क पर मूड को परिभाषित करना, मशीन लर्निंग को जानने का एक शानदार तरीका है।

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

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

आप सीखेंगे:

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

क्लोन ट्रेलो

Indrek Lasn द्वारा क्लोन ट्रेलो।

आप क्या सीखते हैं:

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

यहाँ प्रतिक्रिया + Redux पर किए गए भंडार का एक उदाहरण है ।

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

गीथूब रिपोजिटरी।

एक साधारण CRUD ऐप, मूल बातें सीखने के लिए एकदम सही है। सीखें कि कैसे करने के लिए:

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

क्रिप्टोक्यूरेंसी ट्रैकर (मूल मोबाइल एप्लिकेशन)

गितुब भंडार।

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

हम अध्ययन करते हैं:

• देशी आवेदन कैसे काम करते हैं।
• API से डेटा कैसे प्राप्त करें।
• कैसे मूल पृष्ठ लेआउट काम करते हैं।
• मोबाइल सिमुलेटर के साथ कैसे काम करें।

इस एपीआई की कोशिश करो । बेहतर खोजें - टिप्पणियों में लिखें।

यदि रुचि है, तो यहां एक ट्यूटोरियल है ।

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

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

आवश्यकताएँ:

• Es7 को es5 (मूल बातें) संकलित करें।
• Jsx को js - या - .vue .js पर संकलित करें (आपको बूटलोडर्स सीखना होगा)
• वेबपैक देव सर्वर और हॉट मॉड्यूल पुनः लोड करना कॉन्फ़िगर करें। (vue-cli और create-react-app दोनों का उपयोग करें)
• Heroku, now.sh या Github का उपयोग करें, जानें कि वेबपैक प्रोजेक्ट्स को कैसे लागू किया जाए।
• Css - scss, कम, स्टाइलस को संकलित करने के लिए अपना पसंदीदा प्रीप्रोसेसर सेट करें।
• वेबपैक के साथ चित्र और svgs का उपयोग करना सीखें।

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

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

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

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

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

Tudushechka

TodoMVC।

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

इसे सीखें:

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

क्रमबद्ध ड्रैग एंड ड्रॉप लिस्ट

गितुब भंडार।

खींचें और ड्रॉप एपीआई को समझने के लिए बहुत उपयोगी है।

सीखें कि कैसे करने के लिए:

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

क्लोन दूत (मूल आवेदन)

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

क्या सीखें:

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

पाठ संपादक

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

कुछ बिंदु पर, सभी ने एक पाठ संपादक का उपयोग किया। तो क्यों न इसे खुद बनाया जाए ?

क्लोन रेडिट

Reddit एक सामाजिक समाचार एकत्रीकरण, वेब सामग्री रैंकिंग और चर्चा स्थल है।

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

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

स्मार्ट ग्राहक तुरंत अनुमान लगा लेंगे कि काम अच्छा नहीं हो रहा है और किसी और को ढूंढ लेगा।



Reddit एपीआई

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

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

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

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



लॉडश: लॉडश.कॉम

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

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

Fcc पाठ्यक्रम

freeCodecamp ने एक बहुत व्यापक प्रोग्रामिंग पाठ्यक्रम को एक साथ रखा है।

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



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

खरोंच से एक HTTP सर्वर बनाएँ

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

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

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

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

• किसी भी पुस्तकालयों का उपयोग किए बिना सर्वर को कॉन्फ़िगर करें
• सर्वर को HTML, CSS और JS सामग्री परोसनी चाहिए।
• खरोंच से एक राउटर को लागू करना
• परिवर्तनों का ट्रैक रखें और सर्वर को अपडेट करें

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

डेस्कटॉप नोटबुक अनुप्रयोग

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

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

इसे पहली चुनौती (टेक्स्ट एडिटर) के साथ संयोजित करने के लिए स्वतंत्र महसूस करें।

एक बोनस के रूप में, वेब संस्करण के साथ डेस्कटॉप संस्करण को सिंक्रनाइज़ करने का प्रयास करें।

पॉडकास्ट (ओवरकास्ट क्लोन)

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

निम्नलिखित सुविधाओं के साथ एक वेब एप्लिकेशन बनाएं:

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

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



affiliate.itunes.apple.com/resources/documentation/itunes-store-web-service-search-api

स्क्रीन पर कब्जा

नमस्ते! मैं अभी अपनी स्क्रीन उतार रहा हूँ!

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

इसे कैसे प्राप्त किया जाए, इसके कुछ सुझाव यहां दिए गए हैं।

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

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

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

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