React Portfolio-Ready রিয়েল প্রোজেক্ট
বাংলাদেশি ডেভেলপারদের জন্য React-এর সম্পূর্ণ, real-world প্রজেক্ট — Context API, Redux, RTK Query ও React Query দিয়ে। ধাপে ধাপে কোডসহ, চাকরি ও ফ্রিল্যান্সিং পোর্টফোলিওর জন্য প্রস্তুত।
এই কোর্সে আমি চার থেকে পাঁচটি সম্পূর্ণ প্রজেক্ট নিয়ে আলোচনা করব, যেগুলো আপনাকে React স্কিল বাড়াতে এবং আপনার পোর্টফোলিও উন্নত করতে সাহায্য করবে। প্রতিটি প্রজেক্টের জন্য আমি ধাপে ধাপে নির্দেশনা এবং কোড উদাহরণ প্রদান করব।
প্রতিটা প্রজেক্টই একটা নির্দিষ্ট state-management/data-fetching পদ্ধতির উপর ফোকাসড, যাতে একই ধরনের ফিচার (feed, profile ইত্যাদি) ভিন্ন ভিন্ন approach দিয়ে বানিয়ে পার্থক্যগুলো নিজে হাতে-কলমে বুঝতে পারেন।
প্রজেক্টসমূহ
১. Deshi Book (facebook-clone) — Context API + Axios Advanced
Stack: Context API + Axios Advanced + React Router + Modern Design Pattern (Endpoints + Service Layer)
মিনি Facebook ক্লোন — real-world FaceHook API ব্যবহার করে। কভার করা হয়েছে দুইটা fully functional ফিচার:
- News Feed — পোস্ট (টেক্সট + ছবি), Edit, Delete, Like/Unlike, Comment, Comment Delete
- Profile Feed — নিজের প্রোফাইল দেখা/আপডেট, Avatar আপলোড, নিজের পোস্ট (own feed)
এখানে শিখবেন Axios instance, request/response interceptors, auto refresh-token, FormData upload, Promise.all, AbortController, আর service layer pattern।
২. দেশি দোকান (Deshi Dokan) — Redux + RTK Query
Stack: Redux Toolkit + RTK Query + Tailwind CSS + React Router + json-server Mock Backend + Modern Design Pattern (Endpoints + Service Layer)
একটা সম্পূর্ণ ফাংশনাল ই-কমার্স স্টোর — real API থেকে প্রোডাক্ট fetch, শপিং কার্ট, চেকআউট, আর অর্ডার হিস্ট্রি। কভার করা হয়েছে চারটা ফিচার:
- প্রোডাক্ট ব্রাউজিং — Category filter, Search, Product Details
- শপিং কার্ট — Add/Remove/Quantity বাড়ানো-কমানো, localStorage persistence
- চেকআউট — RTK Query Mutation দিয়ে অর্ডার তৈরি
- অর্ডার হিস্ট্রি (বোনাস) — RTK Query-র automatic cache invalidation নিজের চোখে দেখা
এখানে শিখবেন Redux Toolkit (createSlice, configureStore), RTK Query (createApi, fetchBaseQuery, auto-generated hooks), tagTypes/providesTags/invalidatesTags দিয়ে cache invalidation, আর json-server দিয়ে নিজের mock backend বানানো।
৩. Redux + React Query
Stack: Redux + React Query + React Router + Modern Design Pattern (Endpoints + Service Layer)
(প্রজেক্টের বিস্তারিত শীঘ্রই যুক্ত করা হবে)