آموزش دوره MERN Stack 2023 - MongoDB، Express، React و NodeJS

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

معرفی Introduction

• الزامات دوره Course Requirements

• منابع رایگان Free Resources

• ویرایشگر متن Text Editor

• رفع تاری ویدیو Video Blur Fix

• بررسی دوره Course Review

برپایی Setup

• دریافت دارایی Get Assets

• بررسی اجمالی کامل پروژه Complete Project Overview

• پروژه و README.md را ایجاد کنید Create Project and README.md

• راه اندازی React Application Setup React Application

• دیگ بخار را بردارید Remove Boilerplate

• عنوان و فاویکون Title and Favicon

• Normalize.css و Global Styles Normalize.css and Global Styles

صفحه فرود Landing Page

• صفحه فرود - راه اندازی اولیه Landing Page - Basic Setup

• صفحه فرود - ساختار Landing Page - Structure

• اجزای سبک - مقدمه Styled Components - Intro

• صفحه فرود - کامل شد Landing Page - Complete

• راه اندازی Wrappers Wrappers Setup

اجزای اول First Components

• لوگو و تصاویر Logo and Images

• جزء لوگو Logo Component

React Router 6 React Router 6

• راه اندازی روتر React React Router Setup

• کامپوننت پیوند Link Component

• ساختار صفحه Page Structure

صفحه خطا Error Page

• صفحه خطا Error Page

• اطلاعات واردات خودکار Auto Imports Info

صفحه ثبت نام Register Page

• صفحه ثبت نام - معرفی Register Page - Intro

• صفحه ثبت نام - راه اندازی Register Page - Setup

• کامپوننت FormRow FormRow Component

• مؤلفه هشدار Alert Component

• تعویض عضو Toggle Member

متن نوشته Context

• زمینه جهانی - مقدمه Global Context - Intro

• زمینه جهانی - راه اندازی Global Context - Setup

• کاهنده Reducer

• نمایش هشدار - راه اندازی Display Alert - Setup

• نمایش هشدار - کامل شد Display Alert - Complete

• پاک کردن هشدار Clear Alert

راه اندازی سرور Server Setup

• package.json و server.js را ایجاد کنید Create package.json and server.js

• ماژول های ES6 ES6 Modules

• سرور Basic Express و Nodemon Basic Express Server and Nodemon

• NotFoundMiddleware NotFoundMiddleware

• ErrorHandlerMiddleware ErrorHandlerMiddleware

• ENV Vars ENV Vars

• ویدیو اختیاری!!! Optional Video !!!

• اختیاری !!! حساب و رشته اتصال Mongo Atlas OPTIONAL !!! Mongo Atlas Account and Connection String

• اتصال به DB Connect To DB

مسیرها و ساختار کنترلرها Routes and Controllers Structure

• ساختار احراز هویت Auth Structure

• ساختار مشاغل Jobs Structure

• تست در پستچی Test in Postman

مدل کاربر User Model

• مدل کاربر User Model

• اعتبارسنجی ایمیل Validate Email

ثبت تنظیمات اولیه کنترلر Register Controller Initial Setup

• کنترل کننده ثبت پایه Basic Register Controller

• Pass Error به Error Middleware Pass Error to Error Middleware

• بسته "express-async-errors" را راه اندازی کنید Setup "express-async-errors" package

• کدهای وضعیت Status Codes

رسیدگی به خطا Error Handling

• مقدمه Intro

• خطای فیلد از دست رفته Missing Field Error

• خطای میدان منحصر به فرد Unique Field Error

• مقادیر خالی را در کنترلر بررسی کنید Check For Empty Values in Controller

• خطای CustomAPIE CustomAPIError

• BadRequestError و NotFoundError BadRequestError and NotFoundError

• خطاهای Refactor Refactor Errors

• ایمیل تکراری را در کنترلر بررسی کنید Check For Duplicate Email in Controller

رمز عبور هش Hash Password

• میدل افزار Mongoose Mongoose Middleware

• رمزهای عبور هش Hash Passwords

JWT JWT

• CreateJWT - روش نمونه سفارشی CreateJWT - Custom Instance Method

• JWT - بررسی اجمالی JWT - Overview

• JWT - راه اندازی JWT - Setup

• JWT - راز و مادام العمر JWT - Secret and Lifetime

• رمز عبور را حذف کنید Remove Password

Front-End و Server را وصل کنید Connect Front-End and Server

• همزمان Concurrently

• خطای واکشی Fetch Error

• اطلاعات خطای Cors Cors Error Info

• پکیج Cors Cors Package

• پروکسی - معرفی Proxy - Intro

• پروکسی - راه اندازی Proxy - Setup

ثبت نام کاربر Front-End Register User Front-End

• مقدمه Intro

• ثبت نام کاربر - راه اندازی Register User - Setup

• معرفی Axios Axios Intro

• ثبت نام کاربر - نمای کلی Register User - Overview

• ثبت نام کاربر - کامل شد Register User - Complete

• به صورت برنامه نویسی به داشبورد بروید Programmatically Navigate To Dashboard

• کاربر ماندگار در فضای ذخیره سازی محلی Persist User In Local Storage

ورود به سرور کاربر Login User Server

• بسته مورگان NPM Morgan NPM Package

• UnAuthenticatedError Setup UnAuthenticatedError Setup

• مقایسه رمز عبور Compare Password

• کنترل کننده ورود Login Controller

ورود کاربر Front-End Login User Front-End

• ورود کاربر - راه اندازی Login User - Setup

• ورود کاربر - کامل شد Login User - Complete

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

صفحات تودرتو و مسیر محافظت شده Nested Pages and Protected Route

• صفحات تو در تو - مقدمه Nested Pages - Intro

• صفحات داشبورد - راه اندازی Dashboard Pages - Setup

• صفحات داشبورد - ساختار Dashboard Pages - Structure

• صفحات داشبورد - کامل شد Dashboard Pages - Complete

• مسیر محافظت شده Protected Route

طرح بندی مشترک Shared Layout

• برپایی Setup

• ساختار Structure

• نمادهای واکنش React Icons

نوار ناوبری Navbar

• ساختار نوار ناوبری - مقدمه Navbar Structure - Intro

• ساختار نوار ناوبری - کامل شد Navbar Structure - Complete

• نوار کناری را تغییر دهید Toggle Sidebar

• کشویی را تغییر دهید Toggle Dropdown

• خروج Logout

نوار کناری کوچک Small Sidebar

• لینک های راه اندازی Setup Links

• نوار کناری کوچک - راه اندازی Small Sidebar - Setup

• نوار کناری کوچک - تغییر وضعیت Small Sidebar - Toggle

• نوار کناری کوچک - پیوندهای ناوبری Small Sidebar - Nav Links

نوار کناری بزرگ Big Sidebar

• کامپوننت پیوندهای ناو Nav Links Component

• نوار کناری بزرگ Big Sidebar

Auth - راه اندازی سرور Auth - Server Setup

• Auth - مقدمه Auth - Intro

• Auth - راه اندازی Auth - Setup

• توکن حامل Bearer Token

• راه اندازی رمز پستچی Postman Token Setup

• خطای تایید نشده UnAuthenticated Error

• احراز هویت کامل شد Auth Complete

به روز رسانی کاربر - سرور Update User - Server

• کنترل کننده کاربر را به روز کنید Update User Controller

• مسیرهای اصلاح شده Modified Paths

صفحه نمایه Profile Page

• صفحه پروفایل - معرفی Profile Page - Intro

• صفحه نمایه - کامل شد Profile Page - Complete

راه اندازی Axios Axios Setup

• Axios - مقدمه Axios - Intro

• Axios - رویکرد دستی Axios - Manual Approach

• Axios - راه اندازی جهانی Axios - Global Setup

• Axios - نمونه سفارشی Axios - Custom Instance

• Axios Interceptors - Intro Axios Interceptors - Intro

• Axios Interceptors - کامل Axios Interceptors - Complete

به روز رسانی کاربر - Front-End Update User - Front-End

• به روز رسانی کاربر - معرفی Update User - Intro

• به روز رسانی کاربر - کامل شد Update User - Complete

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

Job Model و CreateJob Controller Job Model and CreateJob Controller

• مدل شغلی - مقدمه Job Model - Intro

• مدل کار - کامل Job Model - Complete

• CreateJob Controller CreateJob Controller

ایجاد شغل - Front-End Create Job - Front-End

• ارزش های وضعیت شغلی Job State Values

• افزودن صفحه کار - مقدمه Add Job Page - Intro

• افزودن صفحه کار - ساختار کامل شد Add Job Page - Structure Complete

• JobType را انتخاب کنید JobType Select

• فرم انتخاب ردیف Form Row Select

• کنترل تغییر Handle Change

• پاک کردن مقادیر Clear Values

• ایجاد شغل - معرفی Create Job - Intro

• ایجاد شغل - تکمیل Create Job - Complete

دریافت همه مشاغل - سرور Get All Jobs - Server

• کنترل کننده همه مشاغل را دریافت کنید Get All Jobs Controller

دریافت همه مشاغل - Front-End Get All Jobs - Front-End

• دریافت همه مشاغل - ارزش های دولتی Get All Jobs - State Values

• دریافت تمام درخواست شغل Get All Jobs Request

• خروج از کاربر و پاک کردن هشدار Logout User and Clear Alert

• تنظیم صفحه همه مشاغل All Jobs Page Setup

• ظرف مشاغل Jobs Container

• Moment.js Moment.js

• جزء شغلی Job Component

• کامپوننت JobType JobType Component

ویرایش، حذف کار - راه اندازی Edit, Delete Job - Setup

• SetEditJob Functionality SetEditJob Functionality

ویرایش، حذف شغل - سرور Edit, Delete Job - Server

• ویرایشگر Job Controller Edit Job Controller

• رویکرد جایگزین Alternative Approach

• بررسی مجوزها - مقدمه Check Permissions - Intro

• بررسی مجوزها - کامل Check Permissions - Complete

• Job Controller را حذف کنید Delete Job Controller

ویرایش، حذف کار - Front-End Edit, Delete Job - Front-End

• حذف درخواست کار Delete Job Request

• ویرایش درخواست کار Edit Job Request

داده های ساختگی Mock Data

• موکارو Mockaroo

• DB را پر کنید Populate DB

آمار - سرور Stats - Server

• خط لوله تجمع -مرحله مسابقه Aggregation Pipeline -Match Stage

• خط لوله تجمع - مرحله گروهی Aggregation Pipeline - Group Stage

• کاهش آمار Reduce Stats

• آمار پیش فرض Default Stats

آمار - Front-End Stats - Front-End

• واکشی آمار Fetch Stats

• ساختار صفحه آمار Stats Page Structure

• کانتینر آمار Stats Container

• مورد آمار Stats Item

برنامه های کاربردی ماهانه - سرور Monthly Applications - Server

• تجمیع بر اساس سال و ماه Aggregation Based on Year and Month

• داده های Refactor Refactor Data

برنامه های ماهانه - Fron-End Monthly Applications - Fron-End

• کانتینر نمودارها Charts Container

• Recharts به روز رسانی کتابخانه! Recharts Library Update!

• کتابخانه Recharts را نصب کنید Install Recharts Library

• نمودار میله ای Bar Chart

• نمودار مساحتی Area Chart

فیلتر/مرتب سازی - سرور Filter/Sort - Server

• تصویر بزرگ Big Picture

• مشکل تنظیم فعلی Current Setup Issue

• پارامترهای پرس و جو - وضعیت Query Params - Status

• پارامترهای پرس و جو - JobType Query Params - JobType

• پارامترهای پرس و جو - جستجو Query Params - Search

• پارامترهای پرس و جو - مرتب سازی Query Params - Sort

فیلتر/مرتب سازی - Front-End Filter/Sort - Front-End

• جستجو - راه اندازی وضعیت Search - State Setup

• کامپوننت جستجو - راه اندازی اولیه Search Component - Initial Setup

• کامپوننت جستجو - کامل Search Component - Complete

• پاک کردن فیلترها Clear Filters

• درخواست GetJobs GetJobs Request

صفحه بندی - سرور Pagination - Server

• صفحه بندی - مقدمه Pagination - Intro

• صفحه و حد Page and Limit

• کل مشاغل و تعداد صفحات Total Jobs and Number of Pages

صفحه بندی - Front-End Pagination - Front-End

• ظرف دکمه - راه اندازی Button Container - Setup

• ظرف دکمه - ساختار Button Container - Structure

• لیست دکمه ها List Of Buttons

• تغییر صفحه Change Page

• صفحه قبلی و بعدی Prev and Next Page

• درخواست جدید را راه اندازی کنید Trigger New Request

ساخت اپلیکیشن Front-End Build Front-End Application

• رفع اخطارها و خروج کاربر Fix Warnings and Logout User

• ساخت اپلیکیشن Front-End Build Front-End Application

بسته های امنیتی Security Packages

• بسته های امنیتی - کلاه ایمنی، XSS-CLEAN، EXPRESS-MONGO-SANITIZE Security Packages - HELMET, XSS-CLEAN, EXPRESS-MONGO-SANITIZE

• بسته های امنیتی - EXPRESS-RATE-LIMITER Security Packages - EXPRESS-RATE-LIMITER

محتوای اضافی Extra Content

• اطلاعات محتوای اضافی Extra Content Info

جستجو - راه اندازی جایگزین Search - Alternative Setup

• Debounce - مقدمه Debounce - Intro

• Debounce - Vanilla JS Debounce - Vanilla JS

• جستجوی محلی Local Search

• Debounce - کامل Debounce - Complete

تست کاربر Test User

• تست کاربر - راه اندازی Test User - Setup

• کاربر آزمایشی - دسترسی را محدود کنید Test User - Restrict Access

• کاربر آزمایشی - Front-End را رفع کنید Test User - Fix Front-End

تأیید با کوکی ها Auth with Cookies

• معرفی کوکی ها Cookies Intro

• اولین کوکی First Cookie

• تابع Utils Utils Function

• کوکی تجزیه کننده را نصب کنید Install cookie-parser

• Refactor Auth Middleware and Responses Refactor Auth Middleware and Responses

• Refactor Front-End - Token و Local Storage را حذف کنید Refactor Front-End - Remove Token and Local Storage

• تست انقضای کوکی Test Cookie Expiration

• دریافت کاربر فعلی - سرور Get Current User - Server

• دریافت کاربر فعلی - appContext Get Current User - appContext

• دریافت کاربر فعلی - کامل Get Current User - Complete

• رفع فرود Landing Fix

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

گسترش Deployment

• آماده شدن برای استقرار Prepare for Deployment

• راه اندازی Github Repo Setup Github Repo

• رندر ثبت نام Render Signup

• استقرار برنامه Deploy Application

جایزه Bonus

• جایزه Bonus