آموزش MERN STACK NODE API REACT تجارت الکترونیک با 116 روش

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

بررسی کلی پروژه و پیش نیاز Project Overview and prerequisite

• نمای کلی پروژه توسط کاربر Project overview by user

• نمای کلی پروژه توسط ادمین Project overview by admin

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

• کد منبع را دانلود کنید Download Source Code

NodeJs - راه اندازی API NodeJs - API Setup

• چگونه پروژه خود را با NPM مقداردهی اولیه کنیم How to initialize your project with NPM

• چگونه سرور اکسپرس ایجاد کنیم؟ How to create express server?

• نحوه اجرای مداوم سرور اکسپرس با استفاده از nodemon How to continuously run express server using nodemon

• نحوه استفاده از import export در NodeJs How to use import export in NodeJs

• نحوه استفاده از فایل های ENV و gitignore در NodeJs How to use ENV and gitignore files in NodeJs

NodeJs - به MongoDB متصل شوید NodeJs - Connect to MongoDB

• نحوه اتصال محلی به MongoDB How to connect to MongoDB locally

• نحوه استفاده از اطلس مونگو به عنوان پایگاه داده در ابر How to use mongo atlas as database in the cloud

NodeJs - Route، Controller و Modal NodeJs - Route, Controller and Modal

• مفهوم مسیرها و میان افزارها توضیح داده شده است Routes and middlewares concept explained

• نحوه استفاده از توابع کنترلر How to use controller functions

• نحوه ایجاد مدل مونگوس با استفاده از طرحواره How to create mongoose model using schema

NodeJs - احراز هویت کاربر NodeJs - User Authentication

• نحوه استفاده از bcrypt برای هش و مقایسه رمز عبور How to use bcrypt to hash and compare password

• نحوه استفاده از مورگان به عنوان میان افزار برای ثبت نقاط پایانی درخواست How to use morgan as a middleware to log request endpoints

• نحوه استفاده از Postman برای تست NodeJs API How to use Postman to test NodeJs API

• نحوه ذخیره داده ها در MongoDB How to save data in MongoDB

• نحوه ثبت نام کاربر با اعتبارسنجی و پاسخ های خطا How to register user with validation and error responses

• نحوه تولید JWT (ژتون وب json) How to generate JWT (json web token)

• نحوه ورود کاربر با استفاده از رمز عبور مقایسه How to login user using compare password

NodeJs - مجوز کاربر و محافظت از مسیر NodeJs - User Authorization and Route Protection

• نحوه ارسال توکن مجوز در هدرهای درخواست HTTP How to send authorization token in HTTP request headers

• نحوه محافظت از مسیرها با استفاده از تأیید JWT How to protect routes using JWT verify

• نحوه محافظت از مسیرها برای کاربران ادمین فقط با استفاده از میان افزار isAdmin How to protect routes for admin users only using isAdmin middleware

NodeJS - دسته CRUD و Postman NodeJS - Category CRUD and Postman

• نحوه ایجاد مدل دسته بندی How to create category model

• نحوه ایجاد درخواست POST با توکن JWT در هدرها و بدنه درخواست How to make a POST request with JWT token in request headers and body

• نحوه ایجاد یک دسته و ذخیره در MongoDB How to create a category and save in MongoDB

• ایجاد دسته مسیرهای CRUD Creating category CRUD routes

• نحوه انجام CRUD با NodeJs و MongoDB How to do CRUD with NodeJs and MongoDB

• نحوه آزمایش نقاط انتهایی CRUD API با استفاده از Postman How to test CRUD API endpoints using Postman

NodeJs - محصول CRUD و آپلود تصویر با FormData NodeJs - Product CRUD and Image Upload with FormData

• نحوه نوشتن طرحواره محصول برای ایجاد مدل محصول How to write product schema to create product model

• ایجاد محصول با استفاده از داده های JSON در مقابل داده های فرم Creating product using JSON data vs form data

• نحوه مدیریت داده های فرم با آپلود تصویر و اعمال اعتبار How to handle form data with image upload and apply validation

• چگونه یک محصول را در MongoDB ذخیره کنیم How to save a product in MongoDB

• نحوه ارسال لیستی از محصولات به عنوان پاسخ JSON How to send a list of products as JSON response

• چگونه محصول واحد را از MongoDB دریافت کنیم How to fetch single product from MongoDB

• نحوه ارسال عکس برای هر محصول How to send photo for each product

• چگونه یک محصول را از MongoDB حذف کنیم How to delete a product from MongoDB

• نحوه به روز رسانی محصول در MongoDB How to update product in MongoDB

React - راه اندازی پروژه، صفحات، مسیریابی و استایل با بوت استرپ React - Project Setup, Pages, Routing and Styling with Bootstrap

• چگونه یک پروژه React جدید ایجاد کنیم How to create a new React project

• نحوه ایجاد صفحات در React How to create pages in React

• نحوه اضافه کردن سیستم مسیریابی به برنامه React How to add routing system to React app

• نحوه استفاده از Bootstrap CSS در برنامه React How to use Bootstrap CSS in React app

• نحوه ایجاد منوی ناوبری با استفاده از Bootstrap 5 How to create navigation menu using Bootstrap 5

• نحوه ایجاد Jumbotron در Bootstrap 5 How to create a Jumbotron in Bootstrap 5

React - React Components، Hooks، Forms، Axios و Toast Notifications React - React Components, Hooks, Forms, Axios and Toast Notifications

• نحوه ساخت اجزای قابل استفاده مجدد در React با استفاده از props How to make reusable components in React using props

• نحوه استفاده از useState hook در React برای ذخیره ورودی کاربر How to use useState hook in React to store user input

• نحوه ایجاد فرم ثبت نام کاربر در React How to create a user registration form in React

• ایجاد درخواست API با استفاده از Axios Making API request using Axios

• نحوه بررسی پیام های خطای درخواست API در React How to inspect API request error messages in React

• نحوه حل مشکل CORS و نمایش پیام های خطا با استفاده از اعلان های Toast How to resolve CORS issue and show error messages using Toast notifications

• چگونه یک صفحه ورود به سیستم فعال در React ایجاد کنیم How to create a working login page in React

React - Context و Local Storage React - Context and Local Storage

• نحوه ایجاد زمینه و دسترسی به ارزش آن در React How to create context and access it's value in React

• ذخیره پاسخ ورود کاربر در زمینه Saving user login response in context

• وضعیت را در بارگذاری مجدد صفحه با استفاده از حافظه محلی حفظ کنید Preserve the state on page reload using local storage

React - تغییر مسیرها، مسیرهای خصوصی و محافظت از صفحات React - Redirects, Private Route and Protecting Pages

• نحوه تغییر مسیر کاربر در React How to redirect user in React

• نحوه نمایش و مخفی کردن مشروط پیوندهای ناوبری How to conditionally show and hide navigation links

• صفحه داشبورد کاربر User dashboard page

• نحوه محافظت از صفحات با استفاده از مسیر خصوصی در React با استفاده از روتر react 6 How to protect pages using private route in React using react router 6

• نحوه به تاخیر انداختن تغییر مسیر با استفاده از setInterval How to delay the redirect using setInterval

• نحوه نمایش نشانگر بارگذاری How to show loading indicator

• نحوه محافظت از مسیرها بر اساس پاسخ سرور How to protect routes based on server response

React - Axios Configuration and Role Based Redircts React - Axios Configuration and Role Based Rediercts

• نحوه پیکربندی Axios با آدرس و توکن پایه How to configure Axios with base url and token

• نحوه ایجاد صفحه 404 که در React یافت نشد How to create 404 page not found in React

• نحوه بردن کاربر به صفحه مورد نظر پس از ورود How to take user to intended page after login

• نحوه ایجاد مسیریابی مبتنی بر نقش با گزینه کشویی How to create role based routing with dropdown option

React - داشبورد مدیریت، نوار کناری و کنترل دسترسی React - Admin Dashboard, Sidebar and Access Control

• صفحه داشبورد مدیریت ایجاد کنید Create admin dashboard page

• نحوه محدود کردن دسترسی فقط به کاربر ادمین How to restrict access to admin user only

• نحوه ایجاد منوی نوار کناری مدیریت How to create admin sidebar menu

• صفحات مدیریت با منوی نوار کناری مشترک Admin pages with shared sidebar menu

• صفحات کاربر با منوی نوار کناری مشترک User pages with shared sidebar menu

واکنش - دسته بندی ها CRUD React - Categories CRUD

• نحوه ایجاد درخواست Axios POST برای ایجاد دسته از برنامه React How to make Axios POST request to create category from React app

• نحوه نمایش همه دسته ها در React How to display all categories in React

• نحوه انتقال کد به اجزای سازنده برای قابلیت استفاده مجدد How to move code to components for reusability

• نحوه استفاده از Ant design Modal برای به روز رسانی دسته How to use Ant design Modal to update category

• نحوه ایجاد درخواست Axios PUT برای به روز رسانی دسته How to make Axios PUT request to update category

• نحوه ایجاد درخواست Axios DELETE از برنامه React How to make Axios DELETE request from React app

React - آپلود تصویر و کشویی قابل جستجو React - Image Upload and Searchable Dropdown

• نحوه استفاده از منوی کشویی انتخابی برای نمایش فهرست دسته بندی های قابل جستجو How to use searchable Select dropdown to show categories list

• نحوه انتخاب فایل های تصویری برای آپلود در React How to select image files to upload in React

• نحوه نمایش پیش نمایش تصویر فایل آپلود شده در React How to show image preview of uploading file in React

واکنش - محصولات CRUD React - Products CRUD

• چگونه یک فرم برای ایجاد یک محصول بسازیم How to build a form to create a product

• نحوه ارسال اطلاعات فرم برای ایجاد محصول با تصویر How to post form data to create product with image

• نحوه نمایش لیست محصولات برای ادمین How to show list of products for admin

• نحوه رندر لیست محصولات در کارت های بوت استرپ How to render list of products in Bootstrap cards

• نحوه از پیش پر کردن داده های محصول در فرم به روز رسانی محصول How to pre-populate product data in product update form

• نحوه درخواست Axios PUT برای به روز رسانی محصول How to make Axios PUT request to update product

• رفع مشکلات به روز رسانی محصول مربوط به زمینه های عکس و حمل و نقل Fixing update product issues related to photo and shipping fields

• نحوه درخواست Axios DELETE از React How to make Axios DELETE request from React

• مدیریت خطا: نمی توان سرصفحه ها را پس از ارسال به مشتری تنظیم کرد Error handling: Cannot set headers after they are sent to client

React - مرتب سازی محصولات، چیدمان پاسخگو، کارت محصول و Jumbotron React - Sorting Products, Responsive Layout, Product Card and Jumbotron

• چگونه محصولات را بر اساس تاریخ ایجاد و فروش مرتب کنیم How to sort products based on created date and sold

• چگونه با استفاده از بوت استرپ یک طرح پاسخگو 2 ستونی ایجاد کنیم How to create 2 column responsive layout using Bootstrap

• نحوه استفاده از مولفه کارت محصول قابل استفاده مجدد و نمایش تصویر پاسخگو How to use reusable product card component and display responsive image

• نحوه اضافه کردن دکمه ها و افکت های شناور به کارت محصول How to add buttons and hover effects to product card

• نحوه استفاده از روبان برای نمایش اطلاعات محصول در کارت How to use ribbons to display product info in cards

• نحوه قالب بندی قیمت محصول بر اساس ارز محلی How to format product price based on local currency

• انیمیشن رنگی Jumbotron CSS Jumbotron color animation CSS

• نحوه ایجاد رنگ پس زمینه متحرک برای Jumbotron How to create animated background color for Jumbotron

خرید صفحه بر اساس دسته ها و محدوده قیمت Shop Page based on Categories and Price Range

• صفحه فروشگاه با لیست محصولات Shop page with the list of products

• نحوه نمایش گزینه فیلتر بر اساس دسته ها در چک باکس How to show filter by categories option in checkbox

• نحوه نمایش فیلتر بر اساس گزینه محدوده قیمت به عنوان دکمه های رادیویی How to show filter by price range option as radio buttons

• نحوه یافتن محصولات بر اساس دسته بندی ها و گزینه های فیلتر محدوده قیمت How to find products based on categories and price range filtering options

• نحوه رندر محصولات بر اساس گزینه های فیلتر در react How to render products based on filtering options in react

• نحوه اضافه کردن گزینه های فیلتر مجدد ریست در react How to add reset filtering options in react

بارگذاری صفحه بندی بیشتر Load More Pagination

• نحوه ایجاد نقطه پایانی محصولات صفحه بندی شده در سرور How to create paginated products endpoint in server

• نحوه اضافه کردن قابلیت بارگذاری بیشتر در React How to add load more feature in React

جستجو و نمایش محصولات Search and Display Products

• نحوه قرار دادن فرم جستجو در منوی ناوبری How to put search form in navigation menu

• نحوه ایجاد کامپوننت جستجو با حالت برای درخواست API How to create search component with state to make API request

• نحوه ایجاد MongoDB برای دریافت نتایج جستجو بر اساس چندین ویژگی How to create MongoDB to get search results based on multiple properties

• نحوه جایگزینی حالت محلی با متن در React How to replace local state with context in React

• نحوه نمایش نتایج جستجو با ورودی جستجو در منوی ناوبری How to display search results with search input in navigation menu

نمای تک محصولی Single Product View

• نحوه ایجاد صفحه نمایش تک محصول How to create single product view page

• نمایش محصول در یک صفحه مشاهده محصول Display product in a single product view page

• نحوه استفاده از آیکون های React How to use React icons

• نمایش اطلاعات اضافی محصول Showing additional product information

• نحوه نمایش محصولات مرتبط در React E-commerce How to display related products in React E-commerce

• نمایش محصولات مرتبط در کارت محصول Display related products in product card

مشاهده دسته ها، قلاب سفارشی و محصولات بر اساس دسته Categories View, Custom Hook and Products Based on Category

• چگونه قلاب سفارشی خود را برای واکشی داده ها ایجاد کنید How to create your own custom hook to fetch data

• نحوه نمایش لیست دسته ها در منوی کشویی How to show categories list in dropdown menu

• نحوه نمایش لیست دسته ها در یک صفحه How to show list of categories on a page

• صفحه نمایش تک دسته ایجاد کنید Create single category view page

• نحوه نمایش محصولات بر اساس دسته بندی How to display products by category

زمینه سبد خرید، افزودن به سبد خرید و مدیریت اقلام سبد خرید Cart Context, Add to Cart and Manage Cart Items

• نحوه ایجاد زمینه سبد خرید How to create cart context

• نحوه پیاده سازی قابلیت افزودن به سبد خرید How to implement add to cart feature

• نحوه درست کردن منوی بالای چسبنده How to make sticky top menu

• ایجاد صفحه سبد خرید Create cart page

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

• نحوه حذف اقلام از سبد خرید How to remove items from the cart

• ادامه سبد خرید در بارگذاری مجدد صفحه Persist cart on page reload

• نحوه نمایش کل سبد خرید How to show cart total

به روز رسانی نمایه کاربر، آدرس تحویل و تغییر مسیر صفحه مورد نظر User Profile Update, Delivery Address and Intended Page Redirect

• نحوه ایجاد صفحه به روز رسانی پروفایل کاربری در React How to create a user profile update page in React

• نحوه پیاده سازی به روز رسانی پروفایل کاربر از جمله آدرس How to implement user profile update including address

• رندر مشروط برای آدرس تحویل Conditional rendering for delivery address

• پس از ورود کاربر را به صفحه سبد خرید هدایت کنید Redirect user to cart page after login

یکپارچه سازی پرداخت (سبد اعتباری، پی پال) بازگشت به جلو Payment Integration (Credit Cart, PayPal) Back to Front

• ثبت نام در پرداخت Braintree Signup to Braintree payment

• توابع Braintree برای تولید رمز و پردازش پرداخت Braintree functions to generate token and process payment

• انتقال کد از صفحه سبد خرید به اجزای سازنده Move code from cart page to components

• نمایش Braintree Web Drop در UI در React Show Braintree Web Drop In UI in React

• ایجاد حساب سندباکس پی پال Creating PayPal sandbox account

• با کلیک روی دکمه خرید، روش پرداخت را دریافت کنید Get payment method nonce on buy button click

• نحوه پردازش پرداخت با Braintree How to process payment with Braintree

• نحوه شارژ مبلغ دقیق بر اساس کل سبد خرید How to charge exact amount based on cart total

• در صورت پرداخت موفق، سفارش جدیدی ایجاد کنید Create a new order on successful payment

• نحوه اضافه کردن حالت بارگیری برای غیرفعال کردن دکمه خرید How to add loading state to disable buy button

سفارشات کاربر User Orders

• نحوه دریافت کلیه سفارشات کاربران وارد شده How to get logged-in user's all orders

• نمایش وضعیت سفارش در یک جدول Display order status in a table

• نحوه نمایش سفارش کاربر برای هر محصول How to display user order's each product

• چگونه می توان با هر بار فروش یک محصول، موجودی را کاهش داد How to decrement stock each time a product is sold

مدیریت سفارش توسط ادمین Order Management by Admin

• نمایش لیست سفارشات برای ادمین Display list of orders for admin

• نحوه استفاده از کامپوننت انتخاب Ant design How to use Ant design's Select component

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

اعلان های ایمیل Email Notifications

• برای دریافت کلیدهای API برای ارسال ایمیل به Sendgrid وارد شوید Sign in to Sendgrid to get API keys for sending emails

• نحوه ارسال ایمیل در مورد تغییر وضعیت سفارش How to send email on order status change

• ایمیل به روز رسانی وضعیت سفارش را دریافت کنید Receive order status update email

گسترش Deployment

• استقرار NodeJs API در Heroku Part 1 Deploy NodeJs API to Heroku Part 1

• NodeJs API را در Heroku Part 2 مستقر کنید Deploy NodeJs API to Heroku Part 2

• برنامه React Web را در Heroku اجرا کنید Deploy React Web App to Heroku

• به سرورهای دیجیتال Ocean Cloud مستقر شوید Deploy to Digital Ocean Cloud Servers

جایزه Bonus

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

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