9টি আরও প্রজেক্ট আপনার ফ্রন্ট-এন্ড দক্ষতাকে তীক্ষ্ণ করার জন্য

ভূমিকা

আপনি প্রোগ্রামিংয়ে নতুন বা ইতিমধ্যে একজন অভিজ্ঞ ডেভেলপার হোন না কেন, এই শিল্পে, নতুন ধারণা এবং ভাষা/ফ্রেমওয়ার্ক শেখার প্রবণতা বজায় রাখা আবশ্যক।

উদাহরণ স্বরূপ, React ধরুন, যেটি মাত্র চার বছর আগে Facebook দ্বারা উন্মুক্ত ছিল এবং ইতিমধ্যেই সারা বিশ্বের জাভাস্ক্রিপ্ট ডেভেলপারদের জন্য এক নম্বর পছন্দ হয়ে উঠেছে।

Vue এবং Angular, অবশ্যই, তাদের বৈধ ফ্যান বেস আছে। এবং তারপর আছে Svelte এবং অন্যান্য সাধারণ উদ্দেশ্য ফ্রেমওয়ার্ক যেমন Next.js বা Nuxt.js। এবং গ্যাটসবি, এবং গ্রিডসাম, এবং কোয়াসার ... এবং আরও অনেক কিছু।

আপনি যদি নিজেকে একজন অভিজ্ঞ জাভাস্ক্রিপ্ট ডেভেলপার হিসেবে প্রমাণ করতে চান, তাহলে আপনার অবশ্যই বিভিন্ন ফ্রেমওয়ার্ক এবং লাইব্রেরির সাথে অন্তত কিছু অভিজ্ঞতা থাকতে হবে - ভাল পুরানো JS কাজ করার পাশাপাশি।

2020 সালে আপনাকে ফ্রন্ট-এন্ড মাস্টার হতে সাহায্য করার জন্য, আমি নয়টি ভিন্ন প্রজেক্ট একসাথে রেখেছি, প্রতিটিতে বিভিন্ন জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক এবং লাইব্রেরির উপর ফোকাস করা একটি প্রযুক্তিগত স্ট্যাক হিসাবে যা আপনি তৈরি করতে এবং আপনার পোর্টফোলিওতে যোগ করতে পারেন। মনে রাখবেন যে জিনিসগুলিকে অনুশীলন করা ছাড়া আর কিছুই আপনাকে সাহায্য করে না, তাই এগিয়ে যান, আপনার মন চালু করুন এবং এটি সম্ভব করুন।

নিবন্ধটি EDISON সফ্টওয়্যারের সহায়তায় অনুবাদ করা হয়েছিল, যা মাল্টি-ব্র্যান্ড স্টোরের জন্য ভার্চুয়াল ফিটিং রুম তৈরি করেএবং সফ্টওয়্যার পরীক্ষা করে.

প্রতিক্রিয়া সহ মুভি অনুসন্ধান অ্যাপ্লিকেশন (হুক সহ)

আপনি প্রথম যে জিনিসটি দিয়ে শুরু করতে পারেন তা হল প্রতিক্রিয়া সহ একটি চলচ্চিত্র অনুসন্ধান অ্যাপ তৈরি করা। চূড়ান্ত অ্যাপটি কেমন হবে তার একটি চিত্র নীচে দেওয়া হল:

আপনি কি শিখবেন
এই অ্যাপ্লিকেশনটি তৈরি করে, আপনি তুলনামূলকভাবে নতুন হুক্স API ব্যবহার করে আপনার প্রতিক্রিয়া দক্ষতা উন্নত করবেন। নমুনা প্রকল্পটি প্রতিক্রিয়া উপাদান, প্রচুর হুক, একটি বাহ্যিক API এবং অবশ্যই কিছু CSS স্টাইলিং ব্যবহার করে।

টেক স্ট্যাক এবং বৈশিষ্ট্য

• হুক দিয়ে প্রতিক্রিয়া
• তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন
• JSX
• সিএসএস

কোনও ক্লাস ব্যবহার না করেই, এই প্রকল্পগুলি আপনাকে কার্যকরী প্রতিক্রিয়াতে নিখুঁত এন্ট্রি পয়েন্ট দেয় এবং 2020 সালে অবশ্যই আপনাকে সাহায্য করবে। তুমি খুজেঁ পাবে নমুনা প্রকল্প এখানে. নির্দেশাবলী অনুসরণ করুন বা এটি আপনার নিজের করুন.

Vue এর সাথে চ্যাট অ্যাপ

আপনার জন্য আরেকটি দুর্দান্ত প্রকল্প হল আমার প্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে একটি চ্যাট অ্যাপ তৈরি করা: VueJS। অ্যাপ্লিকেশনটি এরকম কিছু দেখাবে:

আপনি কি শিখবেন
এই টিউটোরিয়ালে, আপনি শিখবেন কীভাবে স্ক্র্যাচ থেকে একটি Vue অ্যাপ তৈরি করতে হয় - উপাদানগুলি তৈরি করুন, রাজ্যগুলি পরিচালনা করুন, রুট তৈরি করুন, তৃতীয় পক্ষের পরিষেবাগুলির সাথে সংযোগ করুন এবং এমনকি প্রমাণীকরণ পরিচালনা করুন৷

টেক স্ট্যাক এবং বৈশিষ্ট্য

• দৃশ্য
• ভেক্স
• ভিউ রাউটার
• ভ্যু সিএলআই
• বিমানপোত
• সিএসএস

এটি Vue এর সাথে শুরু করার জন্য বা 2020 সালে বিকাশে যাওয়ার জন্য আপনার বিদ্যমান দক্ষতা উন্নত করার জন্য সত্যিই একটি দুর্দান্ত প্রকল্প। তুমি খুজেঁ পাবে এখানে টিউটোরিয়াল.

Angular 8 সহ সুন্দর আবহাওয়া অ্যাপ

এই উদাহরণটি আপনাকে Angular 8 ব্যবহার করে একটি সুন্দর আবহাওয়া অ্যাপ তৈরি করতে সাহায্য করবে:

আপনি কি শিখবেন
এই প্রকল্পটি আপনাকে স্ক্র্যাচ থেকে অ্যাপ্লিকেশন তৈরিতে মূল্যবান দক্ষতা শেখাবে - ডিজাইন থেকে ডেভেলপমেন্ট, একটি রেডি-টু-ডিপ্লোয় অ্যাপ্লিকেশন পর্যন্ত।

টেক স্ট্যাক এবং বৈশিষ্ট্য

• কৌণিক এক্সএনইউএমএক্স
• Firebase
• সার্ভার সাইড রেন্ডারিং
• গ্রিড এবং ফ্লেক্সবক্স সহ CSS
• মোবাইল বন্ধুত্বপূর্ণ এবং অভিযোজনযোগ্যতা
• Режимый режим
• সুন্দর ইন্টারফেস

এই ব্যাপক প্রকল্প সম্পর্কে আমি সত্যিই যা পছন্দ করি তা হল আপনি বিচ্ছিন্নভাবে জিনিসগুলি অধ্যয়ন করবেন না। পরিবর্তে, আপনি ডিজাইন থেকে চূড়ান্ত স্থাপনা পর্যন্ত সম্পূর্ণ বিকাশ প্রক্রিয়া শিখুন।

Svelte-এর সাথে টু-ডু অ্যাপ

Svelte হল কম্পোনেন্ট পদ্ধতিতে নতুন বাচ্চার মত - অন্তত React, Vue এবং Angular এর মত। এবং এটি 2020 এর জন্য সবচেয়ে জনপ্রিয় নতুন পণ্যগুলির মধ্যে একটি।

টু-ডু অ্যাপগুলি অগত্যা সবচেয়ে আলোচিত বিষয় নয়, তবে সেগুলি আপনাকে আপনার স্ভেল্ট দক্ষতা বাড়াতে সাহায্য করবে। এটি এই মত দেখাবে:

আপনি কি শিখবেন
এই টিউটোরিয়ালটি আপনাকে দেখাবে কিভাবে Svelte 3 ব্যবহার করে একটি অ্যাপ্লিকেশন তৈরি করতে হয়, শুরু থেকে শেষ পর্যন্ত। আপনি উপাদান, স্টাইলিং এবং ইভেন্ট হ্যান্ডলার ব্যবহার করবেন

টেক স্ট্যাক এবং বৈশিষ্ট্য

• স্ভেল্ট 3
• উপাদান
• CSS দিয়ে স্টাইল করা
• সিনট্যাক্স ES6

অনেক ভাল Svelte স্টার্টার প্রকল্প নেই, তাই আমি খুঁজে পেয়েছি এই শুরু করার একটি ভাল জায়গা.

Next.js সহ ইকমার্স অ্যাপ

Next.js হল রিঅ্যাক্ট অ্যাপ তৈরির জন্য সবচেয়ে জনপ্রিয় ফ্রেমওয়ার্ক যা সার্ভার-সাইড রেন্ডারিংকে বক্সের বাইরে সমর্থন করে।

এই প্রকল্পটি আপনাকে দেখাবে কিভাবে একটি ই-কমার্স অ্যাপ্লিকেশন তৈরি করতে হয় যা দেখতে এইরকম:

আপনি কি শিখবেন
এই প্রকল্পে, আপনি Next.js-এর সাহায্যে কীভাবে বিকাশ করবেন তা শিখবেন—নতুন পৃষ্ঠা এবং উপাদান তৈরি করুন, ডেটা পুনরুদ্ধার করুন এবং স্টাইল করুন এবং একটি পরবর্তী অ্যাপ্লিকেশন স্থাপন করুন।

টেক স্ট্যাক এবং বৈশিষ্ট্য

• পরবর্তী.js
• উপাদান এবং পৃষ্ঠা
• ডেটা স্যাম্পলিং
• stylization
• প্রকল্প স্থাপনা
• এসএসআর এবং এসপিএ

নতুন কিছু শেখার জন্য ই-কমার্স অ্যাপের মতো বাস্তব-জীবনের উদাহরণ পাওয়া সবসময়ই দারুণ। তুমি পারবে এখানে টিউটোরিয়াল খুঁজুন.

Nuxt.js সহ সম্পূর্ণ বহুভাষিক ব্লগ

Nuxt.js হল Vue-এর জন্য, যেমন Next.js হল প্রতিক্রিয়ার জন্য: সার্ভার-সাইড রেন্ডারিং এবং একক-পৃষ্ঠা অ্যাপ্লিকেশনগুলিকে একত্রিত করার জন্য একটি দুর্দান্ত কাঠামো
আপনি যে শেষ অ্যাপ্লিকেশনটি তৈরি করতে পারেন তা দেখতে এইরকম হবে:

আপনি কি শিখবেন

এই নমুনা প্রকল্পে, আপনি প্রাথমিক সেটআপ থেকে চূড়ান্ত স্থাপনা পর্যন্ত Nuxt.js ব্যবহার করে একটি সম্পূর্ণ ওয়েবসাইট তৈরি করতে শিখবেন।

এটি Nuxt-এর অফার করে এমন অনেকগুলি দুর্দান্ত বৈশিষ্ট্যের সুবিধা নেয়, যেমন পৃষ্ঠা এবং উপাদানগুলি এবং SCSS এর সাথে স্টাইলিং।

টেক স্ট্যাক এবং বৈশিষ্ট্য

• Nuxt.js
• উপাদান এবং পৃষ্ঠা
• স্টোরিব্লক মডিউল
• মিক্সিন
• রাষ্ট্র পরিচালনার জন্য Vuex
• স্টাইলিং জন্য SCSS
• Nuxt Middlewares

এটি একটি সত্যিই দুর্দান্ত প্রকল্প।, যার মধ্যে Nuxt.js এর অনেকগুলি দুর্দান্ত বৈশিষ্ট্য রয়েছে৷ আমি ব্যক্তিগতভাবে Nuxt এর সাথে কাজ করতে পছন্দ করি তাই আপনার এটি চেষ্টা করা উচিত কারণ এটি আপনাকে একজন দুর্দান্ত Vue বিকাশকারীও করে তুলবে।

Gatsby সঙ্গে ব্লগ

Gatsby React এবং GraphQL ব্যবহার করে একটি দুর্দান্ত স্ট্যাটিক সাইট জেনারেটর। এই প্রকল্পের ফলাফল:

আপনি কি শিখবেন

এই টিউটোরিয়ালে, আপনি কীভাবে একটি ব্লগ তৈরি করতে গ্যাটসবি ব্যবহার করবেন তা শিখবেন যা আপনি প্রতিক্রিয়া এবং গ্রাফকিউএল ব্যবহার করে আপনার নিজের নিবন্ধগুলি লিখতে ব্যবহার করবেন।

টেক স্ট্যাক এবং বৈশিষ্ট্য

• গ্যাটসবি
• প্রতিক্রিয়া
• গ্রাফকিউএল
• প্লাগইন এবং থিম
• MDX/মার্কডাউন
• বুটস্ট্র্যাপ সিএসএস
• টেমপ্লেট

আপনি যদি কখনও একটি ব্লগ শুরু করতে চান, এটি একটি বড় উদাহরণ রিঅ্যাক্ট এবং গ্রাফকিউএল ব্যবহার করে কীভাবে এটি তৈরি করবেন।

আমি বলছি না যে ওয়ার্ডপ্রেস একটি খারাপ পছন্দ, তবে গ্যাটসবি দিয়ে আপনি প্রতিক্রিয়া ব্যবহার করে উচ্চ কার্যকারিতা ওয়েবসাইট তৈরি করতে পারেন - যা একটি আশ্চর্যজনক সংমিশ্রণ।

Gridsome সঙ্গে ব্লগ

Vue-এর জন্য গ্রিডসাম... ঠিক আছে, আমরা ইতিমধ্যেই নেক্সট/নক্সট এর সাথে এটি পেয়েছি।
তবে গ্রিডসাম এবং গ্যাটসবির ক্ষেত্রেও একই কথা প্রযোজ্য। উভয়ই তাদের ডেটা স্তর হিসাবে গ্রাফকিউএল ব্যবহার করে, তবে গ্রিডসোম VueJS ব্যবহার করে। এটি আপনাকে দুর্দান্ত ব্লগ তৈরি করতে সহায়তা করার জন্য একটি দুর্দান্ত স্ট্যাটিক সাইট জেনারেটর:

আপনি কি শিখবেন

গ্রিডসম, গ্রাফকিউএল এবং মার্কডাউন দিয়ে শুরু করার জন্য কীভাবে একটি সাধারণ ব্লগ তৈরি করতে হয় এই প্রকল্পটি আপনাকে শেখাবে। এটি নেটলিফাই এর মাধ্যমে কীভাবে একটি অ্যাপ্লিকেশন স্থাপন করতে হয় তাও ব্যাখ্যা করে।

টেক স্ট্যাক এবং বৈশিষ্ট্য

• গ্রিডসাম
• দৃশ্য
• গ্রাফকিউএল
• Markdown
• নেটলিফাই

এটি অবশ্যই সবচেয়ে সম্পূর্ণ টিউটোরিয়াল নয়, তবে এটি গ্রিডসম এবং এর মৌলিক ধারণাগুলিকে কভার করে মার্কডাউন এবং একটি ভাল সূচনা পয়েন্ট হতে পারে.

কোয়াসার ব্যবহার করে সাউন্ডক্লাউডের মতো অডিও প্লেয়ার

Quasar হল আরেকটি Vue ফ্রেমওয়ার্ক যা মোবাইল অ্যাপ তৈরি করতে ব্যবহার করা যেতে পারে। এই প্রকল্পে, আপনি একটি অডিও প্লেয়ার অ্যাপ্লিকেশন তৈরি করবেন যেমন:

আপনি কি শিখবেন

যদিও অন্যান্য প্রকল্পগুলি বেশিরভাগ ওয়েব অ্যাপগুলিতে ফোকাস করে, এটি আপনাকে দেখাবে কিভাবে Vue এবং Quasar ফ্রেমওয়ার্ক ব্যবহার করে একটি মোবাইল অ্যাপ তৈরি করতে হয়।
আপনার ইতিমধ্যেই Android Studio/Xcode সেট আপ সহ একটি কার্যকরী কর্ডোভা থাকা উচিত৷ যদি না হয়, ম্যানুয়ালটিতে Quasar ওয়েবসাইটের একটি লিঙ্ক রয়েছে যেখানে তারা আপনাকে দেখায় কিভাবে সবকিছু সেট আপ করতে হয়।

টেক স্ট্যাক এবং বৈশিষ্ট্য

• কোয়েসার
• দৃশ্য
• Cordova
• ওয়েভসার্ফার
• UI উপাদান

ছোট প্রকল্প, মোবাইল অ্যাপ্লিকেশন তৈরির জন্য কোয়াসারের ক্ষমতা প্রদর্শন করে।

উত্স: www.habr.com