آموزش با این دوره از Jobs به عنوان توسعه دهنده پشته MERN استفاده کنید

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

اصول React JS Fundamentals of React JS

• بررسی اجمالی دوره Course Overview

• مربی خود را بشناسید و کمک/پشتیبانی دریافت کنید Know Your Instructor & Get Help/Support

• معرفی ReactJS و راه اندازی محیط ReactJS introduction and environment setup

• ایجاد اپلیکیشن react create react app

• گردش برنامه و فایل های پروژه program flow and project files walkthrough

• انواع اجزا در واکنش types of components in react

• ایجاد و استفاده از اولین جزء کاربردی creating and using 1st functional component

• ایجاد 1st stateful componentcreatin creating 1st stateful class componentcreatin

• جزء کاربردی ES6، صادرات و واردات ES6 functional component, export and import

• مقایسه بین جزء عملکردی و کلاسی comparision between functional and class component

• react hooks intro react hooks intro

• jsx توضیح داد jsx explained

• props در جزء عملکردی و کلاسی props in functional and class component

• حالت در مقابل وسایل state vs props

• شیرجه عمیق به setState deep dive into setState

• فرم مدیریت در جزء کلاس جزء 1 Handling form in class component part-1

• فرم رسیدگی در جزء کلاس 2 Handling form in class component part-2

• روش بارگذاری چرخه حیات componentDidMount componentDidMount lifecycle onload method

API Backend برای ورود و ثبت نام: پروژه پشته MERN درجه تولید Backend API for Login & Signup: Production Grade MERN stack project

• 1.1-محیط محلی را راه اندازی کنید 1.1-Setup local environment

• راه اندازی باطن nodejs API Setup backend nodejs API

• میان افزار چیست what is middleware

• راه اندازی ابر MongoDB رایگان Setup free cloud MongoDB

• ذخیره سازی و صادرات پیکربندی Storing and exporting configuration

• راه اندازی UserModel با mongoose Setting up UserModel with mongoose

• راه اندازی روتر 1 و مسیر 1 Setting up 1st router and 1st route

• ایجاد Registration REST API Creating Registration REST API

• ذخیره کاربر در پایگاه داده Saving user in the database

• رمزگذاری رمز عبور قبل از ذخیره Encrypting password before saving

• پیاده سازی Login API Implementing Login API

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

• پیاده سازی میان افزار برای مسیرهای محافظت شده Implementing middleware for protected routes

Backend API برای کاربر POST: پروژه پشته MERN درجه تولید Backend API for user POST: Production Grade MERN stack project

• راه اندازی مدل پست با مونگوس Setting up Post model with mongoose

• تنظیم مسیر برای پست Setting up route for Post

• در حال پیاده سازی ایجاد API پست Implementing create post API

• در پاسخ رمز عبور را برنگردانید Do not return password in response

• دریافت همه پست ها برای همه کاربران Get all posts for all users

• دریافت همه پست‌ها برای کاربر فعلی که وارد شده است Get all posts for current logged-in user

راه‌اندازی بخش ظاهری React env و طرح‌بندی توسعه: پروژه پشته MERN درجه تولید Setup frontend React env & develop layout: Production Grade MERN stack project

• راه اندازی محیط frontend با React Setting up frontend environment with React

• Materialize css را اضافه کنید و روی NavBar کار کنید Add Materialize css and work on NavBar

• پسوند React VSC و سبک NavBar را اضافه کنید Add React VSC extension and further style NavBar

• به روز رسانی درباره React-Router-Dom - V6 Update About React-Router-Dom - V6

• افزودن صفحات و مسیریابی Adding pages and routing

• توقف بازخوانی صفحه با تگ LINK Stopping page refresh with LINK tag

• اضافه کردن فونت های گوگل و سبک سفارشی Adding google fonts and custom style

• کار بر روی صفحه ورود Working on Login screen

• کار بر روی صفحه ثبت نام Working on Signup screen

• کار با صفحه پروفایل Working with profile page

• کار با بخش گالری صفحه پروفایل Working with profile page gallery section

یکپارچه سازی Frontend و Backend Integrating Frontend & Backend

• کار در بخش پست صفحه اصلی Working on Homepage Post section

• بهبود بخش پست صفحه اصلی Enhancing Homepage post section

• کار بر روی صفحه ایجاد پست Working on Create Post page

• افزودن مسیریابی ایجاد پست و استایل بیشتر به آن Adding create post routing and further styling it

• یک ظاهر طراحی بیشتر صفحه ایجاد پست Futher styling create-post page

• اجرای Frontend و Backend با هم Running Frontend and Backend together

• اضافه کردن متغیرهای حالت به صفحه ثبت نام Adding state variables to signup page

• اتصال فرم ثبت نام به Backend Registration API Connecting Signup form to Backend Registration API

• حل مشکل CORS Solving CORS issue

• برای خطا پیام Toast را در frontend اضافه کنید Add Toast message on frontend for error

• یک ظاهر طراحی بیشتر پیام Toast برای خطا Further styling the Toast message for error

• پس از ثبت نام موفق، کاربر را به صفحه ورود هدایت کنید Navigate user to login page after successful registration

• اعتبار سنجی ورودی فرم Form input validation

• ادغام صفحه ورود به سیستم با API ورود به سیستم Integrating Login page with backend Login API

ذخیره سازی ابری و Redux Cloud storage & Redux

• غنی سازی Login API برای دریافت اطلاعات بیشتر کاربر Enriching Login API to get more user information

• ذخیره سازی ابری رایگان را برای ذخیره تصاویر تنظیم کنید Setup free cloud storage for storing images

• اضافه کردن متغیرهای حالت برای ایجاد صفحه پست Adding state variables to create post screen

• بارگذاری تصویر پست در فضای ذخیره سازی ابری Uploading Post image to cloud storage

• به روز رسانی backend create-post api برای ذخیره url تصویر پست Updating backend create-post api for storing post image url

• ذخیره اطلاعات کاربر وارد شده در فضای ذخیره سازی محلی Storing loggedin user info in local storage

• ذخیره پست جدید با برقراری تماس API Saving new post by making API call

• آزمایش از پایان به انتها عملکرد جدید پست ایجاد می کند Testing create new post functionality end to end

• راه اندازی Reducer and Context API برای اشتراک گذاری و مدیریت حالت قسمت 1 Setup Reducer and Context API for state sharing and management Part-1

• تنظیم Reducer and Context API برای اشتراک گذاری و مدیریت حالت Part-2.mp4 Setup Reducer and Context API for state sharing and management Part-2.mp4

• رفع خطا Fixing error

• یک ظاهر طراحی غنی برای صفحه اصلی Enriching styling for home page

• پنهان کردن و نمایش موارد منو بر اساس وضعیت ورود کاربر Hide and Show menu items based on user loggedin state

• بارگیری پست های صفحه اصلی از API باطن Loading home page posts from backend API

قابلیت لایک، عدم دوست داشتن، نظر، حذف، خروج Like, Unlike, Comment, Delete, Logout functionality

• پیاده سازی عملکرد خروج Implementing Logout functionality

• واکشی داده‌های صفحه نمایه از API پشتیبان Fetching Profile page data from backend API

• پیاده سازی Like Post API در Backend Implementing Like Post API in Backend

• پیاده سازی UnLike Post API در Backend.mp4 Implementing UnLike Post API in Backend.mp4

• پیاده سازی Like و Unlike در فرانت اند و ادغام در بک اند Implementing Like and Unlike on frontend and integrate to backend

• بازخوانی تعداد لایک و عدم پسند Refresh Like and Unlike count

• محدود کردن کاربر به لایک و لایک کردن فقط یک بار در هر پست Restricting user to like and unlike only once per post

• پیاده سازی Backend API برای نظر Implementing Backend API for Comment

• ادغام frontend با backend comment API Integrate frontend with backend comment API

• 12.6-نمایش نظرات در frontend 12.6-Showing comments on frontend

• API برای حذف پست API for Delete Post

• ادغام frontend با باطن Delete Post API Integrate frontend with backend Delete Post API

• عملکرد را تست کنید Test the functionality

نمایه دیگران و دنبال کردن، لغو دنبال کنید Other's Profile & Follow, Unfollow

• API برای دیدن پست از کاربران مختلف API for seeing Post from different user

• Frontend for Other صفحه نمایه کاربر قسمت-1 Frontend for Other user profile page Part-1

• به صفحه نمایه کاربر دیگر بروید Navigate to Other user profile page

• ایجاد Follow Unfollow Backend API Create Follow Unfollow backend API

• تغییرات Frontend برای Follow Frontend changes for Follow

• به روز رسانی محل ذخیره سازی با اطلاعات زیر Updating localStorage with following information

• در حال به‌روزرسانی وضعیت ظاهری با اطلاعات زیر Updating frontend state with following info

• پیاده سازی منطق unfollow در فرانت اند Implementing unfollow logic on frontend

• اطلاعات نمایه کاربر را پویا کنید Make the user profile info dynamic

• نمایش اطلاعات اضافی در صفحه نمایه کاربر Showing extra info on user profile page

• API برای ارسال از دنبال کنندگان من API for Post from my followings

• تغییرات رابط کاربری برای پست از دنبال کنندگان من - قسمت -1 UI changes for post from my followings - Part -1

• تغییرات رابط کاربری برای پست از دنبال کنندگان من - قسمت 2 UI changes for post from my followings - Part 2

• رفع اشکال برای دنبال کردن لغو فالو Bug fix for follow unfollow

• کار بر روی عکس نمایه کاربر Working on user profile picture

• نمایش تصویر کاربر در کنار نام کاربری در پست Showing user pic along side user name on Post

کد منبع پروژه Project Source Code

• کد منبع Frontend Frontend source code

• کد منبع پشتیبان Backend source code