পাঠ 1ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন (কন্ট্রোল্ড বনাম আনকন্ট্রোল্ড, লাইব্রেরি: ফর্মিক, রিয়্যাক্ট হুক ফর্ম, ভিভ্যালিডেট)শক্তিশালী ফর্ম হ্যান্ডলিং এবং ভ্যালিডেশন বাস্তবায়ন করুন। কন্ট্রোল্ড এবং আনকন্ট্রোল্ড ইনপুট তুলনা করুন, ফর্মিক, রিয়্যাক্ট হুক ফর্ম এবং ভিভ্যালিডেটের মতো লাইব্রেরি ব্যবহার করুন এবং জটিল ফর্মের জন্য ভ্যালিডেশন, এরর মেসেজ এবং সাবমিশন ফ্লো ডিজাইন করুন।
Controlled vs uncontrolled input strategiesFormik and React Hook Form in practiceVeeValidate and Vue form patternsSynchronous and async validation rulesError messages, UX, and accessibilityপাঠ 2ইউআই কম্পোনেন্ট লাইব্রেরি এবং অ্যাক্সেসিবিলিটি প্র্যাকটিস (টেইলউইন্ড, ম্যাটেরিয়াল, চক্রা, এআরআইএ রোল, কীবোর্ড নেভিগেশন)শক্তিশালী অ্যাক্সেসিবিলিটি বজায় রেখে আধুনিক ইউআই লাইব্রেরি ব্যবহার করুন। টেইলউইন্ড, ম্যাটেরিয়াল ইউআই এবং চক্রা অন্বেষণ করুন, তারপর এআরআইএ রোল, ফোকাস ম্যানেজমেন্ট এবং কীবোর্ড নেভিগেশন প্যাটার্ন প্রয়োগ করুন ইনক্লুসিভ, প্রোডাকশন-রেডি ইন্টারফেস তৈরির জন্য।
Design systems with Tailwind and utility classesMaterial UI and Chakra component patternsSemantic HTML and ARIA role strategiesFocus management and keyboard navigationColor contrast, theming, and reduced motionপাঠ 3ফ্রন্টএন্ড ফ্রেমওয়ার্ক নির্বাচন এবং যুক্তি (রিয়্যাক্ট, ভিউ, সভেলট) এবং ইকোসিস্টেম ট্রেডঅফআপনার ফ্রন্টএন্ড ফ্রেমওয়ার্ক নির্বাচন মূল্যায়ন এবং যুক্তি দিন। রিয়্যাক্ট, ভিউ এবং সভেলট আর্কিটেকচার, ইকোসিস্টেম পরিপক্কতা, পারফরম্যান্স এবং লার্নিং কার্ভ তুলনা করুন যাতে প্রতিটি প্রজেক্ট কনটেক্সটের জন্য সেরা অপশন নির্বাচন এবং রক্ষা করতে পারেন।
React, Vue, and Svelte core conceptsEcosystem maturity and community supportPerformance and bundle size tradeoffsTypeScript and tooling integrationDecision frameworks for real projectsপাঠ 4বিল্ড, বান্ডলিং এবং অপটিমাইজেশন: ওয়েবপ্যাক/ভাইট/রোলআপ, কোড স্প্লিটিং, ট্রি-শেকিং, অ্যাসেট হ্যান্ডলিংপারফরম্যান্ট ফ্রন্টএন্ডের জন্য আধুনিক বিল্ড টুলিং মাস্টার করুন। ওয়েবপ্যাক, ভাইট এবং রোলআপ তুলনা করুন, কোড স্প্লিটিং এবং ট্রি-শেকিং কনফিগার করুন এবং অ্যাসেট হ্যান্ডলিং, ক্যাশিং এবং সোর্স ম্যাপ অপটিমাইজ করুন দ্রুত, মেইনটেইনেবল প্রোডাকশন বান্ডেল ডেলিভার করতে।
Comparing Webpack, Vite, and Rollup setupsCode splitting and dynamic importsTree-shaking and dead code eliminationOptimizing images, fonts, and static assetsCaching, hashes, and source map strategiesপাঠ 5ক্লায়েন্ট-সাইড টেস্ট: ইউনিট টেস্টিং কম্পোনেন্ট, ইন্টিগ্রেশন টেস্ট, টেস্টিং লাইব্রেরি চয়েস এবং উদাহরণক্লায়েন্ট-সাইড টেস্টিং স্ট্র্যাটেজি তৈরি করুন। কম্পোনেন্টের জন্য ইউনিট টেস্টিং, রাউট এবং এপিআই জুড়ে ইন্টিগ্রেশন টেস্ট এবং জেস্ট, ভাইটেস্ট, সাইপ্রেস এবং টেস্টিং লাইব্রেরির মধ্যে চয়ন করুন রিলায়েবল, মেইনটেইনেবল টেস্ট স্যুট তৈরি করতে।
Unit testing UI components in isolationIntegration tests for flows and routingUsing Testing Library for user-centric testsChoosing Jest, Vitest, Cypress, or PlaywrightMocking APIs and handling flaky testsপাঠ 6লোকাল ডেভ এবং এনভায়রনমেন্ট কনফিগারেশন: এনভি ভ্যারিয়েবল, ডট এনভি ফাইল, ফ্রন্টএন্ডের জন্য ফিচার ফ্ল্যাগলোকাল এবং ক্লাউড সেটআপের জন্য রিলায়েবল ফ্রন্টএন্ড এনভায়রনমেন্ট কনফিগার করুন। এনভায়রনমেন্ট ভ্যারিয়েবল, ডট এনভি ফাইল, বিল্ড-টাইম ইনজেকশন এবং ফিচার ফ্ল্যাগ ম্যানেজ করুন যাতে ডেভেলপমেন্ট, স্টেজিং এবং প্রোডাকশন জুড়ে ফাংশনালিটি নিরাপদে টগল করতে পারেন।
Managing .env files and build-time variablesSeparating dev, staging, and production configsRuntime configuration and environment safetyImplementing frontend feature flagsSecrets handling and configuration pitfallsপাঠ 7প্রজেক্ট স্ট্রাকচার এবং ফোল্ডার কনভেনশন সিঙ্গল-পেজ অ্যাপের জন্য (কম্পোনেন্ট, পেজ, সার্ভিস, হুক)সিঙ্গল-পেজ অ্যাপের জন্য স্কেলেবল প্রজেক্ট স্ট্রাকচার ডিজাইন করুন। কম্পোনেন্ট, পেজ, সার্ভিস এবং হুকের জন্য ফোল্ডার কনভেনশন শিখুন এবং শেয়ার্ড ইউটিলিটি, টেস্ট এবং স্টাইল অর্গানাইজ করুন বড় কোডবেস আবিষ্কারযোগ্য এবং মেইনটেইনেবল রাখতে।
Organizing components, pages, and layoutsServices, hooks, and data access layersShared utilities, types, and constantsStructuring tests and story filesRefactoring toward modular boundariesপাঠ 8এপিআই ইন্টিগ্রেশন প্যাটার্ন: আরেস্ট বনাম গ্রাফকিউএল ক্লায়েন্ট, এরর হ্যান্ডলিং, রিকোয়েস্ট রিট্রাই, টাইমআউটক্লায়েন্টে শক্তিশালী এপিআই ইন্টিগ্রেশন প্যাটার্ন বাস্তবায়ন করুন। আরেস্ট এবং গ্রাফকিউএল ক্লায়েন্ট তুলনা করুন, অ্যাক্সিয়োস বা ফেচ কনফিগার করুন, এরর এবং রিট্রাই হ্যান্ডল করুন এবং রেজিলিয়েন্ট ডেটা ফেচিং লেয়ারের জন্য টাইমআউট, ক্যান্সেলেশন এবং নরমালাইজেশন ডিজাইন করুন।
Configuring REST clients with Axios or FetchUsing GraphQL clients like Apollo or URQLGlobal error handling and user messagingRequest retries, backoff, and timeoutsCancellation, abort controllers, and cachingপাঠ 9ফ্রন্টএন্ডে অথেনটিকেশন: টোকেন স্টোরেজ, রিফ্রেশ ফ্লো এবং নিরাপদ কুকি অ্যাপ্রোচনিরাপদ ফ্রন্টএন্ড অথেনটিকেশন প্যাটার্ন বুঝুন। লোকালস্টোরেজ, সেশনস্টোরেজ এবং কুকি তুলনা করুন, রিফ্রেশ টোকেন ফ্লো ডিজাইন করুন এবং রিয়েল অ্যাপ্লিকেশনে ইউজার রক্ষার জন্য এইচটিটিপি ওনলি কুকি, সিএসআরএফ ডিফেন্স এবং লগআউট স্ট্র্যাটেজি বাস্তবায়ন করুন।
Token storage: localStorage vs cookiesImplementing refresh token flows safelyHttpOnly cookies and CSRF protectionHandling logout, revocation, and rotationAuth error handling and user feedbackপাঠ 10স্টেট ম্যানেজমেন্ট অপশন এবং প্যাটার্ন (লোকাল কম্পোনেন্ট স্টেট, কনটেক্সট, রিডাক্স/পিনিয়া/মবএক্স, রিয়্যাক্ট কুয়েরি)জটিল ফ্রন্টএন্ডের জন্য স্টেট ম্যানেজমেন্ট অপশন তুলনা করুন। লোকাল স্টেট, কনটেক্সট, রিডাক্স, পিনিয়া, মবএক্স এবং রিয়্যাক্ট কুয়েরি অন্বেষণ করুন এবং বড় অ্যাপ্লিকেশনে অপ্রয়োজনীয় রি-রেন্ডার এড়ানোর জন্য ক্যাশিং, নরমালাইজেশন এবং প্যাটার্ন শিখুন।
Local component state and lifting patternsContext API for cross-cutting concernsRedux, Pinia, and MobX store designServer state with React Query or SWRPerformance tuning and selector patternsপাঠ 11রাউটিং এবং প্রোটেক্টেড রাউট: ক্লায়েন্ট-সাইড রাউটিং, রাউট গার্ড, লেজি লোডিংপ্রোটেক্টেড রাউট সহ রিলায়েবল ক্লায়েন্ট-সাইড রাউটিং তৈরি করুন। রাউট কনফিগারেশন, নেস্টেড রাউট, লেজি লোডিং এবং রাউট গার্ড শিখুন যা অথেনটিকেশন এবং অথরাইজেশন জোর করে নেভিগেশন দ্রুত এবং অ্যাক্সেসিবল রাখে।
Configuring client-side routers and routesNested routes and layout hierarchiesImplementing lazy loading and code splittingAuth-based route guards and redirectsHandling 404 pages and fallback routes