کدنویسی MERN Stack : کدنویسی MongoDB, NodeJS, ExpressJS و React

ساخت و استقرار برنامه تور Mern Stack با MongoDB ، Express ، React ، Redux-Toolkit ، Node and Socket IO در Heroku & NetLify

عنوان اصلی : MERN Stack : MongoDB Node Express & React + Redux-Toolkit

سرفصل های دوره :

مقدمه:
چرا باید از MERN استفاده کنیم؟
تنظیم محیط
تنظیم Backend:
تنظیم سرور اکسپرس
اتصال Backend به MongoDB
ساختار پوشه
Authentication Backend:
مدل تایید
کنترل کننده ثبت نام
افزودن مسیر ثبت نام
تست API با استفاده از Postman
کنترل ورود به سیستم
افزودن و آزمایش Sign-In API با استفاده از Postman
اختیاری: Redux-Toolkit را درک کنید:
مقدمه
Redux چیست و چرا از آن استفاده می کنیم؟
Redux-Toolkit چیست؟
آشنایی با Redux-Toolkit API
CreateAsyncThunk را درک کنید
تنظیم Frontend:
create-react-app و نصب بسته ها
پاکسازی، پیکربندی MDB، toastify و Structuring App
روتینگ را فعال کنید
تأیید هویت پیشانی:
کار در صفحه ورود
راه اندازی Redux-Toolkit
عملیات ورود به سیستم نوشتن و ارسال
خطای مدیریت
کار در صفحه ثبت نام
عملیات ثبت و ارسال
افزودن دکمه ورود به سیستم Google
شناسه مشتری Google را پیکربندی کنید
کنترل کننده ورود به سیستم Google
نوشتن و ارسال اقدام ورود به سیستم Google
کار بر روی هدر
سفارشی کردن هدر هنگام ورود
کاربر ماندگار و خروج
ایجاد تور جدید:
مدل تور
کنترل کننده تور و مسیر
ایجاد فرم تور - قسمت 1
ایجاد فرم تور - قسمت 2
Redux Create Tour Action
Dispatching Create Tour Action
Middleware:
Backend Middleware
سربرگ مجوز را در درخواست Axios اضافه کنید
خانه، جزئیات تور و داشبورد:
اکشن تورهای ردوکس
کار در Hompage
نمایش تورها با مؤلفه کارت
Single Tour API - Controller
تور تکی اکشن ردوکس
صفحه تور واحد
کنترل کننده و مسیر کاربر گشت و گذار
داشبورد - اکشن Redux Tours کاربر
داشبورد - اقدام برای اعزام کاربر
داشبورد - نمایش تورهای کاربر
محافظت مسیر و اسپینر:
افزودن اسپینر
هدایت کاربر برای دسترسی غیرمجاز
حذف و به‌روزرسانی تور:
حذف کنترل کننده تور
کنترل کننده تور را به روز کنید
حذف تور با استفاده از Redux Action
به‌روزرسانی اقدام تور
داده های تور را در فرم پر کنید
تور را با استفاده از Redux Action به‌روزرسانی کنید
صفحه یافت نشد (404)
مشکل برنامه را برطرف کنید
عملکرد جستجو:
جستجوی کنترل کننده تور
افزودن فیلد ورودی جستجو
پیاده سازی جستجو با اکشن Redux
تورهای مرتبط و برچسب:
کنترل کننده تورهای برچسب
Tag Tours Redux Action
تبدیل برچسب به پیوند روی کارت
نمایش تورها بر اساس برچسب مشترک
کنترل کننده تورهای مرتبط
تورهای مرتبط Redux Action
بخش تورهای مرتبط
انقضای رمز، صفحه بندی و پسندیدن:
انقض نماد را کنترل کنید
Backend صفحه بندی
منطق Redux را برای صفحه بندی تنظیم کنید
جزء صفحه بندی
مدل تور را برای ویژگی لایک تغییر دهید
مانند Tour Controller
ویژگی Redux Action for Like
مانند قسمت ویژه - 1
مانند قسمت ویژه - 2
نظر Disqus، ویژگی کوچک و رفع اشکال:
ادغام نظرات Disqus در UI
دکمه بازگشت در صفحه جزئیات
رفع مشکل در داشبورد
مشکل جستجو را برطرف کنید
رفع مشکل هشدار در برنامه
استقرار:
استقرار Backend Heroku
Frontend Netlify Deployment
مشکل استقرار رابط کاربری را برطرف کنید
اعلان با استفاده از سوکت:
Socket Backend
تنظیم سوکت جلو
ارسال اعلان
دریافت اعلان
برچسب‌ها و بخش‌های محبوب:
کنترل کننده برچسب و Redux
بخش برچسب
مدل و کنترلر را به روز کنید
افزودن کشویی دسته
بخش دسته
صفحه دسته
افزودن دسته Bagde در تور کارت
تعیین بخش برچسب و دسته بندی محبوب با استفاده از تغییر اندازه
صفحه نمایه:
کنترل کننده نمایه
افزودن مسیر نمایه
نمایه Redux
بخش تصویر نمایه
بخش جزئیات نمایه
تبدیل جزئیات نمایه به فیلد ورودی
نمایه را با استفاده از Redux به‌روزرسانی کنید
نمایه را در State و localStorage به‌روزرسانی کنید
بخش تور برتر نمایه
عکس نمایه را در هدر اضافه کنید
بارگیری بیشتر، به بالا، پاورقی و کد Refactor بروید:
بارگذاری بیشتر قسمت - 1
بارگذاری بیشتر قسمت - 2
به بالا بروید
بازسازی کد
رفع اشکال، مشکل سبک و استقرار:
مشکل هشدار
مشکل بازخوانی و سبک صفحه
استقرار برنامه ما