آموزش دوره پروژه MERN Stack 2023 - ساخت برنامه Fullstack React

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

مقدمه ای بر دوره MERN Stack Introduction To The MERN Stack Course

• مقدمه ای بر دوره MERN Stack Introduction To The MERN Stack Course

• نسخه ی نمایشی برنامه Application Demo

• مبانی پشته MERN MERN Stack Basics

• JSX Syntax Crash Course JSX Syntax Crash Course

• ویرایشگر کد VS VS Code Editor

• نحوه استفاده از منابع قابل دانلود How To Use Downloadable Resources

React - ساخت قالب HTML برای برنامه React - Building The HTML Template For The App

• بریم به کسب و کار برسیم!!! Let's get down to business!!!

• React App را با استفاده از NPM نصب کنید Install React App Using NPM

• صفحه اول و اولین مسیر را ایجاد کنید Create First Page And First Route

• مسیرهایی را برای صفحات در دسترس عموم مانند فهرست محصولات ایجاد کنید Create Routes For Publicly Available Pages like List Of Products

• ایجاد مسیرهایی برای صفحات محافظت شده برای کاربران عادی Create Routes For Protected Pages For Regular User

• ایجاد مسیرهایی برای صفحات محافظت شده برای مدیر Create Routes For Protected Pages For Administrator

• کامپوننت های هدر و پاورقی را ایجاد کنید Create Header And Footer Components

• اطلاعات در مورد ویدیوی بعدی Info about next video

• کامپوننت چت کاربر را ایجاد کنید Create User Chat Component

• هدر را با استفاده از React Bootstrap ایجاد کنید Create The Header Using React Bootstrap

• نشان برای تعداد محصولات موجود در سبد خرید ایجاد کنید و لیست را برای دسته ها انتخاب کنید Create Badge for Number of Products in The Cart and Select List For Categories

• کامپوننت هدر را سفارشی کنید Customize Header Component

• کامپوننت پاورقی سبک Style Footer Component

• با استفاده از React Bootstrap کامپوننت‌های Carousel و Card را ایجاد کنید Create Carousel and Card Components using React Bootstrap

• صفحه اصلی را سفارشی کنید Customize the Home Page

• پاپ آپ چت – دایره آبی با نمادها Chat Popup – Blue Circle With Icons

• پنجره چت - ایجاد سربرگ Chat Popup – Create Header

• پاپ آپ چت – فیلد پیام و دکمه ارسال Chat Popup – Message Field and Submit Button

• پاپ آپ چت – نمونه ای از تاریخچه چت Chat Popup – Example Chat History

• صفحه فهرست محصولات را آماده کنید Prepare Product List Page

• ایجاد HTML برای سیستم رتبه بندی ستاره Create HTML for Star Rating System

• بهبود HTML برای مرتب سازی و فیلتر کردن محصولات Improve HTML for Sorting and Filtering Products

• بهبود کامپوننت برای فیلترهای دسته Improve Component for Category Filters

• بهبود بخش ویژگی ها برای فیلتر کردن گزینه ها Improve Attributes Section for Filtering Options

• بهبود مولفه برای لیست محصولات Improve Component for Product List

• بهبود مولفه صفحه بندی Improve Pagination Component

• ایجاد قابلیت اسکرول به بالا Create Scroll To Top Functionality

• صفحه جزئیات محصول را آماده کنید Prepare Product Details Page

• به توسعه صفحه جزئیات محصول ادامه دهید Continue Developing Product Details Page

• بهبود مولفه پیام Improve Message Component

• صفحه توضیحات محصول را به روز کنید Update Product Description Page

• بهبود بخش نظرات Improve Reviews Section

• ایجاد افکت شناور موس بر روی تصاویر Create Mouse Hover Effect on Images

• صفحه سبد خرید را آماده کنید Prepare Cart Page

• پایان صفحه سبد خرید Finish Cart Page

• صفحه ثبت نام را آماده کنید Prepare Register Page

• به توسعه صفحه ثبت ادامه دهید Continue Developing Register Page

• Finish Template for Register Page Finish Template for Register Page

• صفحه ورود را آماده کنید Prepare Login Page

• صفحه نمایه کاربر را آماده کنید Prepare User Profile Page

• صفحه سفارشات کاربر را آماده کنید Prepare User Orders Page

• پایان صفحه سفارشات کاربر (الگو در حال حاضر) Finish User Orders Page (template for now)

• صفحه برای جزئیات سفارش کاربر The Page for User Order Details

• پایان صفحه جزئیات سفارش کاربر Finish User Order Details Page

• صفحه را برای جزئیات سبد خرید آماده کنید Prepare the Page for User Cart Details

• صفحه را برای سفارشات ادمین آماده کنید Prepare the Page for Admin Orders

• ایجاد کامپوننت برای لینک های مدیریت Create Component for Admin Links

• صفحه جزئیات سفارش ادمین را آماده کنید Prepare Admin Order Details Page

• ایجاد صفحه لیست محصولات برای مدیر Create Product List Page for Admin

• صفحه را برای ایجاد محصول توسط ادمین آماده کنید Prepare the Page for Creating The Product by Admin

• صفحه ایجاد محصول توسط ادمین را تمام کنید Finish the Page for Creating The Product by Admin

• ویرایش کامل صفحه محصول برای مدیر Complete Edit Product Page for Administrator

• ایجاد صفحه کاربران برای ادمین Create Users Page for Admin

• ایجاد صفحه ویرایش کاربران برای مدیریت Create Edit Users Page for Admin

• ایجاد صفحه چت برای مدیر Create Chats Page for Admin

• ایجاد کامپوننت چت برای مدیر Create Chat Component for Admin

• صفحه تجزیه و تحلیل را برای ادمین آماده کنید Prepare Analytics Page for Admin

• پایان صفحه تجزیه و تحلیل برای مدیر Finish Analytics Page for Admin

Node & Express به عنوان Backend Node & Express as a Backend

• سرور Express JS را برای Backend برنامه ما نصب کنید Install Express JS server for the Backend of our App

• Express Middleware Express Middleware

• برای ایجاد API آماده شوید Prepare for Creating API

• کنترلرها را در Express معرفی کنید Introduce Controllers in Express

• رسیدگی به خطاها در Express Handle Errors in Express

• میان افزار سفارشی برای رسیدگی به خطاها Custom Middleware to Handle Errors

MongoDB & Mongoose MongoDB & Mongoose

• معرفی و پیکربندی MongoDB MongoDB Introduction and Configuration

• Mongoose Introduction - با MongoDB ارتباط برقرار کنید Mongoose Introduction - Connect with MongoDB

• اولین عملیات پایگاه داده MongoDB First MongoDB Database Operation

• مدل محصول نهایی Finish Product Model

• محصول ممکن است نظرات زیادی داشته باشد Product May Have Many Reviews

• اطلاعات بیشتر درباره روابط پایگاه داده More About Database Relationships

• ایجاد نمایه در مدل محصول Create Indexes on Product Model

• اطلاعات بیشتر درباره شاخص های پایگاه داده More About Database Indexes

• ایجاد مدل دسته بندی Create Category Model

• مدل کاربر User Model

• مدل سفارش Order Model

• Seders را معرفی کنید Introduce Seeders

• بذرپاش برای محصولات Seeder for Products

• بذرپاش برای بررسی Seeder for Reviews

• افزودن نظرات ارتباط به مجموعه محصولات Add Reviews Relationship To Products Collection

• بذرپاش برای کاربران Seeder for Users

• بذرپاش برای سفارشات Seeder for Orders

API برای برنامه تجارت الکترونیکی MERN Stack ما API for Our MERN Stack E-commerce Application

• نقاط پایانی و کنترلرهای API را ایجاد کنید Create API Endpoints and Controllers

• تکمیل اولین نقطه پایانی API (GET) Complete First API Endpoint (GET)

• نقطه پایانی API برای ذخیره رده جدید API Endpoint for Saving New Category

• نقطه پایان API برای ذخیره رده جدید (POST) Finish API Endpoint for Saving New Category (POST)

• اطلاعات بیشتر درباره کدهای وضعیت پاسخ More About Response Status Codes

• API برای حذف دسته (DELETE) API for Deleting Category (DELETE)

• نقطه پایانی API برای ذخیره ویژگی های دسته API Endpoint for Saving Category Attributes

• نقطه پایانی API برای دریافت محصولات API Endpoint for Getting Products

• شروع به توسعه صفحه بندی کنید Start Developing Pagination

• پایان پرس و جو پایگاه داده برای صفحه بندی Finish Database Query for Pagination

• مرتب سازی محصولات Sort Products

• فیلتر کردن نتایج محصولات Filter Results of Products

• دریافت محصولات از دسته خاص (نوار جستجو) Get Products from Specific Category (search bar)

• دریافت محصولات از دسته خاص (صفحه فیلتر) Get Products from Specific Category (filtering page)

• دریافت محصولات بر اساس ویژگی ها Get Products by Attributes

• پرس و جو برای جستجوی محصولات از طریق جعبه جستجو Query for Searching Products Through Search Box

• دریافت محصول بر اساس شناسه Get Product By Id

• پرس و جو پایگاه داده برای پرفروش ها Database Query for Bestsellers

• دریافت اطلاعات محصولات برای مدیر Get Products Data for Admin

• نقطه پایانی API برای حذف محصول توسط مدیر API Endpoint for Deleting the Product by Admin

• ایجاد محصول توسط ادمین Create Product by Admin

• مدیر می تواند محصول را به روز کند Admin Can Update Product

• شروع به توسعه آپلود فایل کنید Start Developing File Upload

• اعتبارسنجی تصاویر Validate Images

• برای آپلود نهایی آماده شوید Prepare for Final Upload

• آپلود نهایی را انجام دهید Make Final Upload

• مسیر تصویر آپلود شده را ذخیره کنید Save the Path of Uploaded Image

• نقطه پایانی API برای حذف یک تصویر API Endpoint for Deleting an Image

• مسیر پایگاه داده تصویر حذف شده را حذف کنید Delete Database Path of Removed Image

• دریافت کاربران برای مدیریت Get Users for Admin

• ثبت نام کاربر جدید Register New User

• هش رمز عبور قبل از ذخیره در پایگاه داده Hash Password Before Saving To Database

• کوکی ایجاد کنید و آن را با The Response ارسال کنید Create Cookie and Send it with The Response

• از JsonWebToken برای احراز هویت و مجوز استفاده کنید Use JsonWebToken for Authentication and Authorization

• شروع به توسعه عملکرد ورود کنید Start Developing Login Functionality

• پایان فرآیند ورود Finish Login Process

• برای بررسی دسترسی به منابع میان افزار ایجاد کنید Create Middleware to Check Access to Resource

• برای بررسی دسترسی به منابع مدیریت، میان افزار ایجاد کنید Create Middleware to Check Access to Admin Resources

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

• واکشی داده های کاربر برای نمایه کاربر Fetch User Data for User Profile

• ایجاد نظر برای یک محصول Create Review for a Product

• مجموعه محصولات را با بررسی اضافه شده به روز کنید Update Products Collection by Added Review

• محصول را فقط یک بار برای هر کاربر مرور کنید Review Product Only Once per User

• تراکنش ها را برای بررسی معرفی کنید Introduce Transactions for Reviews

• دریافت اطلاعات کاربر برای به روز رسانی در پنل مدیریت Get User Data for Updating in the Admin Panel

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

• حذف کاربر Delete User

• نقطه پایانی API برای دریافت سفارش برای کاربر عادی API Endpoint for Getting Orders for Regular User

• دریافت جزئیات سفارش برای کاربر معمولی Get Order Details for Regular User

• یک سفارش ایجاد کنید Create an Order

• سفارشی که باید پرداخت شود را به روز کنید Update an Order To Be Paid

• به روز رسانی یک سفارش برای تحویل Update an Order To Be Delivered

• همه سفارشات را برای ادمین دریافت کنید Get All Orders for Admin

• دریافت سفارشات برای تجزیه و تحلیل Get Orders for Analysis

Frontent را با Backend متصل کنید Connect Frontent with Backend

• ایجاد اسکریپت برای اجرای Frontend و Backend بسیار ساده تر Create Scripts To Run Frontend and Backend Much Easier

• ایجاد دستور کنسول برای Seders Create Console Command for Seeders

• نمایش پیام های خطا در کنسول Display Error Messages in The Console

• Frontend را با Backend متصل کنید Connect Frontend With The Backend

حالت محلی در کامپوننت های React Local State in React Components

• صفحه کاربران را به دو فایل تقسیم کنید: Component و Page Divide Users Page to Two Files: Component and Page

• حالت محلی را برای مؤلفه React مدیریت کنید Manage Local State for The React Component

• از Local State برای ذخیره کاربران استفاده کنید Use Local State for Storing Users

• هنگام خروج از صفحه، اتصال پایگاه داده را قطع کنید Disconnect Database Connection When Leaving The Page

• نمایش کاربران در صفحه Show Users On The Page

• حذف کاربر از لیست Delete User From The List

• نمایش لیست محصولات Display The List of Products

• حذف محصول از لیست Delete Product From The List

• دریافت سفارش برای پنل مدیریت Get Orders for Admin Panel

• نمایش سفارشات برای پنل مدیریت Display Orders for Admin Panel

• نمایش صفحه جزئیات سفارش Display Order Details Page

• فراخوان API برای جزئیات سفارش API Call For Order Details

• نمایش داده های پویا برای صفحه جزئیات سفارش Display Dynamic Data for Order Details Page

• نمایش اقلام سبد خرید در صفحه جزئیات سفارش Display Cart Items on Order Details Page

• سفارش را به عنوان تحویل علامت گذاری کنید Mark The Order as Delivered

• رفع مولفه مورد سبد خرید Fix Cart Item Component

Redux برای دولت جهانی - مقدمه Redux for Global State - Introduction

• نصب و معرفی Redux Redux Install and Introduction

• برنامه افزودنی Redux Devtools را نصب کنید Install Redux Devtools Extension

• Redux را به کنش ها، ثابت ها و کاهنده ها سازماندهی کنید Organize Redux to Actions, Constants and Reducers

• داده ها را از Redux State بخوانید Read Data From Redux State

سیستم ورود و ثبت نام و مجوز Login and Registration System & Authorization

• شروع به توسعه صفحه ورود کنید Start Developing Login Page

• اطلاعات ایالت ورود Login State Info

• تغییر مسیر پس از فرآیند ورود Redirect After Login Process

• ذخیره کاربر وارد شده در Redux Global State Save Logged In User in Redux Global State

• برای ذخیره حالت اولیه Redux از حافظه محلی استفاده کنید Use Local Storage To Store Initial Redux State

• پایان سیستم ورود Finish Login System

• ایجاد عملکرد خروج Create Logout Functionality

• ثبت نام کاربر جدید Register New User

• هنگام ثبت نام کاربر جدید، اسپینر و پیام ها را کنترل کنید Control the Spinner and Messages while Registering New User

• هر دو کلمه عبور باید مطابقت داشته باشند Both Passwords Should Match

در حال توسعه صفحات برای برنامه تجارت الکترونیکی MERN Stack Developing Pages for MERN Stack E-commerce Application

• اطلاعات کاربر در سربرگ User Info in The Header

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

• پیام های اطلاعات برای صفحه نمایه کاربر Info Messages for User Profile Page

• هر دو رمز عبور باید مطابقت داشته باشند Both Password Should Match

• واکشی داده های کاربر برای ویرایش صفحه نمایه Fetch User Data for Editing Profile Page

• هنگام به روز رسانی کاربر، وضعیت Redux و حافظه محلی را به روز کنید Update Redux State and Local Storage When Updating the User

• فراخوان API برای همه محصولات API Call For All Products

• نمایش محصولات در صفحه اصلی Show Products on The Main Page

• شروع به توسعه صفحه جزئیات محصول کنید Start Developing Product Details Page

• ادامه صفحه جزئیات محصول Continue Product Details Page

• عملکرد Handler را برای افزودن به سبد خرید آماده کنید Prepare Handler Function for Adding To The Cart

• محصول اضافه شده به سبد خرید را برای Redux آماده کنید Prepare Product Added To Cart For Redux

• به آماده سازی محصول اضافه شده به سبد خرید برای Redux ادامه دهید Continue Preparing Product Added To Cart For Redux

• محاسبات نهایی اقلام سبد خرید را انجام دهید Make Final Cart Items Calculations

• اقلام سبد خرید را در محل ذخیره سازی ذخیره کنید Store Cart Items in Local Storage

• پیام های اطلاعاتی هنگام افزودن به سبد خرید Info Messages when Adding To The Cart

• شروع به توسعه صفحه سبد خرید کنید Start Developing Cart Page

• نمایش اقلام سبد خرید از ایالت Redux Display Cart Items From The Redux State

• هندلر را برای خارج کردن از سبد خرید آماده کنید Prepare The Handler for Removing from The Cart

• پایان حذف از سبد خرید Finish Removing From Cart

• صفحه جزئیات سبد خرید کاربر User Cart Details Page

• اطلاعات سبد خرید کامل برای صفحه جزئیات سبد کاربر Complete Cart Data for User Cart Details Page

• اطلاعات کاربر در صفحه جزئیات سبد خرید User Info On Cart Details Page

• دکمه غیر فعال کردن صفحه جزئیات سبد خرید Disable Button On Cart Details Page

• تنظیم اطلاعات آدرس گمشده در صفحه جزئیات سبد خرید Set Missing Address Info On Cart Details Page

• داده های سفارش را آماده کنید Prepare Order Data

• داده های سفارش را در پایگاه داده ذخیره کنید Save Order Data in The Database

• صفحه جزئیات سفارش کاربر User Order Details Page

• نمایش داده های کاربر در صفحه جزئیات سفارش کاربر Display User Data On User Order Details Page

• دریافت اطلاعات سفارش برای صفحه جزئیات سفارش کاربر Get Order Data for User Order Details Page

• تنظیم پیام ها پس از ثبت سفارش Set Messages After Placing an Order

• لیست تمام اقلام سبد خرید در صفحه جزئیات سفارش کاربر List All Cart Items On User Order Details Page

• Handler را برای ثبت سفارش آماده کنید Prepare Handler for Placing the Order

• برای صفحه جزئیات سفارش پی پال را نصب کنید Install PayPal for Order Details Page

• رندر دکمه های پی پال Render PayPal Buttons

• روش های دکمه پی پال را ایجاد کنید Create PayPal Button Methods

• عملکرد پی پال کامل برای ایجاد سفارش (پرداخت) Complete PayPal Function To Create Order (Payment)

• برای تأیید سفارش، عملکرد PayPal را ادامه دهید Continue PayPal Function To Approve Order

• برای تأیید سفارش 2، عملکرد PayPal را ادامه دهید Continue PayPal Function To Approve Order 2

• صفحه سفارشات کاربر را شروع کنید Start User Orders Page

• نمایش سفارشات کاربر Show User Orders

• فایل های Redux را برای دسته ها ایجاد کنید Create Redux Files for Categories

• ویرایش صفحه محصول – فهرست دسته ها Edit Product Page – List Categories

• ویرایش صفحه محصول - دریافت اطلاعات محصول Edit Product Page – Get Product Data

• پر کردن فیلدهای فرم برای ویرایش صفحه محصول Fill Form Fields for Edit Product Page

• همه فیلدهای فرم را برای ویرایش صفحه محصول بگیرید Grab All The Forms Fields for Edit Product Page

• ویرایش محصول Edit Product

• نمایش ویژگی ها برای ویرایش صفحه محصول Display Attributes for Edit Product Page

• دریافت مقادیر برای ویژگی انتخاب شده Get Values For Selected Attribute

• کنترل تغییر دسته در ویرایش صفحه محصول Handle Changing Category on Edit Product Page

• ویژگی های محصول در ویرایش صفحه محصول Attributes for Product on Edit Product Page

• ایجاد تابع Wrapper برای جدول ویژگی ها Create Wrapper Function for Attributes Table

• صفت را از جدول حذف کنید Delete Attribute from The Table

• دسته بندی را برای محصول ویرایش شده تنظیم کنید Set Category for Edited Product

• هنگام افزودن ویژگی از ارسال فرم جلوگیری کنید Prevent Submitting the Form When Adding Attribute

• اگر مقدار خالی است، فیلد کلید ویژگی را غیرفعال کنید Deactivate Attribute Key Field if Value is Empty

• پایان جدول ویژگی ها برای ویرایش صفحه محصول Finish Attributes Table for Edit Product Page

• ذخیره ویژگی در مجموعه دسته‌ها Save Attribute to Categories Collection

• حذف مسیر تصویر در ویرایش صفحه محصول Delete Image Path On Edit Product Page

• آپلود تصاویر Upload Images

• ایجاد صفحه محصول - شروع Create Product Page - Start

• درخواست API برای ایجاد یک محصول API Request For Creating a Product

• ایجاد صفحه محصول – درخواست API Create Product Page – API Request

• آپلود تصاویر در Clodinary Upload Images To Cloudinary

• مسیر تصویر ابری را در پایگاه داده ذخیره کنید Save Cloudinary Image Path in the Database

• مسیر تصویر را از Clodinary حذف کنید Delete Image Path from Cloudinary

• Refactoring کد Code Refactoring

• ایجاد دسته جدید Create New Category

• فراخوانی Api برای رده جدید Api Call for New Category

• حذف دسته Delete Category

• Refactoring کد Code Refactoring

• به بازآفرینی کد ادامه دهید Continue Code Refactoring

• کد دیگر Refactoring Another Code Refactoring

• حذف ویژگی برای ایجاد صفحه محصول Delete Attribute for Create Product Page

• ذخیره ویژگی در سند دسته‌ها Save Attribute to Categories Document

• صفحه ایجاد محصول را تمام کنید Finish Create Product Page

• ویرایش صفحه کاربر را شروع کنید Start Edit User Page

• دریافت اطلاعات کاربر برای ویرایش Get User Data for Editing

• کاربر را به روز کنید Update The User

• دریافت جزئیات محصول Get Product Details

• دریافت تصاویر در صفحه جزئیات محصول Get Images on Product Details Page

• در صفحه جزئیات محصول نظرات را دریافت کنید Get Reviews on Product Details Page

• Handler را برای ارسال نظرات آماده کنید Prepare The Handler for Sending Reviews

• نظر محصول را بنویسید Write Product Review

• نوار اسکرول را به پایین حرکت دهید Move Scrollbar Down

• صفحه فهرست محصولات Products List Page

• صفحه اصلی را اصلاح کنید Modify Home Page

• ویژگی های دسته انتخابی Attributes for Chosen Category

• ویژگی های محصول انتخابی را جمع آوری کنید Collect Chosen Product Attributes

• آرایه با ویژگی های انتخاب شده Array With Chosen Attributes

• دکمه استراحت فیلترها Rest Filters Button

• فیلتر قیمت Price Filter

• فیلتر رتبه بندی Rating Filter

• فیلتر دسته ها Categories Filter

• تعداد شناسه دسته‌های انتخابی را جمع‌آوری کنید Collect id Numbers of Selected Categories

• دسته‌های غیر مرتبط را غیرفعال کنید Make Non Related Categories Disabled

• واکشی ویژگی‌ها برای دسته علامت‌گذاری شده Fetch Attributes for Checked Category

• کنترل نمایان بودن دسته ها در نوار فیلتر Control Visibility of Categories Section on Filter Bar

• گزینه های مرتب سازی را آماده کنید Prepare Sort Options

• صفحه بندی را آماده کنید Prepare Pagination

• ادامه صفحه بندی (فقط قسمت جلویی) Continue Pagination (frontend part only)

• صفحه بندی – قسمت Backend Pagination – Backend Part

• فیلتر محصولات Filter Products

• دسته بندی ها در سربرگ Categories in The Header

• Handler را برای فرم جستجو آماده کنید Prepare The Handler for Search Form

• هنگام جستجوی محصولات به سمت اصلاح مسیرها بروید Navigate To Correct Routes While Searching Products

• پرفروش‌ها - درخواست API ایجاد کنید Bestsellers – Make API Request

• پرفروش‌ها را تمام کنید Finish Bestsellers

• تزریق وابستگی و اجزای نمایشی Dependency Injection & Presentational Componnts

سیستم تجزیه و تحلیل - نمودارهای زمان واقعی با استفاده از SocketIO برای برنامه پشته MERN Analytics System - Real Time Charts using SocketIO for MERN Stack Application

• صفحه تجزیه و تحلیل Analytics Page

• واکشی اطلاعات سفارشات برای دو تاریخ Fetch Orders Data for Two Dates

• شی جاوا اسکریپت را برای نمودار آماده کنید Prepare JavaScript Object for Chart

• رسم نمودارها Draw Charts

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

• آماده سازی هندلر برای شنیدن رویداد از سوکت Preparing The Handler For Listening Event From Socket

• پایان صفحه تجزیه و تحلیل فروش Finish Sales Analytics Page

چت با استفاده از SocketIO برای برنامه پشته MERN Chat Using SocketIO for MERN Stack Application

• ارسال پیام سوکت از مشتری به سرور Send Socket Message From Client To Server

• پیام چت کاربر را در چت باکس قابل مشاهده کنید Make User Chat Message Visible in Chat Box

• ادمین پیام چت را دریافت می کند Admin Receives Chat Message

• Redux برای چت Redux For Chat

• جعبه چت برای مدیر Chat Box For Admin

• مدیر می تواند چت باکس را ببندد Admin Can Close Chatbox

• نمایش پیام چت از مشتری Display Chat Message from Client

• نمایش متن نوشته شده توسط Admin در Chatbox Admin Display Text Written by Admin in the Admin Chatbox

• نوار اسکرول چت روم را بهبود بخشید Improve ChatRoom ScrollBar

• ارسال پیام از ادمین به مشتری Send Message From Admin To Client

• دایره قرمز به عنوان اطلاعاتی که پیام چت جدید می رسد Red Circle As Information that New Chat Message Arrives

• برای مدیر - دایره قرمز به عنوان اطلاعاتی که پیام چت جدید می رسد For Admin - Red Circle As Information that New Chat Message Arrives

• صدا به عنوان اطلاعاتی که پیام چت جدید می رسد Sound As Information that New Chat Message Arrives

• برای مدیر - صدا به عنوان اطلاعاتی که پیام چت جدید می رسد For Admin - Sound As Information that New Chat Message Arrives

• جمع آوری مدیران در سرور سوکت Collect Admins In Socket Server

• یک به یک ارتباط One To One Communication

• ارتباط کلاینت از چت قطع شد Client Disconnected from Chat

• کلاینت از چت قطع شد – قسمت 2 Client Disconnected from Chat – part 2

• کارکرد چت را تمام کنید Finish Chat Functionality

برنامه MERN Stack را در سرور زنده مستقر کنید Deploy MERN Stack Application to Live Server

• بسته SEO Helmet را نصب کنید Install Helmet SEO Package

• بسته کلاه ایمنی را نصب کنید Install Helmet Package for Security

• درباره خدمات رایگان Heroku About Heroku Free Services

• برای استقرار در هروکو آماده شوید Prepare for Deploying To Heroku

• اعزام به Heroku Deploy To Heroku

• مستقر در Render.com Deploy To Render.com

برنامه MERN Stack را با استفاده از Jest Framework آزمایش کنید Test MERN Stack App using Jest Framework

• نمونه تست های جست را ایجاد کنید Create Example Jest Tests

• نمونه تست React Component با استفاده از Jest and Testing Library Test Example React Component using Jest and Testing Library

• تست مؤلفه صفحه اصلی Test HomePage Component

• توابع ساختگی Redux Mock Redux Functions

• تست مؤلفه صفحه ورود به سیستم Test Login Page Component

• تست صفحه اصلی با استفاده از jest.mock() Test Home Page using jest.mock()

• از Jest برای The Backend استفاده کنید Use Jest for The Backend

• تست اسنپ شات ایجاد کنید Create Snapshot Test

• پوشش کد Code Coverage

• کد منبع کامل برنامه Full source code of the app