آموزش MERN Stack React Node Commerce از ابتدا تا استقرار

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

معرفی Introduction

• معرفی دوره Course introduction

• معرفی دوره Course introduction

• آیا برای این دوره آماده هستید؟ Are you ready for this course?

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

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

• نقشه راه دوره (اختیاری) Course roadmap (optional)

معرفی Introduction

• آیا برای این دوره آماده هستید؟ Are you ready for this course?

• نقشه راه دوره (اختیاری) Course roadmap (optional)

Node - راه اندازی پروژه Node - Project Setup

• کد منبع همه سخنرانی ها را از Github دانلود کنید Download source code for all the lectures from Github

• کد منبع همه سخنرانی ها را از Github دانلود کنید Download source code for all the lectures from Github

• سرور اکسپرس Express server

• نسخه Mongoose Mongoose version

• استفاده از MongoDB Atlas Using MongoDB Atlas

• استفاده از MongoDB Atlas Using MongoDB Atlas

• با MongoDB Atlas ثبت نام کنید Signup with MongoDB Atlas

• با MongoDB Atlas ثبت نام کنید Signup with MongoDB Atlas

• منابع برای نصب MongoDB و Robo3T (اختیاری) Resources to install MongoDB and Robo3T (optional)

• منابع برای نصب MongoDB و Robo3T (اختیاری) Resources to install MongoDB and Robo3T (optional)

• اتصال به MongoDB Connecting to MongoDB

• اتصال به MongoDB Connecting to MongoDB

• مسیرها Routes

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

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

Node - راه اندازی پروژه Node - Project Setup

• سرور اکسپرس Express server

• نسخه Mongoose Mongoose version

• مسیرها Routes

Node - ثبت نام و ورود کاربر Node - User Signup and Signin

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

• زمینه ها و روش های مجازی Virtual fields and methods

• استفاده از پستچی برای ثبت نام کاربر Using Postman to signup user

• استفاده از پستچی برای ثبت نام کاربر Using Postman to signup user

• روش کنترل کننده خطا و راه حل UUID Error handler method and UUID solution

• پیغام خطای دوستانه Friendly error message

• استفاده از نسخه مناسب Express-validator برای سخنرانی بعدی Using the right version of express-validator for the next lecture

• استفاده از نسخه مناسب Express-validator برای سخنرانی بعدی Using the right version of express-validator for the next lecture

• استفاده از اعتبار سنجی اکسپرس Using express validator

• استفاده از اعتبار سنجی اکسپرس Using express validator

• ورود کاربر با استفاده از JWT User signin using JWT

• ورود کاربر با استفاده از JWT User signin using JWT

• استفاده از Postman برای ورود کاربر Using Postman to signin user

• استفاده از Postman برای ورود کاربر Using Postman to signin user

Node - ثبت نام و ورود کاربر Node - User Signup and Signin

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

• زمینه ها و روش های مجازی Virtual fields and methods

• ثبت نام کاربر User signup

• روش کنترل کننده خطا و راه حل UUID Error handler method and UUID solution

• پیغام خطای دوستانه Friendly error message

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

Node - Auth و Admin Middlewares Node - Auth and Admin Middlewares

• خطای Express JWT - الگوریتم ها باید تنظیم شوند (برای سخنرانی بعدی) Express JWT Error - Algorithms should be set (for next lecture)

• نیاز به میان افزار ورود به سیستم Require signin middleware

• نیاز به میان افزار ورود به سیستم Require signin middleware

• تغییر نام از کاربر به auth Renaming from user to auth

• تغییر نام از کاربر به auth Renaming from user to auth

• کاربر بر اساس میان افزار شناسه User by id middleware

• میان افزارهای احراز هویت و مدیریت Auth and admin middlewares

• میان افزارهای احراز هویت و مدیریت Auth and admin middlewares

Node - Auth و Admin Middlewares Node - Auth and Admin Middlewares

• خطای Express JWT - الگوریتم ها باید تنظیم شوند (برای سخنرانی بعدی) Express JWT Error - Algorithms should be set (for next lecture)

• کاربر بر اساس میان افزار شناسه User by id middleware

گره - محصول و دسته ها Node - Product and Categories

• مسیر و کنترلر مدل دسته بندی Category model route and controller

• ایجاد دسته با استفاده از پستچی Creating category using postman

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

• آپدیت کد آپلود فایل File upload code update

• آپدیت کد آپلود فایل File upload code update

• ایجاد محصول با آپلود فایل Create product with file upload

• ایجاد محصول با آپلود فایل Create product with file upload

• ایجاد محصول با استفاده از پستچی Creating product using postman

• ایجاد محصول با استفاده از پستچی Creating product using postman

• اعتبار سنجی محصول را ایجاد کنید Create product validation

• اعتبار سنجی محصول را ایجاد کنید Create product validation

• محصول بر اساس id middleware و تک محصول Product by id middleware and single product

• محصول بر اساس id middleware و تک محصول Product by id middleware and single product

• حذف محصول Product delete

• حذف محصول Product delete

• به روز رسانی محصول Product update

• به روز رسانی محصول Product update

• دسته بر اساس شناسه و دسته تک Category by id and single category

• به روز رسانی دسته حذف و دریافت همه Category update delete and get all

• به روز رسانی دسته حذف و دریافت همه Category update delete and get all

گره - محصول و دسته ها Node - Product and Categories

• مسیر و کنترلر مدل دسته بندی Category model route and controller

• ایجاد دسته با استفاده از پستچی Creating category using postman

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

• دسته بر اساس شناسه و دسته تک Category by id and single category

Node - ارسال محصولات با پرس و جو Node - Sending Products with Queries

• محصولات با فروش و رسیدن به درخواست پارامترهای پرس و جو Products by sell and arrival on request query params

• واکشی محصولات بر اساس درخواست درخواست با استفاده از پستچی Fetch products based on request query using postman

• واکشی محصولات بر اساس درخواست درخواست با استفاده از پستچی Fetch products based on request query using postman

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

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

• دسته بندی محصولات را فهرست کنید List product categories

• دسته بندی محصولات را فهرست کنید List product categories

• محصولات بر اساس کد منبع جستجو Products by search source code

• محصولات بر اساس کد منبع جستجو Products by search source code

• فهرست محصولات بر اساس جستجو List products by search

• فهرست محصولات بر اساس جستجو List products by search

• ارسال عکس محصول Send product photo

• ارسال عکس محصول Send product photo

• نمایه کاربر خوانده و به روز شود User profile read and update

• نمایه کاربر خوانده و به روز شود User profile read and update

• نصب CORS Installing CORS

• نصب CORS Installing CORS

Node - ارسال محصولات با پرس و جو Node - Sending Products with Queries

• محصولات با فروش و رسیدن به درخواست پارامترهای پرس و جو Products by sell and arrival on request query params

React - React Hooks (اختیاری) React - React Hooks (Optional)

• با React Hooks شروع به کار کنید Get up and running with React Hooks

• با React Hooks شروع به کار کنید Get up and running with React Hooks

• واکنش قلاب React hooks

• واکنش قلاب React hooks

• چرا از اجزای کلاس استفاده کردیم؟ Why we used class components?

• برنامه شمارنده با استفاده از کلاس Counter app using class

• برنامه شمارنده با استفاده از کلاس Counter app using class

• استفاده از قلاب حالت useState hook

• قلاب useEffect useEffect hook

• برنامه خبری با استفاده از قلاب News app using hooks

• جستجوی اخبار در مورد تغییر ورودی Search news on input change

• جستجوی اخبار در مورد تغییر ورودی Search news on input change

• کنترل رفتار useEffect Controlling useEffect's behaviour

• بارگذاری Loading

• بارگذاری Loading

• سازمان کد Code Organization

React - React Hooks (اختیاری) React - React Hooks (Optional)

• چرا از اجزای کلاس استفاده کردیم؟ Why we used class components?

• استفاده از قلاب حالت useState hook

• قلاب useEffect useEffect hook

• برنامه خبری با استفاده از قلاب News app using hooks

• کنترل رفتار useEffect Controlling useEffect's behaviour

• سازمان کد Code Organization

React - برنامه React با صفحات و طرح‌بندی‌ها React - React App with Pages and Layouts

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

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

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

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

• مسیریابی صفحات Routing pages

• مسیریابی صفحات Routing pages

• منو و لینک های فعال Menu and active links

• جزء چیدمان مشترک Shared layout component

• جزء چیدمان مشترک Shared layout component

• متغیرهای محیطی Environment variables

• متغیرهای محیطی Environment variables

React - برنامه React با صفحات و طرح‌بندی‌ها React - React App with Pages and Layouts

• منو و لینک های فعال Menu and active links

React - ثبت نام و ورود کاربر React - User Signup and Signin

• تغییر دسته فرم ثبت نام Signup form handle change

• ثبت نام کاربر User signup

• ثبت نام کاربر User signup

• موفقیت و خطا در ثبت نام کاربر User signup success and error

• بازسازی کد - ثبت نام Code refactoring - Signup

• ورود کاربر User signin

• ورود کاربر User signin

• کاربر و رمز را در حافظه محلی ذخیره کنید Save user and token in local storage

• کاربر و رمز را در حافظه محلی ذخیره کنید Save user and token in local storage

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

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

• نمایش و پنهان کردن پیوندهای ورود به سیستم به صورت مشروط Show and hide signin signout links conditionally

• نمایش و پنهان کردن پیوندهای ورود به سیستم به صورت مشروط Show and hide signin signout links conditionally

React - ثبت نام و ورود کاربر React - User Signup and Signin

• تغییر دسته فرم ثبت نام Signup form handle change

• ثبت نام کاربر User signup

• موفقیت و خطا در ثبت نام کاربر User signup success and error

• بازسازی کد - ثبت نام Code refactoring - Signup

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

React - مسیر خصوصی و مدیریت با داشبورد کاربر React - Private and Admin Route with User Dashboard

• مسیر خصوصی فقط برای کاربران تایید شده Private route for authenticated users only

• داشبورد کاربر User dashboard

• پیوندها در داشبورد کاربر Links on user dashboard

• داشبورد مدیریت Admin dashboard

• مسیر خصوصی برای ادمین Private route for admin

• مسیر خصوصی برای ادمین Private route for admin

React - مسیر خصوصی و مدیریت با داشبورد کاربر React - Private and Admin Route with User Dashboard

• مسیر خصوصی فقط برای کاربران تایید شده Private route for authenticated users only

• داشبورد کاربر User dashboard

• پیوندها در داشبورد کاربر Links on user dashboard

• داشبورد مدیریت Admin dashboard

واکنش - دسته ها و محصولات React - Categories and Products

• اضافه کردن جزء دسته Add category component

• دسته ایجاد موفقیت و خطا Category create success and error

• دسته ایجاد موفقیت و خطا Category create success and error

• بخش اول محصول را ایجاد کنید Create product part one

• بخش دوم محصول را ایجاد کنید Create product part two

• ساخت محصول بخش سوم Create product part three

• ساخت محصول بخش سوم Create product part three

• ایجاد محصول با دسته بندی Create product with categories

• محصولات با ورود و فروش Products by arrival and sell

• محصولات با ورود و فروش Products by arrival and sell

• نمایش محصولات در کارت Show products in card

• نمایش تصویر محصول Show product image

• کد منبع css انیمیشن Jumbotron Jumbotron animation css source code

• کد منبع css انیمیشن Jumbotron Jumbotron animation css source code

• دکمه های یک ظاهر طراحی شده و جامبوترون Styling buttons and jumbotron

• دکمه های یک ظاهر طراحی شده و جامبوترون Styling buttons and jumbotron

واکنش - دسته ها و محصولات React - Categories and Products

• اضافه کردن جزء دسته Add category component

• بخش اول محصول را ایجاد کنید Create product part one

• بخش دوم محصول را ایجاد کنید Create product part two

• ایجاد محصول با دسته بندی Create product with categories

• نمایش محصولات در کارت Show products in card

• نمایش تصویر محصول Show product image

React - خرید صفحه با فیلتر جستجو بر اساس دسته و محدوده قیمت React - Shop Page with Search Filter by Category and Price Range

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

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

• دریافت دسته ها در صفحه فروشگاه Get categories in shop page

• دریافت دسته ها در صفحه فروشگاه Get categories in shop page

• نمایش دسته ها در نوار کناری فروشگاه Show categories in shop sidebar

• دسته بندی دسته ها تغییر می کند Handle categories toggle

• دسته بندی دسته ها تغییر می کند Handle categories toggle

• عبور فیلتر دسته‌ها به مؤلفه والد Passing categories filter to parent component

• فیلترها را با دسته بندی تنظیم کنید Set filters with category

• محدوده قیمت ثابت Fixed price range

• محدوده قیمت ثابت Fixed price range

• دکمه های رادیویی برای محدوده قیمت Radio buttons for price range

• دکمه های رادیویی برای محدوده قیمت Radio buttons for price range

• فیلتر با محدوده قیمت Filter with price range

• فیلتر با محدوده قیمت Filter with price range

• نمایش محصولات بر اساس فیلتر در صفحه فروشگاه Show products by filter on shop page

• محصولات را به جزء کارت منتقل کنید Pass products to card component

• محصولات را به جزء کارت منتقل کنید Pass products to card component

• دکمه بارگیری بیشتر Load more button

• دکمه بارگیری بیشتر Load more button

React - خرید صفحه با فیلتر جستجو بر اساس دسته و محدوده قیمت React - Shop Page with Search Filter by Category and Price Range

• نمایش دسته ها در نوار کناری فروشگاه Show categories in shop sidebar

• عبور فیلتر دسته‌ها به مؤلفه والد Passing categories filter to parent component

• فیلترها را با دسته بندی تنظیم کنید Set filters with category

• نمایش محصولات بر اساس فیلتر در صفحه فروشگاه Show products by filter on shop page

React - جستجوی محصولات React - Products Search

• جزء جستجو Search component

• جزء جستجو Search component

• فرم جستجو Search form

• فرم جستجو Search form

• اجرای جستجو Implementing search

• اجرای پشتیبان جستجو Backend implementation of search

• جستجوی پیام به کاربران Search message to users

React - جستجوی محصولات React - Products Search

• اجرای جستجو Implementing search

• اجرای پشتیبان جستجو Backend implementation of search

• جستجوی پیام به کاربران Search message to users

React - صفحه محصول با محصولات مرتبط React - Product Page with Related Products

• جزء تک محصولی Single product component

• استفاده مجدد از کارت برای تک محصول Reuse card for single product

• جزئیات محصول در صفحه تک محصول Product detail on single product page

• جزئیات محصول در صفحه تک محصول Product detail on single product page

• نمایش محصولات مرتبط Show related products

• نمایش محصولات مرتبط Show related products

React - صفحه محصول با محصولات مرتبط React - Product Page with Related Products

• جزء تک محصولی Single product component

• استفاده مجدد از کارت برای تک محصول Reuse card for single product

React - سبد خرید CRUD با LocalStorage React - Cart CRUD with LocalStorage

• راه حل خطای احتمالی در سخنرانی بعدی (افزودن به سبد خرید) Solution to potential error on the next lecture (Add to cart)

• راه حل خطای احتمالی در سخنرانی بعدی (افزودن به سبد خرید) Solution to potential error on the next lecture (Add to cart)

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

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

• کل اقلام سبد خرید در منو Cart items total in menu

• کل اقلام سبد خرید در منو Cart items total in menu

• نمایش محصولات در صفحه سبد خرید Show products in cart page

• نمایش محصولات در صفحه سبد خرید Show products in cart page

• مشروط نشان دادن پنهان کردن افزودن به سبد خرید Conditionally show hide add to cart

• به روز رسانی مقدار محصول در سبد خرید Product quantity update in cart

• محصول را از سبد خرید حذف کنید Remove product from cart

• کل سبد خرید Cart total

• کل سبد خرید Cart total

React - سبد خرید CRUD با LocalStorage React - Cart CRUD with LocalStorage

• مشروط نشان دادن پنهان کردن افزودن به سبد خرید Conditionally show hide add to cart

• به روز رسانی مقدار محصول در سبد خرید Product quantity update in cart

• محصول را از سبد خرید حذف کنید Remove product from cart

درگاه پرداخت (کارت اعتباری و پی پال) با Braintree Payment Gateway (Credit Card and PayPal) with Braintree

• Braintree به عنوان درگاه پرداخت Braintree as payment gateway

• ثبت نام در braintree Signup to braintree

• باطن راه اندازی Braintree Braintree setup backend

• باطن راه اندازی Braintree Braintree setup backend

• طرح مقدماتی Braintree Braintree setup frontend

• رسیدگی به بخش پرداخت Handling payment frontend

• رسیدگی به بخش پرداخت Handling payment frontend

• پردازش باطن پرداخت Processing payment backend

• معامله موفق Successful transaction

• معامله موفق Successful transaction

• خالی کردن سبد پس از خرید موفق Empty cart after successful purchase

• خالی کردن سبد پس از خرید موفق Empty cart after successful purchase

• پرداخت پی پال را فعال کنید Activate paypal payment

• پرداخت پی پال را فعال کنید Activate paypal payment

• مراحل ایجاد حساب سندباکس پی پال Steps to create paypal sandbox account

• مراحل ایجاد حساب سندباکس پی پال Steps to create paypal sandbox account

درگاه پرداخت (کارت اعتباری و پی پال) با Braintree Payment Gateway (Credit Card and PayPal) with Braintree

• Braintree به عنوان درگاه پرداخت Braintree as payment gateway

• ثبت نام در braintree Signup to braintree

• طرح مقدماتی Braintree Braintree setup frontend

• پردازش باطن پرداخت Processing payment backend

سفارشات Orders

• مسیرهای سفارش و تنظیم کنترلر - Backend Order routes and controller setup - Backend

• مسیرهای سفارش و تنظیم کنترلر - Backend Order routes and controller setup - Backend

• ایجاد سفارش - Frontend Create order - Frontend

• ایجاد سفارش - Frontend Create order - Frontend

• کد منبع سفارش و مدل CartItem Order and CartItem model source code

• سفارشات را در پایگاه داده ذخیره کنید Save orders in the database

• سفارشات را در پایگاه داده ذخیره کنید Save orders in the database

• آدرس تحویل سفارشات را ذخیره کنید Save delivery address of orders

• ارسال سفارشات به سابقه خرید کاربر Push orders to user's purchase history

• ارسال سفارشات به سابقه خرید کاربر Push orders to user's purchase history

• به روز رسانی مقدار محصولات فروخته شده Update sold products quantity

• به روز رسانی مقدار محصولات فروخته شده Update sold products quantity

• لیست تمام سفارشات برای ادمین List all orders for admin

• واکشی همه سفارشات برای ادمین Fetch all orders for admin

• واکشی همه سفارشات برای ادمین Fetch all orders for admin

• حلقه از طریق سفارشات Loop through orders

• نمایش جزئیات محصول هر سفارش Show product details of each order

• مقادیر وضعیت enum هر سفارش enum status values of each order

• مقادیر وضعیت enum هر سفارش enum status values of each order

• پیدا کردن سفارش بر اساس شناسه و به روز رسانی وضعیت سفارش Find order by id and update order status

• پیدا کردن سفارش بر اساس شناسه و به روز رسانی وضعیت سفارش Find order by id and update order status

• به روز رسانی وضعیت سفارش توسط ادمین Update order status by admin

• به روز رسانی وضعیت سفارش توسط ادمین Update order status by admin

سفارشات Orders

• کد منبع سفارش و مدل CartItem Order and CartItem model source code

• آدرس تحویل سفارشات را ذخیره کنید Save delivery address of orders

• لیست تمام سفارشات برای ادمین List all orders for admin

• حلقه از طریق سفارشات Loop through orders

• نمایش جزئیات محصول هر سفارش Show product details of each order

مشخصات کاربر User Profile

• روش های به روز رسانی پروفایل کاربر User profile update methods

• دریافت اطلاعات کاربر برای به روز رسانی نمایه Get user info for profile update

• به روز رسانی پروفایل کاربر User profile update

• سابقه خرید کاربر - Backend User purchase history - Backend

• کد منبع تابع سابقه خرید کاربر User Purchase history function source code

• سابقه خرید کاربر - Frontend User purchase history - Frontend

مشخصات کاربر User Profile

• روش های به روز رسانی پروفایل کاربر User profile update methods

• دریافت اطلاعات کاربر برای به روز رسانی نمایه Get user info for profile update

• به روز رسانی پروفایل کاربر User profile update

• سابقه خرید کاربر - Backend User purchase history - Backend

• کد منبع تابع سابقه خرید کاربر User Purchase history function source code

• سابقه خرید کاربر - Frontend User purchase history - Frontend

مدیریت سفارشات و محصولات توسط ادمین Manage Orders and Products by Admin

• مدیریت محصولات برای مدیر Manage products for admin

• درخواست های CRUD محصول Product CRUD requests

• فهرست محصولات و حذف تک محصول Products list and delete single product

• همه محصولات را برای مدیر CRUD دریافت کنید Get all products for admin CRUD

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

مدیریت سفارشات و محصولات توسط ادمین Manage Orders and Products by Admin

• مدیریت محصولات برای مدیر Manage products for admin

• درخواست های CRUD محصول Product CRUD requests

• فهرست محصولات و حذف تک محصول Products list and delete single product

• همه محصولات را برای مدیر CRUD دریافت کنید Get all products for admin CRUD

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

استقرار، دامنه، CDN و SSL رایگان Deployment, Domain, CDN and Free SSL

• قطعه کد Code Snippets

• استقرار در Digital Ocean قسمت 1 Deploy to Digital Ocean Part 1

• استقرار در Digital Ocean قسمت 2 Deploy to Digital Ocean Part 2

• استقرار در Digital Ocean قسمت 2 Deploy to Digital Ocean Part 2

• نقش کاربر را به Admin در تولید به روز کنید Update user role to Admin in production

• برنامه تجارت الکترونیک کاملاً کارآمد در حال تولید است Fully functioning Ecommerce app in production

• افزودن نام دامنه Adding a Domain name

• افزودن نام دامنه Adding a Domain name

• با استفاده از CDN Cloudflare و SSL رایگان برای برنامه ما Using Cloudflare's CDN and free SSL for our app

استقرار، دامنه، CDN و SSL رایگان Deployment, Domain, CDN and Free SSL

• قطعه کد Code Snippets

• استقرار در Digital Ocean قسمت 1 Deploy to Digital Ocean Part 1

• نقش کاربر را به Admin در تولید به روز کنید Update user role to Admin in production

• برنامه تجارت الکترونیک کاملاً کارآمد در حال تولید است Fully functioning Ecommerce app in production

• با استفاده از CDN Cloudflare و SSL رایگان برای برنامه ما Using Cloudflare's CDN and free SSL for our app

بهبودهای بیشتر Further Improvements

• هشدار ایمیل به مدیر و خریدار Email alert to admin and buyer

• هشدار ایمیل به مدیر و خریدار Email alert to admin and buyer

بهبودهای بیشتر Further Improvements

جایزه Bonus

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

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

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

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

جایزه Bonus