آموزش React Redux Ecommerce - Master MERN Stack Web Development

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

معرفی Introduction

• نسخه نمایشی زنده - کاربر و سبد خرید Live Demo - User and Cart

• نسخه نمایشی زنده - جستجو و فیلتر کردن Live Demo - Searching and Filtering

• نسخه نمایشی زنده - داشبورد رتبه بندی و مدیریت Live Demo - Rating and Admin Dashboard

• آیا برای این دوره آماده هستید؟ Are You Ready for this Course?

• نشانی وب نمایشی زنده تغییر کرد Live demo URL changed

• ساخت اپلیکیشن به صورت بصری Building the App Visually

• آیا با JavaScript React و NodeJs تازه کار هستید؟ Are you new to JavaScript React and NodeJs?

• مهم - بسته کد منبع را برای هر سخنرانی دانلود کنید IMPORTANT - Download Source Code Bundle for Each Lectures

React Client (Frontend) React Client (Frontend)

• مهم - این کار را برای رفع خطاهای آینده انجام دهید IMPORTANT - Do this to resolve future errors

• پروژه React را ایجاد کنید Create React Project

• نسخه روتر React React router version

• مسیرها و صفحات Routes and Pages

• ناوبری طراحی مورچه Ant Design Navigation

• نمادهای طراحی مورچه Ant Design Icons

• پیوند روتر React React Router Link

احراز هویت Firebase و Redux Firebase Authentication and Redux

• راهنمای ارتقا Firebase نسخه 9 Firebase version 9 upgrade guide

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

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

• پیوند ایمیل برای ورود به سیستم Email Link to Signin

• ENV و اعلان‌های نان تست ENV and Toast Notifications

• صفحه ثبت نام کامل Complete Registration Page

• ثبت نام کامل Complete Registration

• Redux را راه اندازی کنید Setup Redux

• کاربر در ایالت Redux User in Redux State

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

• صفحه ورود Login Page

• با ایمیل و رمز عبور وارد شوید Signin with Email and Password

• با گوگل وارد شوید Login with Google

• رندر مشروط Conditional Rendering

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

• تغییر مسیر کاربر وارد شده Redirect logged in user

Node MongoDB API (Backend) Node MongoDB API (Backend)

• Backend API با Node و MongoDB Backend API with Node and MongoDB

• بسته های NPM برای نصب NPM Packages to install

• مهم - این کار را برای رفع خطاها در آینده انجام دهید IMPORTANT - Do this to resolve errors in future

• نسخه Mongoose Mongoose version

• Mongo Atlas یا نصب محلی Mongo Atlas or Local Installation

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

• مسیرها Routes

• بارگذاری خودکار مسیرها Routes Autoloading

• کنترل کننده ها Controllers

• طرحواره کاربر User Schema

بررسی تأیید اعتبار Firebase (سمت سرور) Firebase Auth Check (Server side)

• Firebase Admin Firebase Admin

• میان افزار Middleware

• Auth Check Middleware Auth Check Middleware

مدیریت کاربر و مسیرهای محافظت شده User Admin and Protected Routes

• ایجاد یا به روز رسانی کاربر Create or Update User

• پاسخ کاربر API API User Response

• نقطه پایان کاربر فعلی Current User Endpoint

• تغییر مسیر مبتنی بر نقش Role Based Redirect

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

• تغییر مسیر شمارش معکوس Redirect Countdown

• نوار کناری برای کاربر Sidebar Nav for User

• به روز رسانی رمز عبور Password Update

• Admin Check Middleware Admin Check Middleware

• مسیر مدیریت Admin Route

• هشدارها و پاکسازی Warnings and Cleanup

• بعد چه می شود؟ What's Next?

دسته بندی ها CRUD Categories CRUD

• طرح واره دسته Category Schema

• دسته مسیرها Category Routes

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

• لیست دسته ها خواندن به روز رسانی حذف Category List Read Update Delete

• دسته درخواست های CRUD Category CRUD Requests

• لینک داشبورد پویا Dynamic Dashboard Link

• نوار کناری Admin Nav Admin Sidebar Nav

• ایجاد و فهرست کردن دسته Category Create and List

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

• به روز رسانی دسته Category Update

• بعد چه می شود؟ What's Next?

• کد Refactor - کامپوننت قابل استفاده مجدد Code Refactor - Reusable Component

• جستجوی دسته بندی فیلترها Search Filter Categories

• کد Refactor - فیلتر جستجو Code Refactor - Search Filter

زیر مجموعه های CRUD Sub Categories CRUD

• زیر مجموعه های CRUD Sub Categories CRUD

• توابع زیر مجموعه ها Sub Categories Functions

• ایجاد زیر مجموعه Sub Category Create

• نمایش زیر دسته ها و حذف Showing Sub Categories and Remove

• به روز رسانی زیر رده Sub Category Update

• بعد چه می شود؟ What's Next?

ایجاد محصولات با دسته ها و زیر مجموعه ها (پیشرفت) Creating Products with Categories and Sub Categories (Advance)

• نمونه محصول Product Model

• محصول ایجاد Backend Product Create Backend

• ایجاد صفحه محصول Create Product Page

• فرم ایجاد محصول Product Create Form

• ایجاد محصول Create Product

• هشدار و بارگذاری مجدد پس از ایجاد محصول Alert and Reload after Product Create

• پیام خطای ایجاد محصول Product Create Error Message

• GET Endpoint - محصولات GET Endpoint - Products

• Refactor کد Code Refactor

• ایجاد محصول با دسته Create Product with Category

• زیر دسته های نقطه پایانی Sub Categories Endpoint

• فهرست بندی زیر مجموعه ها بر اساس دسته بندی والدین List Sub Categories Based on Parent Category

• زیر مجموعه های لوازم Sub Categories Props

• طراحی مورچه چند انتخابی Multi Select Ant Design

• ایجاد محصول با زیر شاخه ها Create Product with Sub Categories

بارگذاری چند تصویر Multiple Image Uploads

• آپلود تصویر چگونه کار خواهد کرد؟ How Image Upload Will Work?

• نقاط پایانی بارگذاری ابری Cloudinary Upload Endpoints

• اجزای آپلود فایل File Upload Components

• تغییر اندازه فایل در React File Resize in React

• بارگذاری چند تصویر Multiple Image Uploads

• پیش نمایش تصویر Image Preview

• ایجاد محصول با تصاویر متعدد Product Create with Multiple Images

به روز رسانی و حذف محصولات (پیشرفت) Update and Delete Products (Advance)

• لیست تمام محصولات نقطه پایانی List All Products Endpoint

• همه محصولات را در داشبورد مدیریت واکشی کنید Fetch All Products in Admin Dashboard

• کارت مدیریت محصولات Admin Products Card

• سازمان کد Code Organization

• نمادهای مورچه تصویر پیش فرض و توضیحات محصول Default Image Ant Icons and Product Description

• نقطه پایانی حذف محصول Product Delete Endpoint

• حذف یک محصول Delete A Product

• صفحه به روز رسانی محصول Product Update Page

• Slug محصول از روتر Product Slug from Router

• دریافت محصول در صفحه به روز رسانی Get Product on Update Page

• جزء به روز رسانی محصول Product Update Component

• رنگ و نام تجاری حمل و نقل را از قبل پر کنید Pre Populate Shipping Color and Brand

• دسته بندی قبل از جمعیت Pre Populate Category

• قبل از پر کردن زیر دسته ها Pre Populate Sub Categories

• همگام سازی دسته و زیر مجموعه در به روز رسانی Category and Sub Category Sync on Update

• آپلود تصویر در به روز رسانی محصول Image Uploads in Product Update

• نقطه پایانی به روز رسانی محصول Product Update Endpoint

• به روز رسانی یک محصول Update A Product

نمایش صفحه بندی و چرخ فلک محصولات Displaying Products Pagination and Carousel

• واکشی محصولات در صفحه اصلی Fetch Products in Home Page

• جزء کارت محصول Product Card Component

• استفاده از کارت طراحی مورچه Using Ant Design Card

• جلوه ماشین تحریر Typewriter Effect

• در حال بارگیری کارت Loading Card

• فهرست محصولات با ترتیب مرتب سازی و محدودیت List Product with Sort Order and Limit

• تازه رسیده ها New Arrivals

• بهترین فروشندگان Best Sellers

• تعداد کل محصولات را دریافت کنید Get Total Products Count

• نقطه پایانی محصولات را با صفحه بندی فهرست کنید List Products Endpoint with Pagination

• صفحه بندی جدید ورود New Arrivals Pagination

• پرفروش ترین صفحه بندی Best Sellers Pagination

• مشاهده صفحه محصولات View Products Page

• جزء تک محصولی Single Product Component

• چرخ فلک تصویر Image Carousel

• تصویر پیش فرض Default Image

• جزء موارد فهرست محصولات Product List Items Component

• زبانه ها Tabs

سیستم رتبه بندی ستاره ها Star Rating System

• باطن سیستم رتبه بندی ستاره Star Rating System Backend

• React Star Rating React Star Rating

• مدال برای رتبه بندی Modal for Rating

• برای خروج از رتبه وارد شوید Login to Leave Rating

• تغییر مسیر به صفحه مورد نظر Redirect to Intended Page

• درخواست API با رتبه API Request with Rating

• نمایش رتبه بندی ستاره های موجود به کاربران Show Users Existing Star Rating

• نمایش میانگین رتبه Show Average Rating

• نمایش میانگین رتبه در صفحه اصلی Show Average Rating in Home Page

• محصولات مرتبط Backend Related Products Backend

• نمایش محصولات مرتبط Show Related Products

محصولات بر اساس دسته ها و زیر دسته ها Products based on Categories and Sub Categories

• فهرست دسته ها Categories List

• صفحه اصلی دسته Category Home Page

• دسته با محصولات پشتیبان Category with Products Backend

• صفحه دسته با محصولات Category Page with Products

• زیر مجموعه با محصولات Sub Categories with Products

جستجوی پیشرفته و فیلتر کردن (8 روش مختلف) Advance Searching and Filtering (8 Different Ways)

• مقدمه ای بر جستجو و فیلترینگ Introduction to Searching and Filtering

• جستجوی فیلتر پشتیبان Search Filter Backend

• جستجوی Redux Setup Search Redux Setup

• صفحه فروشگاه Shop Page

• جستجو بر اساس متن Search By Text

• فیلتر بر اساس محدوده قیمت باطن Filter By Price Range Backend

• فیلتر بر اساس محدوده قیمت Frontend Filter By Price Range Frontend

• فیلتر بر اساس دسته بندی ها باطن Filter By Categories Backend

• فیلتر بر اساس دسته بندی ها Frontend Filter By Categories Frontend

• فیلتر بر اساس باطن رتبه بندی ستاره Filter By Star Rating Backend

• فیلتر بر اساس رتبه بندی ستاره جلو Filter By Star Rating Frontend

• فیلتر بر اساس زیر دسته باطن Filter By Sub Category Backend

• فیلتر بر اساس زیر رده Frontend Filter By Sub Category Frontend

• فیلتر با ارسال رنگ و نام تجاری Filter By Shipping Color and Brand Backend

• فیلتر بر اساس برندهای فرانت اند Filter By Brands Frontend

• فیلتر بر اساس رنگ جلو Filter By Colors Frontend

• فیلتر با ارسال Frontend Filter By Shipping Frontend

به سبد خرید اضافه کنید Add to Cart

• آشنایی با افزودن به سبد خرید Introduction to Add To Cart

• محصول را به فضای ذخیره‌سازی محلی اضافه کنید Add Product to Local Storage

• راهنمای ابزار Tooltip

• سبد خرید در ایالت Redux Cart in Redux State

• ارسال اضافه به سبد خرید Dispatch Add To Cart

• راه اندازی صفحه سبد خرید Cart Page Setup

• خلاصه سفارش صفحه سبد خرید Cart Page Order Summary

• پس از ورود به صفحه سبد خرید تغییر مسیر دهید Redirect Back to Cart Page After Login

• اقلام سبد خرید در جدول Cart Items in Table

• React Modal Image React Modal Image

• رنگی را در صفحه سبد خرید انتخاب کنید Pick A Color in Cart Page

• به روز رسانی مقدار در سبد خرید Quantity Update in Cart

• حذف محصولات از سبد خرید Remove Products From Cart

• جزء کشوی کناری Side Drawer Component

• اقلام سبد خرید در کشوی کناری Cart Items in Side Drawer

وارسی Checkout

• تنظیم صفحه را بررسی کنید Checkout Page Setup

• ذخیره درخواست سبد خرید Save Cart Request

• مدل سبد خرید Cart Model

• ذخیره سبد خرید در پایگاه داده Save Cart To Database

• دریافت سبد کاربر از پایگاه داده Get User Cart from Database

• سبد کاربر را در Frontend دریافت کنید Get User Cart in Frontend

• خلاصه سفارش نهایی در پرداخت Final Order Summary in Checkout

• سبد خالی Empty Cart

• آدرس کاربر در پرداخت User Address on Checkout

• ذخیره آدرس در پرداخت Save Address on Checkout

کوپن Coupon

• طرح کوپن Coupon Schema

• مسیرهای کوپن و روش های کنترلر Coupon Routes and Controller Methods

• ایجاد صفحه کوپن Create Coupon Page

• ایجاد کوپن Create Coupon

• لیست کوپن و حذف Coupon List and Delete

• درخواست کوپن Apply Coupon

• باطن تخفیف را اعمال کنید Apply Discount Backend

• پاسخ به قیمت تخفیف Discount Price Response

• کوپن خطا و پیام موفقیت Coupon Error and Success Message

• کوپن در Redux Coupon in Redux

پرداخت با Stripe Payment with Stripe

• یکپارچه سازی پرداخت خطی - اسناد رسمی Stripe Payment Integration - Official Docs

• Stripe Setup Backend Stripe Setup Backend

• قسمت جلویی راه اندازی راه راه Stripe Setup Frontend

• کمک بگیر Get Help

• ابزارک پرداخت خطی CSS Stripe Payment Widget CSS

• متغیر سبک مؤلفه پرداخت راه راه Stripe Checkout Component Style Variable

• مولفه پرداخت راه راه Stripe Checkout Component

• پرداخت موفق Successful Payment

• شارژ کل سبد خرید واقعی Charging Actual Cart Total

• شارژ با تخفیف کوپن Charge With Coupon Discount

• نمایش تخفیف و کوپن اعمال شده در Frontend Show Discount and Coupon Applied in Frontend

• بعد از خرید موفق چه اتفاقی می افتد؟ What's Next After Successful Purchase?

سفارشات Orders

• طرحواره سفارش Order Schema

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

• ایجاد سفارش و سبد خالی سبد خرید Create Order and Empty Cart Frontend

• کاهش مقدار افزایش فروش Decrement Quantity Increment Sold

• نمایش خارج از انبار Show Out Of Stock

داشبورد کاربر (سابقه خرید) User Dashboard (Purchase History)

• سفارشات کاربر پشتیبان User Orders Backend

• سفارشات کاربر در صفحه تاریخچه خرید User Orders in Purchase History Page

• سفارشات خرید به صورت کارتی Purchase Orders in Card

• نمایش محصولات هر سفارش در جدول Showing Each Order's Products in Table

• نمایش اطلاعات پرداخت Show Payment Info

PDF/بارگیری فاکتور PDF/Invoice Download

• از NPM نصب کنید Install from NPM

• PDF مشاهده و لینک دانلود PDF View and Download Link

• CSS به سبک جدول PDF PDF Table Style CSS

• جزء فاکتور Invoice Component

• فاکتور را به صورت PDF دانلود کنید Download Invoice as PDF

داشبورد مدیریت (مدیریت سفارش) Admin Dashboard (Order Management)

• به روز رسانی وضعیت سفارشات برای بخش مدیریت Orders Status Update for Admin Backend

• همه سفارشات را در داشبورد مدیریت بارگیری کنید Load All Orders in Admin Dashboard

• سفارشات با به روز رسانی وضعیت Orders with Status Update

• جدول محصولات در داشبورد مدیریت Products Table in Admin Dashboard

لیست علاقه مندیها Wishlist

• فهرست دلخواه Wishlist Backend

• توابع فهرست علاقه مندی ها Frontend Wishlist Functions Frontend

• فهرست دلخواه Wishlist Frontend

تحویل نقدی (سفارش بدون نقد) Cash On Delivery (Cashless order)

• پرداخت نقدی هنگام تحویل Cash On Delivery

• سفارش نقدی ایجاد کنید یا به صفحه پرداخت هدایت شوید Create Cash Order or Redirect to Payment Page

• پشتیبان سفارش نقدی ایجاد کنید Create Cash Order Backend

• سیستم تحویل نقدی Cash On Delivery System

• موفقیت سفارش نقدی با کوپن و وضعیت تحویل نقدی Cash Order Success with Coupon and Status of Cash On Delivery

گسترش Deployment

• تقسیم کد با تنبلی و تعلیق Code Splitting with Lazy and Suspense

• ساخت NPM با استفاده از تقسیم کد در مقابل بدون تقسیم کد NPM Build using Code Splitting vs No Code Splitting

• لینک آموزش استقرار (به روز شده) Deployment tutorial link (updated)

• هیروکو یا اقیانوس دیجیتال Heroku or Digital Ocean

• راه اندازی کاربر ادمین و دسترسی ریشه Admin User Setup and Root Access

• پروژه را به Github فشار دهید Push Project to Github

• پیکربندی NGINX NGINX Configuration

• در حال اجرا API Running API

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

• اجرای React Frontend Running React Frontend

• تغییر اندازه قطره با حافظه بزرگتر Resize Droplet with Bigger Memory

• ساختن کاربر ادمین و آزمایش برنامه مستقر Making User Admin and Trying Deployed App

جایزه Bonus

• دوره های دیگری که ممکن است دوست داشته باشید Other courses you may like

• به سرور Discord من بپیوندید Join my Discord server