১. তোমার পুরানো বন্ধু themealdb এর কাছে যাও। সেখানে সার্চ করে খাবারের এর ডাটা লোড করার একটা api আছে। সেটা খুঁজে বের করো। সিম্পলভাবেই আছে। একটু খুঁজলেই পাবে। তারপর প্রথমে একটা API লিংক সেট করে ফেলো। যেটা দিয়ে তুমি যত খাবারের মধ্যে "a" আছে সেই খাবার এর ডাটা লোড করতে পারবে। তারপর সেই url/api এর লিংক দিয়ে তোমার react প্রজেক্ট এর মধ্যে ডাটা লোড করো। শর্ত হচ্ছে App.js এর মধ্যে ডাটা লোড করতে পারবে না। অন্য কোন একটা কম্পোনেন্ট এ করতে হবে। কি কম্পোনেন্ট এ করবে। সেটা তোমার সিদ্ধান্ত।
২. ওয়েবসাইট এ একটা হেডার দিয়ে দাও। তোমার ইচ্ছা মতো একটা দিয়ে দাও। এইটার জন্য বেশি সময় দিও না। তবে আলাদা একটা কম্পোনেন্ট বানাও
৩. প্রত্যেকটা meal দেখাও। meal এর মধ্যে meal রিলেটেড কিছু তথ্য দেখাও। এবং ছবি দেখাও।
৪. কোন একটা meal এ ক্লিক করলে সেই meal এর নাম ডানপাশে যোগ হয়ে যাবে। অনেকটা ema-john এর ডানপাশে যে শপিং কার্ট ছিল (যেখানে টোটাল দেখানো হতো ) সেখানে টোটাল হিসাব করবে না। বরং যে যে মিল এ ক্লিক করেছে সেটার নাম দেখাবে। কিভাবে দেখাবে। চেষ্টা করে দেখো। না পারলে আমাদের গরূপে জিজ্ঞেস করো।
৫. যে বাটনে ক্লিক করবে সেই বাটনে font awesome দিয়ে কোন একটা আইকন যোগ করো।
৬. তোমার ওয়েবসাইট এর কোড তোমার গিটহাব এ রাখবে। এবং সাইট নেটলিফাই বা অন্য কোথাও হোস্ট করে লাইভ লিংক তৈরি করবে।
৭. কিছু জিনিস খেয়াল রাখবে। ফোল্ডার স্ট্রাকচার , কম্পোনেন্ট এর নাম, ডাটা কিভাবে পাঠাচ্ছ। স্টেট্ কোথায় ডিক্লেয়ার করতেছো। destructuring ইউজ করতেছো কিনা।
৮. (চ্যালেঞ্জিং + অপশনাল) চেষ্টা করো মডিউল ৪৯ এর মতো করে। সার্চ ফাংশনালিটি ইমপ্লিমেন্ট করতে পারো কিনা। অর্থাৎ এইটার জন্য তুমি একটা ইনপুট ফিল্ড যোগ করবে। ইউজার কি লিখতেছে সেটা onChange এ ক্যাপচার করবে। সেই অনুসারে API এর ULR তা হালকা একটু চেইঞ্জ করে ফেলবে। এই অংশ একটু ট্রিকি হয়ে যেতে পারে। কারো কারো জন্য। তারপর সার্চ করে পাওয়া রেজাল্ট UI তে দেখায় ফেলবে।