آموزش ایجاد Twitch Clone - دوره کاربردی MERN Stack

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

پیش نمایش و معرفی تئوری برنامه App Preview and Theory Introduction

• پیش نمایش برنامه Application Preview

• معماری Architecture

• MongoDB - پایگاه داده NoSQL MongoDB - NoSQL Database

• چارچوب برنامه وب Express - Node.js Express - Node.js web application framework

• React - کتابخانه سمت مشتری React - Client Side Library

• Node.js - سمت سرور Node.js - Server Side

• Socket.IO - ارتباط بیدرنگ Socket.IO - Realtime Communication

• مزایای پشته MERN MERN Stack Advantages

ایجاد سرور اکسپرس Creating Express Server

• نصب Node.js Node.js installation

• مقداردهی اولیه پروژه Project initialization

• نصب وابستگی ها Installing dependencies

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

• کد بخش کامل Complete Section Code

مسیرهای احراز هویت Authentication Routes

• ایجاد مسیرهای احراز هویت Creating Auth Routes

• تست مسیرهای احراز هویت با پستچی Testing Authentication Routes with Postman

• کنترل کننده های احراز هویت Authentication Controllers

• میان افزار اعتبار سنجی Validation middleware

• اعتبار سنجی با Joi Validation with Joi

اتصال MongoDB MongoDB Connection

• ایجاد پایگاه داده MongoDB Creating MongoDB Database

• ارتباط با پایگاه داده Connecting with Database

• ذخیره داده ها در پایگاه داده Saving Data in Database

• کد بخش کامل Complete Section Code

پیاده سازی احراز هویت JWT Implementing JWT Authentication

• مقدمه ای بر JWT Introduction to JWT

• رمزگذاری رمز عبور کاربر Encrypting User Password

• صدور توکن JWT Issuing JWT Token

• ثبت نام آزمون Testing Registration

• ایجاد منطق ورود Creating Login Logic

• تست عملکرد ورود Testing Login Funcionallity

• کد بخش کامل Complete Section Code

ایجاد React Application با Authentication Form Creating React Application with Authentication Form

• معرفی ماژول Module Introduction

• ساخت React Application Creating React Application

• پاکسازی پروژه اولیه Clean up of initial project

• بسته مسیریابی ,,react-router-dom”. Routing ,,react-router-dom" package

• ایجاد اولین مؤلفه ها Creating first components

• ساختار اولیه فرم ورود Login Form Basic Structure

• جزء لوگو Logo Component

• ایجاد کامپوننت ورودی قابل استفاده مجدد Creating Reusable Input Component

• مدیریت تغییرات ارزش ورودی Handling Input Value Changes

• ایجاد توابع اعتبار سنجی Creating Validation Functions

• اتصال اعتبارسنجی با فرم ما Connecting validation with our Form

• فرم ثبت نام Registration Form

• آماده شدن برای درخواست های HTTP Preparing for HTTP requests

• ایجاد قلاب useLogin Creating useLogin hook

• ایجاد useRegister hook Creating useRegister hook

• اعلان‌ها،، react-hot-toast" Notifications ,,react-hot-toast"

• تست فرم های احراز هویت Testing Auth Forms

• کد بخش کامل Complete Section Code

سمت سرور - ایجاد مسیرها Server Side - Creating Routes

• مسیرها - معرفی ماژول Routes - Module Introduction

• تهیه مدل های پایگاه داده Preparing Database Models

• ایجاد سند کانال با ثبت نام Creating Channel Document with Registration

• کدام مسیرها باید ایمن شوند؟ (JWT) Which Routes should be secured ? (JWT)

• جزئیات کانال Channel Details

• واکشی داده های کانال واقعی از DB Fetching Real Channel Data from DB

• واکشی کانال ها Fetching Channels

• احراز هویت میان‌افزار - تأیید اعتبار توکن JWT Authentication Middleware - validating JWT Token

• مسیر تنظیمات کانال را دریافت کنید Get Channel Settings Route

• واکشی تنظیمات از DB Fetching Settings from DB

• به روز رسانی مسیر تنظیمات کانال Updating Channel Settings Route

• حل اشکال - پرس و جو DB داده های قدیمی را برمی گرداند Solving bug - DB query returns old data

• تغییر رمز عبور مسیر Route Change Password

• تست تغییر مسیر رمز عبور Testing Change Password Route

• مسیر کانال را با تست دنبال کنید Follow Channel Route with Testing

• مسیر دریافت کانال های دنبال شده Route Get Followed Channels

• کد بخش کامل Complete Section Code

سمت مشتری - ایجاد داشبورد Client Side - Creating Dashboard

• پیش نمایش داشبورد Dashboard Preview

• تنظیمات روتر Router Adjustments

• اجزای داشبورد Dashboard Components

• ایجاد نوار ناوبری Creating Navbar

• فهرست رندر کانال های دنبال شده Rendering List of Followed Channels

• مسیریابی تودرتو Nested Routing

• رندر کانال ها Rendering Channels

• رندر نمای کانال Rendering Channel View

• توضیحات نمای کانال Channel View Description

• صفحه تنظیمات - کلید جریان Settings Page - Stream key

• Auth Input Refactor Auth Input Refactor

• آماده سازی فرم تنظیمات کانال Preparing Channel Settings Form

• اعتبار سنجی برای تنظیمات کانال Validators for Channel Settings

• رندر ورودی ها از طریق نقشه برداری Rendering inputs through mapping

• کنترل کننده های فرم Form Handlers

• دکمه فرم Form Button

• تغییر فرم رمز عبور Change Password Form

• کد بخش کامل Complete Section Code

اتصال داشبورد مشتری با API Connecting Client Dashboard with API

• قلاب اطلاعات کاربر User Details hook

• پیمایش بین صفحات Navigating between Pages

• مدیریت عملکرد خروج Handling logout Functionality

• استفاده از قلابChannelSettings useChannelSettings hook

• بارگیری Spinner با واکشی داده های تنظیمات Loading Spinner with Fetching Settings Data

• اشکال زدایی کار نمی کند مسیر تنظیمات کانال Debugging not working Channel Settings Route

• پیوست کردن رمز به درخواست ها Attaching Token to the Requests

• ذخیره تنظیمات کانال Saving Channel Settings

• اعتبار سنجی تنظیمات کانال Channel Settings Validation

• استفاده از قلاب ChangePassword useChangePassword hook

• واکشی قلاب کانال ها Fetching Channels Hook

• فیلتر کردن آرایه کانال ها Filtering Channels Array

• آماده شدن برای ارائه کانال های واقعی Preparing to render real Channels

• نمایش کانال های واقعی دنبال شده Displaying Real Followed Channels

• صفحه کانال Channel Page

• واکشی جزئیات کانال Fetching Channel Details

• نمایش جزئیات کانال Displaying Channel Details

• رندر کردن دکمه دنبال کردن Rendering Follow Button

• دنبال کردن کانال Following Channel

• بازیابی مجدد کانال های دنبال شده Refetching Followed Channels

• رفع اشکال با واکشی مجدد Fixing Bug with Refetching

• کد بخش کامل Complete Section Code

OBS با سرور RTMP - اتصال جریان ها OBS with RTMP Server - Connecting Streams

• RTMP - مقدمه تئوری RTMP - Theory Introduction

• معرفی بسته Node-Media-Server Node-Media-Server package Introduction

• راه اندازی سرور رسانه Starting Media Server

• معرفی سریع OBS OBS Quick Introduction

• پخش جریانی از OBS به سرور رسانه Streaming from OBS to Media Server

• نمایش جریان از سرور رسانه Displaying Stream From Media Server

• ارسال URL جریان صحیح برای هر کانال Passing Correct Stream URL for every Channel

• رفع اشکال با شناسه کانال Fixing Bug With Channel Id

• بررسی آنلاین بودن کانال Checking if Channel is Online

• کانال ها - وضعیت آنلاین Channels - Online Status

• کد بخش کامل Complete Section Code

با Socket.IO چت کنید Chat with Socket.IO

• ایجاد اجزای چت Creating Chat Components

• کانتینر پیام ها Messages Container

• ورودی پیام جدید New Message Input

• مقدمه ای بر Socket.IO Introduction to Socket.IO

• اتصال با Socket.IO از سمت کلاینت Connecting with Socket.IO from Client Side

• آماده سازی رویداد برای تاریخچه چت در سمت سرور Preparing Event for Chat History at Server Side

• دریافت تاریخچه چت در سمت مشتری Getting Chat History at Client Side

• رفع اشکال با مدل Mongoose Fixing Bug with Mongoose Model

• ایجاد منطق ذخیره پیام ها Creating Logic of Saving Messages

• ارسال پیام چت به سرور Emitting Chat Message to Server

• اتاق های Socket.IO Socket.IO Rooms

• بستن اشتراک چت Closing Chat Subscription

• نصب Zustand (مدیریت دولتی جهانی) Zustand Installation (Global State Management)

• ارائه تاریخچه چت واقعی Rendering Real Chat History

• نمایش پیام جدید Displaying New Message

• برنامه کامل Complete Application