آموزش پروژه MERN Stack Blogify: توسعه وب [2023]

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

دموی زنده LIVE DEMO

• ویژگی های پروژه Project Features

• نسخه ی نمایشی زنده پروژه Project Live Demo

• پیش نمایش لینک زنده Live Link Preview

سلب مسئولیت || باید خواند شود !!! DISCLAIMER || MUST READ !!!

• سلب مسئولیت Disclaimer

به ما در بهبود کمک کنید || مهم !!! HELP US IMPROVE || IMPORTANT !!!

• در بهبود این دوره به ما کمک کنید Help Us Improve This Course

نحوه شرکت در این دوره و منابع || مهم !! HOW TO TAKE THIS COURSE & RESOURCES || IMPORTANT !!

• نحوه گذراندن این دوره How to take this course

شروع به کار || بازگشت GETTING STARTED || BACKEND

• تنظیم محیط Setting Up The Environment

• سفارشی سازی VSCODE VSCODE Customisation

• ساختار پوشه Folder Structure

• MVC توضیح داد MVC Explained

• سرور اکسپرس ایجاد کنید Create Express Server

• کدهای منبع نهایی Final Source Codes

مدل سازی داده ها-پشت DATA MODELLING-BACKEND

• ساختار داده ها Data Structure

• ایجاد شعبه Github برای مدل سازی داده ها Creating Github Branch for data modelling

• مدل سازی داده های کاربر User Data Modelling

• مدل سازی داده های پست Post Data Modelling

• دسته بندی و مدل سازی نظر Category And Comment Modelling

احراز هویت و مجوز-بازگشت AUTHENTICATION & AUTHORISATION-BACKEND

• بررسی اجمالی احراز هویت و مجوز Authentication & Authorisation Overview

• نحوه عملکرد JSON WEB Token (JWT). How JSON WEB TOKEN (JWT) Works

• کاوش بیشتر درباره JWT Exploring More About JWT

• کنترل کننده ثبت نام کاربر ساختگی Dummy User Registration Controller

• نصب پستچی Installing Postman

• به پایگاه داده MongoDB متصل شوید Connect to MongoDB Database

• رشته اتصال MongoDB ایجاد کنید Create MongoDB Connection String

• نصب Nodemon و VSCODE MongoDB Extension Installing Nodemon and VSCODE MongoDB Extension

• ثبت نام کاربر User Registration

• هش رمز عبور کاربر Hash User Password

• ورود کاربر Login User

• توکن تولید کنید Generate Token

• کنترلر نمایه ساختگی Dummy Profile Controller

• آیا Login Middleware Logic Implementation است Is Login Middleware Logic Implementation

• توکن را از سربرگ درخواست دریافت کنید Get Token From Request Header

• رمز را تأیید کنید Verify Token

• کاربر را در Request Object ذخیره کنید Save User into Request Object

• کنترلر نمایه کاربر را بهبود ببخشید Get User Profile Controller Improved

Error Handling-BackEND ERROR HANDLING-BACKEND

• میان افزار کنترل کننده خطای جهانی Global Error Handler Middleware

• خطاهای Async را بگیرید Catch Async Errors

• NotFound Handler NotFound Handler

• Refactored Error Handlers Refactored Error Handlers

POST CATEGORIES API-BACKEND POST CATEGORIES API-BACKEND

• ایجاد رده و اصلاح شده isLogin Middleware Create Category and Modified isLogin Middleware

• واکشی همه دسته ها Fetch All Categories

• حذف و به روز رسانی دسته Delete and Update Category

تنظیمات پستچی-پشت POSTMAN CONFIGURATIONS-BACKEND

• محیط در پستچی Environment In Postman

• متغیرهای محیطی در NodeJS (dotenv) Environment Variables in NodeJS(dotenv)

کنترل کننده پست و نظر || بازگشت POST AND COMMENT CONTROLLER || BACKEND

• کنترلر پست ایجاد کنید Create Post Controller

• حذف، به روز رسانی Fetch Single and All Post Controllers Delete, Update Fetch Single And All Post Controllers

• کنترل کننده نظر ایجاد کنید و نظرات پست را پر کنید Create Comment Controller and Populate Post Comments

• به روز رسانی و حذف نظر Update And Delete Comment

مسدود کردن و رفع انسداد، دنبال کردن UNFOLOWING CONTROLLERS-BACKEND BLOCKING AND UNBLOCKING, FOLLOWING UNFOLLOWING CONTROLLERS-BACKEND

• مسدود کردن کنترل کننده کاربر Blocking User Controller

• روتر مسدود کردن کاربر و رفع اشکال مسدود کردن کاربر User Blocking Router and Fixed User Blocking Bug

• رفع انسداد کنترل کننده کاربر Unblocking User Controller

• چه کسی کنترلر نمایه من را مشاهده می کند Who view My Profile Controller

• کاربر دنبال منطق User Following Logic

• کنترلر دنبال کاربر User Following Controller

• کنترلر دنبال کننده ثابت شد Fixed Following Controller

• Unfollow User Controller Unfollow User Controller

فراموشی و بازنشانی رمز عبور|| بازگشت FORGOT AND PASSWORD RESET|| BACKEND

• منطق بازنشانی رمز عبور Password Reset Logic

• ارسال ایمیل با استفاده از Nodemailer utility Function Email Sending Using Nodemailer utility Function

• رمز برنامه برای حساب جیمیل App Password for Gmail Account

• کنترل کننده رمز عبور را فراموش کرده اید Forgot Password Controller

• در حال امتحان کردن کنترلر رمز عبور را فراموش کرده اید Trying Forgot Password Controller

• رمز عبور را فراموش کرده اید Forgot Password

• کنترل کننده بازنشانی رمز عبور Password Reset Controller

تأیید حساب || بازگشت ACCOUNT VERIFICATION || BACKEND

• منطق تأیید حساب Account Verification Logic

• کنترل کننده تأیید حساب Account Verification Controller

• مسیر تأیید حساب Account Verification Route

• تایید حساب Account Verification

• آیا حساب کاربری میان‌افزار تأیید شده است Is Account Verified Middleware

کنترل کننده های پست لایک و دوست نداشتن || بازگشت POST LIKES AND DISLIKES CONTROLLERS || BACKEND

• کنترلر لایک پست کنید Post Like Controller

• پست لایک مسیر Post Like Route

• دوست نداشتن کنترلر پست Disliking a Post Controller

POST CLAPS و کنترل کننده های زمان بندی || بازگشت POST CLAPS AND SCHEDULING CONTROLLERS || BACKEND

• کنترلر Post Claps Post Claps controller

• برنامه کنترل پست Schedule Post Controller

• مسیر پست را برنامه ریزی کنید Schedule Post Route

مخفی کردن و نمایش پست ها HIDING AND SHOWING POSTS

• پنهان کردن زمان‌بندی‌شده و مخفی کردن پست‌ها اگر کاربر ورود به سیستم منطقی مسدود شده است Hiding Scheduled and Hide Posts if Login User is Blocked Logic

• مخفی کردن پست ها از کنترل کننده کاربران مسدود شده Hiding Posts From Blocked Users Controller

• پنهان کردن کنترل کننده پست های زمان بندی شده Hide Scheduled Posts Controller

• پر کردن شناسه های MongoDB Populating MongoDB IDs

• کنترلر پروفایل ثابت Fixed Profile Controller

کنترل کننده آپلود فایل || بازگشت FILE UPLOAD CONTROLLER || BACKEND

• میان افزار آپلود فایل File Upload Middleware

• ایجاد پست با تصویر Create Post With Image

• آپلود تصویر نمایه Profile Image Upload

احراز هویت و مجوز کاربر || جلو USER AUTHENTICATION & AUTHORISATION || FRONTEND

• ایجاد React Application Create React Application

• Tailwindcss را نصب کنید Install Tailwindcss

• React Router DOM را پیکربندی کنید Configure React Router DOM

• رندر کردن کامپوننت صفحه اصلی Rendering HomePage Component

• رندر فرم ورود Render Login Form

• Redux Toolkit را نصب کرده و Login Action را ایجاد کنید Install Redux Toolkit and Create Login Action

• برش و کاهش دهنده اقدام ورود کاربر User Login Action Slice and Reducer

• Redux Store را پیکربندی کرده و افزونه DevTool را نصب کنید Configure Redux Store and Install DevTool Extension

• اقدام ورود به سیستم Dispatch Login Action

• رفع خطای Cors Fixed Cors Error

• کاربر ورود به سیستم را در LocalStorage ذخیره کنید Save Login User Into LocalStorage

• خطا-موفقیت-بارگیری مؤلفه ها Error-Success-Loading Components

• نمایش بارگیری، خطا و پیام موفقیت در هنگام ورود Display Loading, Error, and Success Message Upon Login

• تغییر مسیر کاربر پس از ورود و نمایش کامپوننت نمایه کاربر Redirect User After Login And Display User Profile Component

• نمایش نوار ناوبری عمومی Display Public Navbar

• نمایش نوار ناوبری خصوصی Display Private Navbar

• نوار ناوبری مشروط نمایش داده شود Conditionally Display Navbar

• خروج کاربر Logout User

• جزء محافظت شده Protected Component

• API ثبت نام کاربر اصلاح شده Modified User Registration API

• ثبت نام کاربر Register User

• نمایش خطای بارگیری هنگام ثبت نام Display Loading Error Upon Registration

• منطق عمل جهانی Global Action Logic

• اجتناب از پنجره های مزاحم Avoiding The Annoying Popups

کار روی پست || جلو WORKING ON POST || FRONTEND

• اقدام واکشی پست های عمومی Fetch Public Posts Action

• واکشی پست های عمومی Fetch Public Posts

• نمایش دسته های پست در React Select Component Display Post Categories in React Select Component

• واکشی همه دسته ها Fetch All Categories

• ورودی فرم تصویر را کنترل کنید Handle Image Form Input

• اقدام ارسال برای ایجاد پست Dispatch Action To Create Post

• نمایش خطا، بارگیری و موفقیت هنگام ایجاد پست Display Error, Loading, and Success when creating Post

• اعتبار سنجی پست سمت مشتری Client Side Post Validation

• پیوند نمایه نوار ناوبری خصوصی و جزء جزئیات پست Private Navbar Profile Link and Post Details Component

• اقدام جزئیات ارسال Post Details Action

• ارسال آمار Post Statistics

• ارسال روز پیش و زمان خواندن Post Days Ago and Reading Time

• نمایش پست های خصوصی Displaying Private Posts

• جلوگیری از حذف هر پست پشتیبان توسط کاربر Prevent User From Deleting Any Post-Backend

• جلوگیری از حذف هر پست فرانتند توسط کاربر Prevent User From Deleting Any Post-Frontend

• پست حذف Frontend Post Deleting Frontend

• تغییر لوگو و اجتناب از بازشوهای موفقیت آمیز برای پست Change Logo And Avoid Success Popups for post

• صفحه جزئیات پست بهبود یافته است Post Details Page Improved

• پست های خصوصی بهبود یافته است Private Posts Improved

• فرم به روز رسانی پست را رندر کنید Render Post Update Form

• برای پشتیبانی از به‌روزرسانی تصویر، نقطه پایانی پست را به‌روزرسانی کنید Update Post Endpoint To Support Image Update

• هنگام ایجاد پست از پنجره های بازشو خودداری کنید Avoid Popups when Creating Post

• Post Frontend را به روز کنید Update Post Frontend

• لایک کردن یک پست Liking of a Post

• دوست نداشتن پست Disliking Post

• نماد دست زدن پست و API تغییر یافته پست را نمایش دهید Display Post Clapping Icon and Modified Post API

• زمانی که پستی لایک یا دوست نداشتن، از بارگذاری مجدد خودداری کنید Avoid Reloading when a post is Liked or Disliked

• پست کف زدن Post Clapping

• Post Views Controller-Backend Post Views Controller-Backend

• تعداد بازدید پست ها در قسمت جلو Post Views Count Frontend

ارسال نظر || جلو POST COMMENTS || FRONTEND

• ارائه فرم نظر Rendering Comment Form

• عمل نظر دادن Comment Action

• اقدام ارسال نظر Dispatch Comment Action

• نمایش لیست نظرات Display Comment Lists

• بارگذاری مجدد پس از ایجاد نظر Reload After comment is Created

مشخصات کاربر || جلو USER PROFILE || FRONTEND

• کنترلر نمایه عمومی Public Profile Controller

• مولفه نمایه کاربر و کنترلر مشاهده پست اصلاح شده را رندر کنید Render User Profile Component and Modified Post Views Controller

• کنترلر نمایه عمومی اصلاح شده Modified Public Profile Controller

• عملکرد نمایه عمومی کاربر User Public Profile Action

• نمایش داده های نمایه عمومی کاربر Display User Public Profile Data

• نمایش پست های کاربر Display User's Posts

انسداد و رفع انسداد کاربر || جلو USER BLOCKING & UNBLOCKING || FRONTEND

• مسدود کردن کاربر دیگر اقدام کاربر User Blocking Another User Action

• رفع انسداد کاربر دیگر توسط کاربر User UnBlocking Another User

• به صورت مشروط، منطق دکمه کاربر را مسدود و رفع انسداد نشان می دهد Conditionally showing block and unblock user button Logic

• نمایه خصوصی کاربر User Private Profile

• نمایش مشروط دکمه مسدود کردن و رفع انسداد کاربر Conditionally showing block and unblock user button

• تلاش برای مسدود کردن و رفع انسداد منطق کاربر Trying Blocking and Unblocking User Logic

دنبال کردن و UNFOLOWING FOLLOWING & UNFOLLOWING

• کاربر فالو و عدم فالو کردن Following and Unfollowing User

• مشخصات مشخصات کاربر خصوصی Private User Profile Details

• نمایش دنبال کنندگان و پست های کاربر Display User followers and Posts

آپلود تصویر نمایه و جلد || جلو PROFILE & COVER IMAGE UPLOAD || FRONTEND

• کنترلر آپلود تصویر نمایه و جلد - Backend Profile and Cover Image Upload Controller - Backend

• اقدامات آپلود تصویر نمایه و جلد Profile and Cover Image Upload Actions

• آپلود تصویر نمایه کاربر Upload User Profile Image

• آپلود تصویر جلد کاربر Upload User Cover Image

• تصویر نمایه ثابت در نوار ناوبری Fixed Profile Picture on the Navbar

تأیید حساب کاربری || جلو USER ACCOUNT VERIFICATION || FRONTEND

• بررسی کنید که آیا حساب کاربری تأیید شده است یا خیر Check if user account is verified

• اگر حساب کاربری تأیید نشده باشد، هشدار را نشان دهید Show warning If User Account is Not Verified

• ارسال اقدام تأیید حساب Dispatch Account Verification Action

• هنگام ارسال ایمیل از خروج خودکار خودداری کنید و موفقیت را نشان دهید Avoid Automatically Logging Out And Display Success when email is sent

• منطق تأیید حساب Account Verification Logic

• در حال ارائه مؤلفه تأیید حساب Rendering Account Verification Component

• ارسال اقدام تأیید حساب Dispatch Account Verification Action

بازنشانی رمز عبور و فراموشی رمز عبور || جلو PASSWORD RESET & FORGOT PASSWORD || FRONTEND

• اقدام بازنشانی رمز عبور Password Reset Action

• ارسال اقدام بازنشانی رمز عبور Dispatch Password Reset Action

• خطای بازنشانی رمز عبور و پیام موفقیت آمیز Password Reset Error And Success Message

• رندر فرم بازنشانی رمز عبور Render Password Reset Form

• ارسال اقدام برای بازنشانی رمز عبور Dispatch Action To Reset Password

• بازنشانی رمز عبور بارگیری، خطا و موفقیت آمیز Password Reset Loading, Error & Success

به روز رسانی نمایه کاربر || جلو USER PROFILE UPDATE || FRONTEND

• به روز رسانی پروفایل کاربری API-Backend Update User Profile API-Backend

• مولفه نمایه کاربر به روز رسانی رندر Render Update User Profile Component

• ارسال اقدام برای به روز رسانی نمایه کاربر Dispatch Action To Update User Profile

• نمایش به روز رسانی نمایه در حال بارگیری، خطا و موفقیت آمیز Display Profile Update Loading, Error & Success

صفحه بندی، فیلتر کردن و جستجوی پست || جلو PAGINATION, FILTERING AND SEARCHING OF POST || FRONTEND

• فیلتر کردن پست بر اساس دسته Filter Post By Category

• جستجوی پست بر اساس عنوان - Backend Search Post by Title - Backend

• پس زمینه صفحه بندی پست Post Pagination Backend

• پست صفحه‌بندی جلو Post Pagination Frontend

• جستجوی عملکرد Frontend Searching Functionality Frontend

• فیلتر کردن پست بر اساس دسته Filtering Post By Category

• مولفه پست برنامه زمانبندی رندر Render Schedule Post Component

• ارسال اقدام برای زمانبندی پست Dispatch Action To Schedule Post

گسترش DEPLOYMENT

• آماده سازی برای استقرار Preparing For Deployment

• استقرار Frontend Frontend Deployment

• استقرار Backend Backend Deployment

منابع بیشتر FURTHER RESOURCES

• منابع بیشتر Further resources

بعد چه می شود؟ WHAT'S NEXT?

• بعدش چی؟ What's next?