فرنٹ اینڈ ڈوجو: ڈویلپر کی مہارت کو تربیت دینے کے منصوبے (5 نئے + 43 پرانے)

1. تصور کلون

نوشن ایپلیکیشن بہت سے لوگوں کو پسند ہے؛ یہ آپ کو اپنے ورک فلو کو بہتر بنانے، دستاویزات کے ساتھ کام کرنے، کاموں کو شیڈول کرنے اور آلات کے درمیان ڈیٹا کو سنکرونائز کرنے کی اجازت دیتا ہے۔

www.notion.so

ایک تصور کلون بنا کر آپ کیا سیکھیں گے:

• HTML ڈریگ اینڈ ڈراپ API. صارف "ماؤس کے ساتھ پکڑ سکتا ہے" گھسیٹنے کے قابل عنصر اور اس میں رکھیں گرنے کے قابل زون
• اپنے کمپیوٹر اور اسمارٹ فون کے درمیان ریئل ٹائم میں ڈیٹا کو کیسے سنکرونائز کریں۔
• ہم صارفین کو ریکارڈ بنانے، پڑھنے، اپ ڈیٹ کرنے اور حذف کرنے کی اجازت دیتے ہیں، اس طرح CRUD کی مہارتوں کی تربیت کرتے ہیں۔

مضمون کا ترجمہ EDISON سافٹ ویئر کے تعاون سے کیا گیا تھا، جو ایپلی کیشنز اور ویب سائٹس تیار کرتا ہے۔اور اسٹارٹ اپس میں سرمایہ کاری کرتا ہے۔.

2. Repl.it کلون

Repl.it ریئل ٹائم تعاونی کوڈ ایڈیٹنگ کے لیے ایک ٹول ہے۔ آپ کئی زبانوں کا انتخاب کر سکتے ہیں: JavaScript، Python، Go اور کوڈ کو براہ راست براؤزر میں چلائیں۔ فوری ڈیمو اور کوڈ انٹرویوز کے لیے بہت مفید ہے۔

repl.it

Repl.it کلون بنا کر آپ کیا سیکھیں گے:

• براؤزر (کلائنٹ سائڈ) میں کوڈ (سرور سائیڈ) کو کیسے چلائیں اور اس پر عمل کریں۔
• ان پٹ ڈیٹا (ذریعہ کوڈ) پڑھیں اور عملدرآمد کا نتیجہ دکھائیں۔
• ویب پر فائلیں اور فولڈر کیسے بنائیں اور نتائج کو محفوظ کریں۔
• کوڈ نحو کو کیسے اجاگر کریں۔

3. گوگل فوٹو کلون

گوگل فوٹوز تصاویر کو اسٹور کرنے اور شیئر کرنے کے لیے ایک سروس ہے۔
کوئی بھی جدید تصویری ایپلی کیشن بنیادی کام انجام دے سکتی ہے: اپ لوڈ، کاٹنا، وغیرہ۔ لوگ اپنے اوتار بنانا چاہتے ہیں اور بلیوں کی تصاویر شیئر کرنا چاہتے ہیں، اس لیے آپ کو تصاویر کے ساتھ کام کرنے کے قابل ہونا چاہیے۔

www.google.com/photos/about

گوگل فوٹو کلون بنا کر آپ کیا سیکھیں گے:

• فونز، ٹیبلیٹس، لیپ ٹاپس اور یہاں تک کہ دیوہیکل ٹی وی اسکرینوں پر بھی جوابی تصاویر کیسے بنائیں۔
• تصویری اپ لوڈز، خاص طور پر بڑی تصاویر (>1MB) اور بلک اپ لوڈز کو کیسے ہینڈل کریں۔
• تصویری فائلوں پر کارروائی کریں، تھمب نیلز کے لیے یا گیلری کھولتے وقت تصاویر کو تراشیں اور ان کا سائز تبدیل کریں۔
• بونس: کلاؤڈ یا مقامی ڈیٹا بیس میں تصاویر کو کیسے اسٹور کیا جائے۔

4. گفسکی کلون

گیفسکی فنکشنز کا استعمال کرتے ہوئے ویڈیو کو GIF میں تبدیل کرتا ہے۔pngquant موثر کراس فریم پیلیٹ اور وقتی اینٹی ایلائزنگ کے لیے۔ نتیجہ ایک GIF ہے جس میں ہر فریم میں ہزاروں پھول ہیں۔

gif.ski

Gifski کلون بنا کر آپ کیا سیکھیں گے:

• ویڈیو فائلوں (.mp4 کو .gif) میں تبدیل کرنے کا طریقہ۔
• ڈریگ اینڈ ڈراپ HTML API کا استعمال کیسے کریں۔
• تصویر کی اصلاح اور پروسیسنگ کیسے کام کرتی ہے۔

نوٹ: Gifsky ایک اوپن سورس پروجیکٹ ہے۔ اور GitHub پر ہے!

5. کریپٹو کرنسی کے نرخوں کی نگرانی کرنا

مقامی کریپٹو کرنسی ٹریکر پر ردعمل ظاہر کریں۔

کرنسی ریٹ ٹریکر بنا کر آپ کیا سیکھیں گے:

• API کے ساتھ کیسے کام کریں اور API سے دور سے ڈیٹا وصول کریں۔
• فہرست کے طور پر ڈیٹا کو کیسے ڈسپلے کریں۔
• بونس: اگر آپ دلچسپی رکھتے ہیں، میں نے حال ہی میں لکھا قیمت ٹریکر بنانے کا سبق React Native کے ساتھ cryptocurrency کے لیے۔

نوٹ: یہاں GitHub مثالی ذخیرہ.

پچھلی اشاعتوں سے پروجیکٹس کا انتخاب۔

پرت

www.reddit.com/r/layer

پرت ایک کمیونٹی ہے جہاں ہر کوئی مشترکہ "بورڈ" پر ایک پکسل بنا سکتا ہے۔ اصل خیال Reddit پر پیدا ہوا تھا۔ r/Layer کمیونٹی مشترکہ تخلیقی صلاحیتوں کا ایک استعارہ ہے، کہ ہر کوئی تخلیق کار ہو سکتا ہے اور مشترکہ مقصد میں اپنا حصہ ڈال سکتا ہے۔

اپنا پرت پروجیکٹ بناتے وقت آپ کیا سیکھیں گے:

• JavaScript کینوس کیسے کام کرتا ہے کینوس کو چلانے کا طریقہ جاننا بہت سی ایپلی کیشنز میں ایک اہم مہارت ہے۔
• صارف کی اجازتوں کو کیسے مربوط کریں۔ ہر صارف لاگ ان کیے بغیر ہر 15 منٹ میں ایک پکسل کھینچ سکتا ہے۔
• کوکی سیشن بنائیں۔

اسکواش

squoosh.app

اسکووش ایک امیج کمپریشن ایپلی کیشن ہے جس میں بہت سے جدید اختیارات ہیں۔

GIF 20 MB

اسکووش کا اپنا ورژن بنا کر آپ سیکھیں گے:

• تصویر کے سائز کے ساتھ کیسے کام کریں۔
• Drag'n'Drop API کی بنیادی باتیں جانیں۔
• سمجھیں کہ API اور ایونٹ سننے والے کیسے کام کرتے ہیں۔
• فائلوں کو اپ لوڈ اور ایکسپورٹ کرنے کا طریقہ

نوٹ: امیج کمپریسر مقامی ہے۔ سرور کو اضافی ڈیٹا بھیجنا ضروری نہیں ہے۔ آپ گھر پر کمپریسر رکھ سکتے ہیں، یا آپ اسے اپنی پسند کے سرور پر استعمال کر سکتے ہیں۔

کیلکولیٹر۔

چلو بھئی؟ سنجیدگی سے؟ کیلکولیٹر؟ ہاں، بالکل، ایک کیلکولیٹر۔ ریاضی کی کارروائیوں کی بنیادی باتوں کو سمجھنا اور وہ کیسے مل کر کام کرتے ہیں آپ کی درخواستوں کو آسان بنانے کے لیے ایک اہم مہارت ہے۔ جلد یا بدیر آپ کو نمبروں سے نمٹنا پڑے گا اور جتنی جلدی بہتر ہے۔

jarodburchill.github.io/CalculatorReactApp

اپنا کیلکولیٹر بنا کر آپ سیکھیں گے:

• اعداد اور ریاضی کی کارروائیوں کے ساتھ کام کریں۔
• ایونٹ سننے والے API کے ساتھ مشق کریں۔
• عناصر کو کیسے ترتیب دیا جائے، انداز کو سمجھیں۔

کرالر (سرچ انجن)

ہر ایک نے سرچ انجن استعمال کیا ہے، تو کیوں نہ اپنا خود بنائیں؟ معلومات کی تلاش کے لیے کرالر کی ضرورت ہوتی ہے۔ ہر کوئی انہیں روزانہ استعمال کرتا ہے اور اس ٹیکنالوجی اور ماہرین کی مانگ وقت کے ساتھ ساتھ بڑھے گی۔

گوگل سرچ انجن

اپنا سرچ انجن بنا کر آپ کیا سیکھیں گے:

• کرالر کیسے کام کرتے ہیں۔
• سائٹس کو کیسے انڈیکس کیا جائے اور درجہ بندی اور شہرت کے لحاظ سے ان کی درجہ بندی کیسے کی جائے۔
• ڈیٹا بیس میں انڈیکس شدہ سائٹس کو کیسے اسٹور کیا جائے اور ڈیٹا بیس کے ساتھ کیسے کام کیا جائے۔

میوزک پلیئر (Spotify، Apple Music)

ہر کوئی موسیقی سنتا ہے - یہ ہماری زندگی کا صرف ایک لازمی حصہ ہے۔ آئیے بہتر طور پر سمجھنے کے لیے ایک میوزک پلیئر بنائیں کہ جدید میوزک اسٹریمنگ پلیٹ فارم کے بنیادی میکانکس کیسے کام کرتے ہیں۔

Spotify

آپ اپنا میوزک اسٹریمنگ پلیٹ فارم بنا کر کیا سیکھیں گے:

• API کے ساتھ کیسے کام کریں۔ Spotify یا Apple Music سے API استعمال کریں۔
• اگلے/پچھلے ٹریک کو کیسے چلائیں، موقوف کریں یا ریوائنڈ کریں۔
• حجم کو تبدیل کرنے کا طریقہ
• یوزر روٹنگ اور براؤزر ہسٹری کا نظم کیسے کریں۔

ری ایکٹ کا استعمال کرتے ہوئے مووی سرچ ایپ (ہکس کے ساتھ)

پہلی چیز جس کے ساتھ آپ شروع کر سکتے ہیں وہ ہے React کا استعمال کرتے ہوئے مووی سرچ ایپ بنانا۔ ذیل میں ایک تصویر دی گئی ہے کہ حتمی درخواست کیسی نظر آئے گی:

آپ کیا سیکھیں گے۔
اس ایپ کو بنا کر، آپ نسبتاً نئے Hooks API کا استعمال کر کے اپنی React کی مہارت کو بہتر بنائیں گے۔ مثال کے طور پر پروجیکٹ React اجزاء، بہت سے ہکس، ایک بیرونی API، اور یقیناً کچھ CSS اسٹائل کا استعمال کرتا ہے۔

ٹیک اسٹیک اور خصوصیات

• ہکس کے ساتھ رد عمل ظاہر کریں۔
• تخلیق-رد عمل-ایپ
• جے ایس ایکس
• CSS

بغیر کسی کلاس کا استعمال کیے، یہ پروجیکٹس آپ کو فنکشنل ری ایکٹ میں بہترین انٹری پوائنٹ فراہم کرتے ہیں اور 2020 میں یقینی طور پر آپ کی مدد کریں گے۔ آپ تلاش کر سکتے ہیں مثال کے طور پر پروجیکٹ یہاں. ہدایات پر عمل کریں یا اسے اپنا بنائیں۔

Vue کے ساتھ چیٹ ایپ

آپ کے لیے ایک اور زبردست پروجیکٹ میری پسندیدہ JavaScript لائبریری کا استعمال کرتے ہوئے ایک چیٹ ایپ بنانا ہے: VueJS۔ ایپلیکیشن کچھ اس طرح نظر آئے گی:

آپ کیا سیکھیں گے۔
اس ٹیوٹوریل میں، آپ سیکھیں گے کہ شروع سے Vue ایپ کیسے بنائی جاتی ہے - اجزاء بنانا، حالت کو ہینڈل کرنا، راستے بنانا، فریق ثالث کی خدمات سے جڑنا، اور یہاں تک کہ تصدیق کو ہینڈل کرنا۔

ٹیک اسٹیک اور خصوصیات

• قول
• ویویکس
• ویو راؤٹر
• Vue CLI
• پاؤڈر
• CSS

Vue کے ساتھ شروع کرنے یا 2020 میں ترقی حاصل کرنے کے لیے اپنی موجودہ صلاحیتوں کو بہتر بنانے کے لیے یہ واقعی ایک بہت اچھا پروجیکٹ ہے۔ آپ تلاش کر سکتے ہیں یہاں سبق.

کونیی 8 کے ساتھ موسم کی خوبصورت ایپ

یہ مثال آپ کو انگولر 8 کا استعمال کرتے ہوئے ایک خوبصورت موسمی ایپ بنانے میں مدد کرے گی۔

آپ کیا سیکھیں گے۔
یہ پروجیکٹ آپ کو شروع سے ایپلیکیشنز بنانے میں قابل قدر مہارتیں سکھائے گا - ڈیزائن سے لے کر ڈیولپمنٹ تک، تعیناتی کے لیے تیار ایپلیکیشن تک۔

ٹیک اسٹیک اور خصوصیات

• کونیی 8
• فائر بیس
• سرور سائیڈ رینڈرنگ
• گرڈ اور فلیکس باکس کے ساتھ سی ایس ایس
• موبائل دوستانہ اور موافقت
• ڈارک موڈ
• خوبصورت انٹرفیس

مجھے اس ہمہ جہت منصوبے کے بارے میں جو چیز واقعی پسند ہے وہ یہ ہے کہ آپ چیزوں کا تنہائی میں مطالعہ نہیں کرتے ہیں۔ اس کے بجائے، آپ ڈیزائن سے لے کر حتمی تعیناتی تک پورے ترقیاتی عمل کو سیکھتے ہیں۔

Svelte کا استعمال کرتے ہوئے ٹو ڈو ایپلیکیشن

Svelte اجزاء پر مبنی نقطہ نظر پر نئے بچے کی طرح ہے - کم از کم React، Vue اور Angular سے ملتا جلتا ہے۔ اور یہ 2020 کی سب سے مشہور نئی مصنوعات میں سے ایک ہے۔

ضروری نہیں کہ ٹو ڈو ایپس سب سے زیادہ گرم موضوع ہوں، لیکن یہ واقعی آپ کو اپنی Svelte مہارتوں کو بہتر بنانے میں مدد کرے گی۔ یہ اس طرح نظر آئے گا:

آپ کیا سیکھیں گے۔
یہ ٹیوٹوریل آپ کو دکھائے گا کہ شروع سے آخر تک Svelte 3 کا استعمال کرتے ہوئے ایک ایپلیکیشن کیسے بنائی جائے۔ آپ اجزاء، اسٹائلنگ اور ایونٹ ہینڈلرز استعمال کریں گے۔

ٹیک اسٹیک اور خصوصیات

• Svelte 3
• اجزاء
• سی ایس ایس کے ساتھ اسٹائلنگ
• ES 6 نحو

بہت سے اچھے Svelte سٹارٹر پروجیکٹس نہیں ہیں، تو میں نے پایا یہ شروع کرنے کے لئے ایک اچھا اختیار ہے.

Next.js کا استعمال کرتے ہوئے ای کامرس ایپ

Next.js ری ایکٹ ایپلی کیشنز بنانے کا سب سے مشہور فریم ورک ہے جو سرور سائیڈ رینڈرنگ کو باکس کے باہر سپورٹ کرتا ہے۔

یہ پروجیکٹ آپ کو دکھائے گا کہ ای کامرس ایپلی کیشن کیسے بنائی جائے جو اس طرح نظر آئے:

آپ کیا سیکھیں گے۔
اس پروجیکٹ میں، آپ Next.js کے ساتھ ترقی کرنے کا طریقہ سیکھیں گے—نئے صفحات اور اجزاء بنائیں، ڈیٹا نکالیں، اور اسٹائل کریں اور اگلی ایپلیکیشن تعینات کریں۔

ٹیک اسٹیک اور خصوصیات

• Next.js
• اجزاء اور صفحات
• ڈیٹا سیمپلنگ
• اسٹائلائزیشن
• پروجیکٹ کی تعیناتی۔
• SSR اور SPA

کچھ نیا سیکھنے کے لیے ای کامرس ایپ جیسی حقیقی دنیا کی مثال رکھنا ہمیشہ بہت اچھا ہوتا ہے۔ آپ کر سکتے ہیں۔ یہاں سبق تلاش کریں.

Nuxt.js کے ساتھ مکمل کثیر لسانی بلاگ

Nuxt.js Vue کے لیے ہے، React کے لیے Next.js کیا ہے: سرور سائیڈ رینڈرنگ اور سنگل پیج ایپلی کیشنز کی طاقت کو یکجا کرنے کے لیے ایک بہترین فریم ورک
آپ جو حتمی ایپلیکیشن بنا سکتے ہیں وہ اس طرح نظر آئے گی:

آپ کیا سیکھیں گے۔

اس نمونہ پروجیکٹ میں، آپ سیکھیں گے کہ Nuxt.js کا استعمال کرتے ہوئے ایک مکمل ویب سائٹ کیسے بنائی جاتی ہے، ابتدائی سیٹ اپ سے لے کر حتمی تعیناتی تک۔

یہ بہت ساری عمدہ خصوصیات سے فائدہ اٹھاتا ہے جو Nuxt کو پیش کرنا ہے، جیسے صفحات اور اجزاء، اور SCSS کے ساتھ اسٹائلنگ۔

ٹیک اسٹیک اور خصوصیات

• نکسٹ جے
• اجزاء اور صفحات
• اسٹوری بلاک ماڈیول
• ہیگ فش
• ریاستی انتظام کے لیے Vuex
• اسٹائل کے لیے SCSS
• Nuxt Middlewares

یہ واقعی ایک اچھا منصوبہ ہےجس میں Nuxt.js کی بہت سی بہترین خصوصیات شامل ہیں۔ مجھے ذاتی طور پر Nuxt کے ساتھ کام کرنا پسند ہے لہذا آپ کو اسے ضرور آزمانا چاہیے کیونکہ یہ آپ کو ایک بہترین Vue ڈویلپر بھی بنائے گا۔

گیٹسبی کے ساتھ بلاگ

Gatsby React اور GraphQL استعمال کرنے والا ایک بہترین جامد سائٹ جنریٹر ہے۔ یہ اس منصوبے کا نتیجہ ہے:

آپ کیا سیکھیں گے۔

اس ٹیوٹوریل میں، آپ ایک بلاگ بنانے کے لیے Gatsby کا استعمال سیکھیں گے جسے آپ React اور GraphQL کا استعمال کرتے ہوئے اپنے مضامین لکھنے کے لیے استعمال کریں گے۔

ٹیک اسٹیک اور خصوصیات

• Gatsby
• جواب دیں
• گراف کیو ایل
• پلگ انز اور تھیمز
• MDX/مارک ڈاؤن
• بوٹسٹریپ سی ایس ایس
• مراسلے

اگر آپ کبھی بھی بلاگ شروع کرنا چاہتے ہیں، یہ ایک عظیم مثال ہے React اور GraphQL کا استعمال کرتے ہوئے اسے کیسے بنایا جائے۔

میں یہ نہیں کہہ رہا ہوں کہ ورڈپریس ایک برا انتخاب ہے، لیکن Gatsby کے ساتھ آپ React کا استعمال کرتے ہوئے اعلیٰ کارکردگی والی ویب سائٹس بنا سکتے ہیں - جو کہ ایک حیرت انگیز امتزاج ہے۔

Gridsome کے ساتھ بلاگ

Vue کے لیے Gridsome... ٹھیک ہے، ہمارے پاس یہ Next/Nuxt کے ساتھ پہلے ہی موجود تھا۔
لیکن گرڈسم اور گیٹسبی کے لئے بھی ایسا ہی ہے۔ دونوں GraphQL کو اپنی ڈیٹا لیئر کے طور پر استعمال کرتے ہیں، لیکن Gridsome VueJS استعمال کرتا ہے۔ یہ ایک حیرت انگیز جامد سائٹ جنریٹر بھی ہے جو آپ کو زبردست بلاگ بنانے میں مدد کرے گا:

آپ کیا سیکھیں گے۔

یہ پروجیکٹ آپ کو سکھائے گا کہ Gridsome، GraphQL اور Markdown کے ساتھ شروع کرنے کے لیے ایک سادہ بلاگ کیسے بنایا جائے۔ اس میں یہ بھی بتایا گیا ہے کہ Netlify کے ذریعے ایپلیکیشن کو کیسے تعینات کیا جائے۔

ٹیک اسٹیک اور خصوصیات

• گرڈسم
• قول
• گراف کیو ایل
• Markdown
• نیٹلائف

یہ یقینی طور پر سب سے زیادہ جامع ٹیوٹوریل نہیں ہے، لیکن یہ گرڈسم کے بنیادی تصورات کا احاطہ کرتا ہے اور مارک ڈاؤن ایک اچھا نقطہ آغاز ہوسکتا ہے۔.

ساؤنڈ کلاؤڈ جیسا آڈیو پلیئر Quasar استعمال کرتا ہے۔

Quasar ایک اور Vue فریم ورک ہے جسے موبائل ایپلی کیشنز بنانے کے لیے استعمال کیا جا سکتا ہے۔ اس پروجیکٹ میں آپ ایک آڈیو پلیئر ایپلی کیشن بنائیں گے، مثال کے طور پر:

آپ کیا سیکھیں گے۔

جبکہ دیگر پروجیکٹس بنیادی طور پر ویب ایپلیکیشنز پر فوکس کرتے ہیں، یہ آپ کو دکھائے گا کہ Vue اور Quasar فریم ورک کا استعمال کرتے ہوئے موبائل ایپلیکیشن کیسے بنائی جاتی ہے۔
آپ کے پاس پہلے سے ہی کورڈووا اینڈرائیڈ اسٹوڈیو/ ایکس کوڈ کنفیگرڈ کے ساتھ چل رہا ہونا چاہیے۔ اگر نہیں۔

ٹیک اسٹیک اور خصوصیات

• کوثر
• قول
• کورڈووا
• ویو سرفر
• UI اجزاء

چھوٹا پروجیکٹ، موبائل ایپلیکیشنز بنانے کے لیے Quasar کی صلاحیتوں کا مظاہرہ کرنا۔

کریڈٹ کارڈ فارم

ہموار اور خوشگوار مائیکرو تعاملات کے ساتھ ایک ٹھنڈی کریڈٹ کارڈ کی شکل۔ نمبر فارمیٹنگ، تصدیق اور خودکار کارڈ کی قسم کا پتہ لگانا شامل ہے۔ یہ Vue.js پر بنایا گیا ہے اور یہ مکمل طور پر ذمہ دار بھی ہے۔ (آپ دیکھ سکتے ہیں یہاں.)

کریڈٹ کارڈ فارم

آپ کیا سیکھیں گے:

• فارم پر کارروائی اور تصدیق کریں۔
• واقعات کو ہینڈل کریں (مثال کے طور پر، جب فیلڈز تبدیل ہوں)
• صفحہ پر عناصر کو ظاہر کرنے اور رکھنے کا طریقہ سمجھیں، خاص طور پر کریڈٹ کارڈ کی معلومات جو فارم کے اوپر ظاہر ہوتی ہے۔

بار گراف

ہسٹوگرام ایک چارٹ یا گراف ہے جو مستطیل سلاخوں کے ساتھ مخصوص ڈیٹا کی نمائندگی کرتا ہے جس کی اونچائی یا لمبائی ان اقدار کے متناسب ہوتی ہے۔

وہ عمودی یا افقی طور پر لاگو کیا جا سکتا ہے. عمودی بار چارٹ کو بعض اوقات لائن چارٹ کہا جاتا ہے۔

آپ کیا سیکھیں گے:

• ڈیٹا کو منظم اور قابل فہم طریقے سے ڈسپلے کریں۔
• اضافی طور پر: عنصر کو استعمال کرنے کا طریقہ سیکھیں۔ canvas اور اس کے ساتھ عناصر کو کیسے کھینچنا ہے۔

یہاں آپ دنیا کی آبادی کا ڈیٹا تلاش کر سکتے ہیں۔ انہیں سال کے لحاظ سے ترتیب دیا گیا ہے۔

ٹویٹر ہارٹ اینیمیشن

2016 میں، ٹویٹر نے اپنی ٹویٹس کے لیے یہ حیرت انگیز اینیمیشن متعارف کرایا۔ 2019 تک، یہ اب بھی حصہ نظر آتا ہے، تو کیوں نہ خود ایک تخلیق کریں؟

آپ کیا سیکھیں گے:

• CSS وصف کے ساتھ کام کریں۔ keyframes
• HTML عناصر کو جوڑ توڑ اور متحرک کریں۔
• جاوا اسکرپٹ، ایچ ٹی ایم ایل اور سی ایس ایس کو یکجا کریں۔

تلاش کے قابل GitHub ذخیرے

یہاں کچھ بھی پسند نہیں ہے — GitHub repos صرف ایک شاندار فہرست ہیں۔
مقصد ذخیروں کو ظاہر کرنا اور صارف کو انہیں فلٹر کرنے کی اجازت دینا ہے۔ استعمال کریں۔ سرکاری GitHub API ہر صارف کے لیے ذخیرہ حاصل کرنے کے لیے۔

GitHub پروفائل صفحہ - github.com/indreklasn

آپ کیا سیکھیں گے:

• API سے ڈیٹا وصول کریں۔
• API سے ڈیٹا ڈسپلے کریں۔
• ہر تلاش کے لیے متعلقہ ڈیٹا کو فلٹر اور دکھائیں۔
• اختیاری: اگر آپ کسی چیلنج کے لیے تیار ہیں تو استعمال کریں۔ API v4۔، گراف کیو ایل کا استعمال کرتے ہوئے بنایا گیا۔ اگر آپ GraphQL سیکھنا چاہتے ہیں تو میرے پچھلے مضامین میں سے ایک پر جائیں۔.

Reddit طرز کی چیٹس

بات چیت ان کی سادگی اور استعمال میں آسانی کی وجہ سے مواصلات کا ایک مقبول طریقہ ہے۔ لیکن کیا واقعی جدید چیٹ رومز کو ایندھن دیتا ہے؟ ویب ساکٹس!

آپ کیا سیکھیں گے:

• WebSockets، ریئل ٹائم کمیونیکیشن اور ڈیٹا اپ ڈیٹس کا استعمال کریں۔
• صارف کی رسائی کی سطحوں کے ساتھ کام کریں (مثال کے طور پر، چیٹ چینل کے مالک کا کردار ہے۔ admin، اور کمرے میں موجود دیگر - user)
• فارم پر کارروائی اور تصدیق کریں - یاد رکھیں، پیغام بھیجنے کے لیے چیٹ ونڈو ہے۔ input
• مختلف چیٹس بنائیں اور ان میں شامل ہوں۔
• ذاتی پیغامات کے ساتھ کام کریں۔ صارفین دوسرے صارفین کے ساتھ نجی طور پر چیٹ کر سکتے ہیں۔ بنیادی طور پر، آپ دو صارفین کے درمیان ایک WebSocket کنکشن قائم کر رہے ہوں گے۔

پٹی سٹائل نیویگیشن

جو چیز اس نیویگیشن کو منفرد بناتی ہے وہ یہ ہے کہ پاپ اوور کنٹینر مواد میں فٹ ہونے کے لیے تبدیل ہو جاتا ہے۔ ایک نئے پاپ اوور کو کھولنے اور بند کرنے کے روایتی طرز عمل کے مقابلے اس منتقلی میں ایک خوبصورتی ہے۔

آپ کیا سیکھیں گے:

• ٹرانزیشن کے ساتھ CSS اینیمیشن کو یکجا کریں۔
• مواد کو مدھم کریں اور فلوٹ شدہ عنصر پر ایکٹیو کلاس لگائیں۔

Pacman

Pacman کا اپنا ورژن بنائیں۔ گیمز کو کیسے تیار کیا جاتا ہے اور بنیادی باتوں کو سمجھنے کا یہ ایک بہترین طریقہ ہے۔ جاوا اسکرپٹ کا فریم ورک استعمال کریں، React یا Vue۔

آپ سیکھیں گے:

• عناصر کیسے حرکت کرتے ہیں۔
• اس بات کا تعین کیسے کریں کہ کون سی کیز کو دبانا ہے۔
• تصادم کے لمحے کا تعین کیسے کریں۔
• آپ مزید جا سکتے ہیں اور ماضی کی نقل و حرکت کا کنٹرول شامل کر سکتے ہیں۔

آپ کو اس منصوبے کی مثال مل جائے گی۔ ذخیرہ میں GitHub کے

صارفی انتظام

پروجیکٹ ذخیرہ میں GitHub کے

صارف انتظامیہ کے لیے ایک CRUD قسم کی ایپلیکیشن بنانا آپ کو ترقی کی بنیادی باتیں سکھائے گا۔ یہ خاص طور پر نئے ڈویلپرز کے لیے مفید ہے۔

آپ سیکھیں گے:

• روٹنگ کیا ہے
• ڈیٹا انٹری فارم کو کیسے ہینڈل کریں اور چیک کریں کہ صارف نے کیا درج کیا ہے۔
• ڈیٹا بیس کے ساتھ کام کرنے کا طریقہ - اعمال بنائیں، پڑھیں، اپ ڈیٹ کریں اور حذف کریں۔

اپنے مقام پر موسم کی جانچ کر رہا ہے۔

پروجیکٹ ذخیرہ میں GitHub کے

اگر آپ ایپس بنانا چاہتے ہیں تو موسم ایپ سے شروع کریں۔ یہ پروجیکٹ سوئفٹ کے ذریعے مکمل کیا جا سکتا ہے۔

ایپلیکیشن بنانے کا تجربہ حاصل کرنے کے علاوہ، آپ یہ سیکھیں گے:

• API کے ساتھ کیسے کام کریں۔
• جغرافیائی محل وقوع کا استعمال کیسے کریں۔
• ٹیکسٹ ان پٹ شامل کرکے اپنی ایپلیکیشن کو مزید متحرک بنائیں۔ اس میں صارفین مخصوص مقام پر موسم کی جانچ کے لیے اپنی لوکیشن درج کر سکیں گے۔

آپ کو ایک API کی ضرورت ہوگی۔ موسم کا ڈیٹا حاصل کرنے کے لیے، OpenWeather API استعمال کریں۔ OpenWeather API کے بارے میں مزید معلومات یہاں.

چیٹ ونڈو

میری چیٹ ونڈو ایکشن میں ہے، دو براؤزر ٹیبز میں کھلی ہے۔

چیٹ ونڈو بنانا ساکٹ کے ساتھ شروع کرنے کا بہترین طریقہ ہے۔ ٹیک اسٹیک کا انتخاب بہت بڑا ہے۔ مثال کے طور پر، Node.js کامل ہے۔

آپ سیکھیں گے کہ ساکٹ کیسے کام کرتے ہیں اور انہیں کیسے نافذ کیا جاتا ہے۔ یہ اس منصوبے کا بنیادی فائدہ ہے.

اگر آپ Laravel ڈویلپر ہیں جو ساکٹ کے ساتھ کام کرنا چاہتے ہیں تو میرا پڑھیں مضمون

گٹ لیب سی آئی

ماخذ

اگر آپ مسلسل انضمام (CI) کے لیے نئے ہیں، تو GitLab CI کے ساتھ کھیلیں۔ کچھ ماحول مرتب کریں اور کچھ ٹیسٹ چلانے کی کوشش کریں۔ یہ کوئی بہت مشکل پروجیکٹ نہیں ہے، لیکن مجھے یقین ہے کہ آپ اس سے بہت کچھ سیکھیں گے۔ بہت سی ترقیاتی ٹیمیں اب CI استعمال کر رہی ہیں۔ اسے استعمال کرنے کا طریقہ جاننا مفید ہے۔

آپ سیکھیں گے:

• GitLab CI کیا ہے؟
• ترتیب دینے کا طریقہ .gitlab-ci.ymlجو GitLab صارف کو بتاتا ہے کہ کیا کرنا ہے۔
• دوسرے ماحول میں کیسے تعینات کیا جائے۔

ویب سائٹ تجزیہ کار

ایک سکریپر بنائیں جو ویب سائٹس کے سیمنٹکس کا تجزیہ کرے اور ان کی ریٹنگ بنائے۔ مثال کے طور پر، آپ امیجز میں کھوئے ہوئے Alt ٹیگز کی جانچ کر سکتے ہیں۔ یا چیک کریں کہ آیا صفحہ میں SEO میٹا ٹیگز ہیں۔ یوزر انٹرفیس کے بغیر کھرچنی بنائی جا سکتی ہے۔

آپ سیکھیں گے:

• سکریپر کیسے کام کرتا ہے؟
• DOM سلیکٹرز کیسے بنائیں
• الگورتھم کیسے لکھیں۔
• اگر آپ وہاں رکنا نہیں چاہتے تو ایک صارف انٹرفیس بنائیں۔ آپ ہر ویب سائٹ پر ایک رپورٹ بھی بنا سکتے ہیں جسے آپ چیک کرتے ہیں۔

سوشل نیٹ ورکس پر جذبات کا پتہ لگانا

ماخذ

سوشل میڈیا پر جذبات کا پتہ لگانا مشین لرننگ سے متعارف کرانے کا ایک بہترین طریقہ ہے۔

آپ صرف ایک سوشل نیٹ ورک کا تجزیہ کر کے شروع کر سکتے ہیں۔ ہر کوئی عام طور پر ٹویٹر سے شروع ہوتا ہے۔

اگر آپ کو پہلے سے ہی مشین لرننگ کا تجربہ ہے تو مختلف سوشل نیٹ ورکس سے ڈیٹا اکٹھا کرنے اور انہیں یکجا کرنے کی کوشش کریں۔

آپ سیکھیں گے:

• مشین لرننگ کیا ہے؟

ٹریلو کلون

Indrek Lasn سے Trello کلون.

آپ کیا سیکھیں گے:

• درخواست پر کارروائی کرنے والے راستوں کی تنظیم (روٹنگ)۔
• ڈریگ اور ڈراپ.
• نئی اشیاء (بورڈز، فہرستیں، کارڈ) کیسے بنائیں۔
• ان پٹ ڈیٹا پر کارروائی اور جانچ کرنا۔
• کلائنٹ کی طرف سے: لوکل اسٹوریج کا استعمال کیسے کریں، لوکل اسٹوریج میں ڈیٹا کیسے محفوظ کریں، لوکل اسٹوریج سے ڈیٹا کیسے پڑھیں۔
• سرور کی طرف سے: ڈیٹا بیس کا استعمال کیسے کریں، ڈیٹا بیس میں ڈیٹا کیسے محفوظ کریں، ڈیٹا بیس سے ڈیٹا کیسے پڑھیں۔

یہاں ایک ذخیرہ کی ایک مثال ہے۔، React+Redux میں بنایا گیا ہے۔

ایڈمن پینل

گیتھب ریپوزٹری۔

ایک سادہ سی آر یو ڈی ایپلی کیشن، بنیادی باتیں سیکھنے کے لیے مثالی۔ آئیے سیکھتے ہیں:

• صارفین بنائیں، صارفین کا نظم کریں۔
• ڈیٹا بیس کے ساتھ تعامل کریں - صارفین بنائیں، پڑھیں، ترمیم کریں، حذف کریں۔
• ان پٹ کی توثیق کرنا اور فارم کے ساتھ کام کرنا۔

کریپٹو کرنسی ٹریکر (مقامی موبائل ایپ)

گیتھب ذخیرہ۔

کچھ بھی: Swift, Objective-C, React Native, Java, Kotlin.

چلو پڑھیں:

• مقامی ایپلیکیشنز کیسے کام کرتی ہیں۔
• API سے ڈیٹا بازیافت کرنے کا طریقہ۔
• مقامی صفحہ لے آؤٹ کیسے کام کرتے ہیں۔
• موبائل سمیلیٹر کے ساتھ کیسے کام کریں۔

اس API کو آزمائیں۔. اگر آپ کو کچھ بہتر لگتا ہے تو، تبصرے میں لکھیں.

اگر آپ دلچسپی رکھتے ہیں تو یہ یہاں ہے۔ یہاں ایک سبق ہے.

شروع سے اپنا ویب پیک ترتیب ترتیب دیں۔

تکنیکی طور پر، یہ کوئی ایپلی کیشن نہیں ہے، لیکن یہ سمجھنے کے لیے بہت مفید کام ہے کہ ویب پیک اندر سے کیسے کام کرتا ہے۔ اب یہ ’’بلیک باکس‘‘ نہیں بلکہ ایک قابل فہم ٹول ہوگا۔

کے تقاضے:

• es7 سے es5 (بنیادی باتیں) مرتب کریں۔
• jsx کو js میں مرتب کریں - یا - .vue to .js (آپ کو لوڈرز سیکھنا ہوں گے)
• ویب پیک ڈیو سرور اور ہاٹ ماڈیول ری لوڈنگ سیٹ اپ کریں۔ (vue-cli اور create-react-app دونوں استعمال کرتے ہیں)
• Heroku، now.sh یا Github استعمال کریں، سیکھیں کہ ویب پیک پروجیکٹس کو کیسے تعینات کیا جائے۔
• سی ایس ایس - ایس سی ایس ایس، کم، اسٹائلس کو مرتب کرنے کے لیے اپنا پسندیدہ پری پروسیسر ترتیب دیں۔
• ویب پیک کے ساتھ تصاویر اور svgs استعمال کرنے کا طریقہ سیکھیں۔

یہ مکمل beginners کے لیے ایک حیرت انگیز وسیلہ ہے۔

ہیکر نیوز کلون

ہر جیدی کو اپنی ہیکر نیوز بنانے کی ضرورت ہے۔

راستے میں آپ کیا سیکھیں گے:

• hackernews API کے ساتھ تعامل کیسے کریں۔
• سنگل پیج ایپلیکیشن کیسے بنائیں۔
• تبصرے، انفرادی تبصرے، پروفائلز دیکھنے جیسی خصوصیات کو کیسے نافذ کیا جائے۔
• درخواست پر کارروائی کرنے والے راستوں کی تنظیم (روٹنگ)۔

تودوشیچکا

ٹوڈو ایم وی سی۔

سنجیدگی سے؟ تودوشکا؟ ان میں سے ہزاروں ہیں۔ لیکن یقین کریں اس مقبولیت کی ایک وجہ بھی ہے۔
Tudu ایپ یہ یقینی بنانے کا ایک بہترین طریقہ ہے کہ آپ بنیادی باتوں کو سمجھتے ہیں۔ ایک ایپلیکیشن ونیلا جاوا اسکرپٹ میں اور ایک اپنے پسندیدہ فریم ورک میں لکھنے کی کوشش کریں۔

جانیں:

• نئے کام بنائیں۔
• چیک کریں کہ فیلڈز بھرے ہوئے ہیں۔
• فلٹر ٹاسک (مکمل، فعال، تمام)۔ استعمال کریں۔ filter и reduce.
• جاوا اسکرپٹ کی بنیادی باتوں کو سمجھیں۔

ترتیب دینے کے قابل ڈریگ اینڈ ڈراپ لسٹ

گیتھب ذخیرہ۔

سمجھنے میں بہت مددگار ڈریگ اینڈ ڈراپ API.

آئیے سیکھتے ہیں:

• API کو گھسیٹیں اور چھوڑیں۔
• بھرپور UIs بنائیں

میسنجر کلون (مقامی ایپ)

آپ سمجھ جائیں گے کہ ویب ایپلیکیشنز اور مقامی ایپلیکیشنز دونوں کیسے کام کرتی ہیں، جو آپ کو گرے ماس سے الگ کر دے گی۔

ہم کیا مطالعہ کریں گے:

• ویب ساکٹ (فوری پیغامات)
• مقامی ایپلیکیشنز کیسے کام کرتی ہیں۔
• مقامی ایپلی کیشنز میں ٹیمپلیٹس کیسے کام کرتے ہیں۔
• مقامی ایپلی کیشنز میں درخواست کی کارروائی کے راستوں کو منظم کرنا۔

متن ایڈیٹر۔

ٹیکسٹ ایڈیٹر کا مقصد اپنے فارمیٹنگ کو درست HTML مارک اپ میں تبدیل کرنے کی کوشش کرنے والے صارفین کی کوششوں کو کم کرنا ہے۔ ایک اچھا ٹیکسٹ ایڈیٹر صارفین کو متن کو مختلف طریقوں سے فارمیٹ کرنے کی اجازت دیتا ہے۔

کسی وقت، ہر ایک نے ٹیکسٹ ایڈیٹر استعمال کیا ہے۔ تو کیوں نہیں؟ اسے خود بنائیں?

ریڈڈیٹ کلون

اٹ ایک سماجی خبروں کا مجموعہ، ویب مواد کی درجہ بندی اور بحث کی سائٹ ہے۔

Reddit میرا زیادہ تر وقت لیتا ہے، لیکن میں اس پر ہینگ آؤٹ کرتا رہتا ہوں۔ Reddit کلون بنانا پروگرامنگ سیکھنے کا ایک مؤثر طریقہ ہے (ایک ہی وقت میں Reddit کو براؤز کرتے ہوئے)۔

Reddit آپ کو بہت امیر فراہم کرتا ہے۔ API. کسی بھی خصوصیت کو مت چھوڑیں یا بے ترتیبی سے کام نہ کریں۔ گاہکوں اور گاہکوں کے ساتھ حقیقی دنیا میں، آپ بے ترتیبی سے کام نہیں کر سکتے، یا آپ جلدی سے اپنی ملازمت سے ہاتھ دھو بیٹھیں گے۔

سمارٹ کلائنٹس کو فوری طور پر احساس ہو جائے گا کہ کام خراب ہو رہا ہے اور وہ کسی اور کو تلاش کر لیں گے۔

Reddit API

ایک اوپن سورس NPM پیکج شائع کرنا

اگر آپ Javascript کوڈ لکھتے ہیں، تو امکان ہے کہ آپ پیکیج مینیجر استعمال کریں۔ ایک پیکیج مینیجر آپ کو موجودہ کوڈ کو دوبارہ استعمال کرنے کی اجازت دیتا ہے جسے دوسرے لوگوں نے لکھا اور شائع کیا ہے۔

پیکج کے مکمل ڈیولپمنٹ سائیکل کو سمجھنا ایک بہت اچھا تجربہ فراہم کرے گا۔ کوڈ شائع کرتے وقت آپ کو بہت سی چیزیں جاننے کی ضرورت ہے۔ آپ کو سیکیورٹی، سیمنٹک ورژننگ، اسکیل ایبلٹی، نام دینے کے کنونشنز اور دیکھ بھال کے بارے میں سوچنے کی ضرورت ہے۔

پیکج کچھ بھی ہو سکتا ہے۔ اگر آپ کے پاس کوئی آئیڈیا نہیں ہے تو اپنا لوڈاش بنائیں اور اسے شائع کریں۔

لوڈش: lodash.com

آپ نے آن لائن کچھ کیا ہے جو آپ کو دوسروں سے 10% اوپر رکھتا ہے۔ یہاں کچھ مفید وسائل ہیں۔ کھلے ذرائع اور پیکجوں کے بارے میں۔

مفت کوڈ کیمپ کا نصاب

ایف سی سی نصاب

freeCodecamp نے بہت کچھ جمع کیا ہے۔ جامع پروگرامنگ کورس.

freeCodeCamp ایک غیر منافع بخش تنظیم ہے۔ یہ ایک انٹرایکٹو ویب پر مبنی لرننگ پلیٹ فارم، ایک آن لائن کمیونٹی فورم، چیٹ رومز، میڈیم پبلیکیشنز، اور مقامی تنظیموں پر مشتمل ہے جو ویب ڈویلپمنٹ سیکھنے کو ہر کسی کے لیے قابل رسائی بنانا چاہتے ہیں۔

اگر آپ پورا کورس مکمل کرنے کا انتظام کرتے ہیں تو آپ اپنی پہلی ملازمت کے لیے زیادہ اہل ہوں گے۔

شروع سے ایک HTTP سرور بنائیں

HTTP پروٹوکول ان اہم پروٹوکولز میں سے ایک ہے جس کے ذریعے مواد انٹرنیٹ پر سفر کرتا ہے۔ ایچ ٹی ٹی پی سرورز کو جامد مواد پیش کرنے کے لیے استعمال کیا جاتا ہے جیسے کہ HTML، CSS اور JS۔

شروع سے HTTP پروٹوکول کو لاگو کرنے کے قابل ہونے سے آپ کے علم میں اضافہ ہوگا کہ چیزیں کیسے آپس میں ملتی ہیں۔

مثال کے طور پر، اگر آپ NodeJs استعمال کرتے ہیں، تو آپ جانتے ہیں کہ ایکسپریس ایک HTTP سرور فراہم کرتا ہے۔

حوالہ کے لیے، دیکھیں کہ کیا آپ کر سکتے ہیں:

• کسی بھی لائبریری کو استعمال کیے بغیر سرور ترتیب دیں۔
• سرور کو HTML، CSS اور JS مواد پیش کرنا چاہیے۔
• شروع سے روٹر کو لاگو کرنا
• تبدیلیوں کی نگرانی کریں اور سرور کو اپ ڈیٹ کریں۔

اگر آپ نہیں جانتے کہ کیوں، استعمال کریں۔ چلو اور HTTP سرور بنانے کی کوشش کریں۔ چایدان شروع سے.

نوٹ کے لیے ڈیسک ٹاپ ایپ

ہم سب نوٹ لیتے ہیں، کیا ہم نہیں؟

آئیے ایک نوٹ ایپ بنائیں۔ ایپلیکیشن کو نوٹوں کو محفوظ کرنے اور انہیں ڈیٹا بیس کے ساتھ ہم آہنگ کرنے کی ضرورت ہے۔ الیکٹران، سوئفٹ، یا جو بھی آپ کو پسند ہے اور جو آپ کے سسٹم کے لیے کام کرتا ہے اسے استعمال کرکے ایک مقامی ایپ بنائیں۔

اسے پہلے چیلنج (ٹیکسٹ ایڈیٹر) کے ساتھ بلا جھجھک جوڑ دیں۔

بونس کے طور پر، اپنے ڈیسک ٹاپ ورژن کو ویب ورژن کے ساتھ ہم آہنگ کرنے کی کوشش کریں۔

پوڈکاسٹس (اوورکاسٹ کلون)

پوڈ کاسٹ کون نہیں سنتا؟

درج ذیل فعالیت کے ساتھ ایک ویب ایپلیکیشن بنائیں:

• کھاتا کھولیں
• پوڈکاسٹ تلاش کریں۔
• پوڈ کاسٹ کی درجہ بندی کریں اور سبسکرائب کریں۔
• 30 سیکنڈ کے لیے رکیں اور چلائیں، رفتار تبدیل کریں، آگے اور پیچھے کی طرف افعال کریں۔

آئی ٹیونز API کو نقطہ آغاز کے طور پر استعمال کرنے کی کوشش کریں۔ اگر آپ کسی دوسرے وسائل کے بارے میں جانتے ہیں، تو براہ کرم تبصرے میں پوسٹ کریں.

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

سکرین کی تصویر لو

ہیلو! میں ابھی اپنی اسکرین فلم کر رہا ہوں!

ایک ڈیسک ٹاپ یا ویب ایپ بنائیں جو آپ کو اپنی اسکرین کیپچر کرنے اور کلپ کو بطور محفوظ کرنے کی اجازت دیتا ہے۔ .gif

یہاں کچھ تجاویزیہ کیسے حاصل کرنا ہے.

ذرائع

• ڈویلپر کے لیے 5 مزید بہادر تربیتی منصوبے (پرت، اسکوش، کیلکولیٹر، ویب سائٹ کرالر، میوزک پلیئر)
• آپ کی فرنٹ اینڈ کی مہارت کو بہتر بنانے کے لیے 9 پروجیکٹس
• فرنٹ اینڈ ڈویلپر کے لیے چھ کام
• ایک ڈویلپر کے لئے تفریحی مشق
• 8 تعلیمی منصوبے
• پریکٹس کرنے کے لیے منصوبوں کی ایک اور فہرست

ماخذ: www.habr.com