Live website link: https://skills-hub.netlify.app/
উত্তর: এটি মূলত এমন একটি ওয়েবসাইট যেখানে ব্যবহারকারীরা স্কিল ডেভেলপমেন্টের বিভিন্ন বিষয়ের উপর কোর্স রেজিস্ট্রেশন করতে পারবে। এই ওয়েবসাইটের ফিচারসগুলোর মধ্যে উল্লেখযোগ্য কিছু ফিচারস নিয়ে নিচে আলোচনা করা হলো।
- ব্যবহারকারীরা যেকোন কোর্স কার্টে যোগ করতে পারবে। কোন কোর্স একবারের বেশি যোগ করতে গেলে ব্যবহারকারীকে পপআপের মাধ্যমে একটি এরর মেসেজ দেখাবে।
- সম্পূর্ণ ওয়েবসাইটটি ডায়নামিক ভাবে তৈরিকৃত, অর্থাৎ এখানে ব্যবহৃত সকল তথ্য-উপাত্ত একটি এপিআই রিকোয়েস্টের মাধ্যমে লোড করে দেখানো হয়েছে। এছাড়াও ওয়েবসাইটটি সম্পূর্ণ রেসপন্সিভ।
- প্রত্যেক ব্যবহারকারীর সর্বোচ্চ ক্রেডিট থাকবে ২০। নতুন কোর্স কার্টে যোগ করার মাধ্যমে তার ক্রেডিট কমতে থাকবে। কোন ব্যবহারকারী যদি তার ক্রেডিট শেষ হয়ে যাওয়ার পর কার্টে আরো কোর্স যুক্ত করতে চায় তাহলে তাকে পপআপের মাধ্যমে একটি এরর মেসেজ দেখানো হয়েছে।
উপরে উল্লেখিত এগুলোই ছিল এই ওয়েবসাইটের কিছু বিশেষ ফিচারস। আশা করি এটি একজন ব্যবহারকারীকে ওয়েবসাইট টি ব্যবহার করতে সাহায্য করবে।
উত্তর: React application এ স্টেট ম্যানেজ করা একটি গুরুত্বপূর্ণ বিষয়। স্টেটের উপর নির্ভর করে অনেক কম্পনেন্ট রেন্ডার বা রিরেন্ডার হয়। আমাদেরকে প্রায়শই প্রয়োজনের উপর ভিত্তি করে স্টেট আপডেট করতে হয়। এই ওয়েবসাইটের টেট ম্যানেজমেন্ট নিয়ে নিচে কিছু আলোচনা করা হলো।
প্রথমেই App component এর মধ্যে এই সাইটের সকল স্টেট ডিক্লেয়ার করা হয়েছে যাতে অন্যান্য কম্পোনেন্টেও স্টেট গুলো props আকারে পাঠিয়ে দেয়া যায়। পরবর্তীতে সেই স্টেট গুলো যেখানে যেখানে ব্যবহারের প্রয়োজন হয়েছে সেখানে props থেকে স্টেট গুলোকে destructor করে ব্যবহার করা হয়েছে। ব্যবহারকারীর বিভিন্ন interaction অনুযায়ী react application এ প্রায়শই স্টেট আপডেট করতে হয়। যা আমাকেও করতে হয়েছে।
প্রথমেই আমি স্টেট আপডেট করার জন্য App component এ ফাংশন ডিক্লেয়ার করে তার ভিতরেই রিকোয়ারমেন্ট অনুযায়ী স্টেট আপডেট করেছি। পরবর্তীতে সেই ফাংশনগুলোকে props আকারে যেখানে ব্যবহারের প্রয়োজন হয়েছে সেখানে পাঠিয়ে দিয়েছি।
মূলত এভাবেই আমার অ্যাপ্লিকেশনের সকল স্টেট গুলোকে আমি খুব সহজেই ম্যানেজ করতে পেরেছি।