آموزش سایت کامل تجارت الکترونیک پشته - با استفاده از React ، Redux ، Node.js - آخرین آپدیت

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

مقدمه Introduction

• به دوره خوش آمدید Welcome to Course

• نسخه نمایشی پروژه تجارت الکترونیکی Shopit ShopIT E-Commerce Project DEMO

تنظیم محیط Setting Up Environment

• نصب ابزار Installing tools

• MongoDB را روی MACOS نصب کنید Install MongoDB on MacOS

• mongoDB را روی ویندوز نصب کنید Install MongoDB on Windows

چگونه می توان کد منبع پروژه را دریافت کرد؟ How to get SOURCE CODE of Project?

• کد منبع Shopit را دریافت کنید Get ShopIT Source Code

بیایید با Backend Shopit شروع کنیم Let's start with ShopIT Backend

• راه اندازی پروژه اساسی Basic Project Setup

• نصب و تنظیم Nodemon Installing & Setting up Nodemon

• ایجاد مسیر اول Creating First Route

• تنظیم محیط پستچی Setting Up Postman Environment

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

اضافه کردن منابع محصولات Adding Products Resource

• ایجاد مدل محصول Creating Product Model

• مدیر - ایجاد و ذخیره محصول Admin - Create & Save Product

• نمایش همه محصولات Display all Products

• ایجاد بذر داده Creating Data Seeder

• یک محصول واحد دریافت کنید Get Single Product

• مدیر - محصول را به روز کنید Admin - Update Product

• مدیر - محصول را حذف کنید Admin - Delete Product

رسیدگی به خطای عقب Backend Error Handling

• ایجاد کلاس کنترل خطا Creating Error Handler Class

• ایجاد خطاها میان افزار Creating Errors Middleware

• خطاهای تولید در مقابل توسعه Production Vs Development Errors

• رسیدگی به رد وعده نامحسوس Handling Unhandled Promise Rejection

• رسیدگی به استثنائات غیر آموخته Handling Uncaught Exceptions

• جلب خطاهای async Catching Async Errors

• اعتبار سنجی و خطای شناسه mongoose Validation & Mongoose ID Error

افزودن فیلتر ، صفحه بندی ، جستجو Adding Filter, Pagination, Search

• محصولات را با کلمه کلیدی جستجو کنید Search Products by Keyword

• محصولات فیلتر Filter Products

• اجرای صفحه بندی Implementing Pagination

احراز هویت و مجوز Authentication & Authorization

• ایجاد مدل کاربر Creating User Model

• رمزگذاری رمز عبور هنگام ثبت نام Encrypting Password while Registration

• توکن وب JSON ایجاد کنید Generate JSON Web Token

• کاربر را وارد کنید و نشانه را اختصاص دهید Login User & Assign Token

• ارسال نشانه JWT در کوکی Sending JWT Token in Cookie

• از مسیرهای کاربران غیرمجاز محافظت کنید Protect Routes from Unauthorized Users

• کاربر ورود به سیستم Logout User

• نقش ها و مجوزهای کاربر را مجاز کنید Authorize User Roles and Permissions

• افزودن کاربر در محصولات Adding User in Products

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

• پیکربندی NodeMailer و تنظیم مجدد رمز عبور HTML Configure Nodemailer & Reset Password HTML Template

• بازیابی رمز عبور را ارسال کنید Send Password Recovery

• بازنشانی رمز عبور جدید Reset New Password

• خطای کپی و خطای JWT را کنترل کنید Handle Duplicate key & JWT Error

رسیدگی به مسیرهای کاربر Handle User Routes

• مشخصات کاربر را دریافت کنید Get User Profile

• رمز عبور را تغییر دهید/به روز کنید Change / Update Password

• مشخصات کاربر را به روز کنید Update User Profile

• مدیر - همه کاربران و کاربر خاص را دریافت کنید Admin - Get All Users & Specific User

• مدیر - کاربر را به روز و حذف کنید Admin - Update & Delete User

منابع سفارشات را اداره کنید Handle Orders Resource

• ایجاد مدل سفارش Creating Order Model

• ایجاد و ذخیره سفارش Create & Save Order

• یک سفارش واحد دریافت کرده و در سفارشات کاربر وارد شوید Get Single Order & Logged in User Orders

• مدیر - سفارش و سفارش به روزرسانی/فرایند را دریافت کنید Admin - Get all Order & Update/Process Order

• مدیر - سفارش را حذف کنید Admin - Delete Order

بررسی کاربر User Reviews

• بررسی جدید/به روزرسانی را اضافه کنید Add New / Update Review

• تمام بررسی های محصول را دریافت کنید Get all Reviews of Product

• بررسی محصول را حذف کنید Delete Product Review

بیایید با Frontend Shopit شروع کنیم Let's start with ShopIT Frontend

• Shopit HTML & CSS جزئیات ShopIT HTML & CSS Details

• نصب پروژه واکنش و تمیز کردن Installing React & Cleaning Project

• اجزای هدر و پاورقی Header & Footer Component

• صفحه اصلی Shopit ShopIT Homepage

• اجرای React Router Dom Implementing React Router DOM

• عناوین سفارشی را با کلاه اضافه کنید Add Custom Titles with Helmet

اجرای ابزار Redux Implementing Redux Toolkit

• پرس و جو Redux Toolkit & RTK چیست؟ What is Redux Toolkit & RTK Query?

• ایجاد فروشگاه ابزار Redux Create Redux Toolkit Store

• همه محصولات پرس و جو را بدست آورید Fetch all Products Query

• Fetch & Render For Redux State Fetch & Render Products for Redux State

• مؤلفه لودر و رفتار حافظه پنهان Loader Component & Cache Behavior

• اضافه کردن نان تست داغ Adding React Hot Toast

• صفحه جزئیات محصول Product Details Page

اضافه کردن صفحه بندی ، جستجو و فیلترها Adding Pagination, Search & Filters

• اضافه کردن صفحه بندی Adding Pagination

• مؤلفه محصولات را جستجو کنید Search Products Component

• فیلتر بر اساس قیمت Filter by Price

• فیلتر بر اساس طبقه بندی Filter by Category

• فیلتر با رتبه بندی Filter by Ratings

احراز هویت Authentication Frontend

• کاربر ورود به سیستم Login User

• کاربر ثبت نام کنید Register User

• بارگذاری شده در کاربر در حالت Load Logged In User in State

• نشان دادن کاربر در هدر Show User in Header

• کاربر ورود به سیستم Logout User

رسیدگی به کاربر و مسیر محافظت شده Handle User & Protected Route

• طرح کاربر و نمایش پروفایل کاربر User Layout & Show User Profile

• مشخصات کاربر را به روز کنید Update User Profile

• مؤلفه ProtectedRoute ProtectedRoute Component

• تنظیم ابر برای تصاویر Setup Cloudinary for Images

• بارگذاری آواتار کاربر Upload User Avatar

• اشکال اندازه تصویر را برطرف کنید Fix Image Size Bug

• رمز عبور کاربر را به روز کنید Update User Password

رمزعبور را فراموش کرده و تنظیم مجدد کنید Forgot & Reset Password

• رسیدگی به رمز ورود Handle Forgot Password

• کنترل رمز عبور Handle Reset Password

رسیدگی به سبد کاربر Handle User Cart

• انتخاب کمیت Handle Quantity Selection

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

• جزء چرخ دستی Cart Component

• رسیدگی به مقدار در اجزای سبد خرید Handle Quantity on Cart Component

• مورد سبد خرید را حذف کنید Remove Cart Item

• خلاصه سبد خرید Handle Cart Summary

رسیدگی به پرداخت و سفارش COD Handle Checkout & COD Order

• رسیدگی به اطلاعات حمل و نقل Handle Shipping Info

• جزئیات سفارش را تأیید کنید Confirm Order Details

• مؤلفه مراحل پرداخت Checkout Steps Component

• روش پرداخت و سفارش COD Payment Method & Place COD Order

یکپارچه برای پرداخت ها Integrate Stripe for Payments

• راه راه چیست؟ What is Stripe?

• جلسه پرداخت راه راه ، نرخ مالیات و حمل و نقل Stripe Checkout Session, Tax & Shipping Rates

• Webhook Stripe چیست؟ What is Stripe Webhook?

• راه اندازی نوار روی ویندوز Setting Up Stripe on Windows

• در پرداخت موفقیت آمیز قرار بگیرید Place on Successful Payment

سفارشات کاربر ، فاکتور و بررسی User Orders, Invoice & Reviews

• وارد سفارشات کاربر Logged In User Orders

• نمایش جزئیات سفارش Display Order Details

• سبد خرید پس از سفارش Clear Cart after Order

• فاکتور سفارش را تولید کنید Generate Order Invoice

• ارسال بررسی Submit Review

• نمایش همه بررسی ها Display all Reviews

• آیا می تواند کاربر را مرور کند Can User Review

مسیرهای مدیر - نمودارهای فروش و محصول Admin Routes - Sales Charts & Product

• طرح مدیر و مجوز نقش Admin Layout & Authorize Role

• نمودار اجزای داشبورد و نمودار فروش Dashboard Component & Sales Chart

• نقطه پایان داده های فروش Sales Data Endpoint

• داده های فروش را ارائه دهید Render Sales Data

• رفع اشکال منطقه زمانی Fix Time Zone Bug

• نمایش همه محصولات Display All Products

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

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

• تصاویر محصول را بارگذاری کنید Upload Product Images

• تصاویر محصول را حذف کنید Delete Product Images

• محصول را حذف کنید Delete Product

مسیرهای مدیر - سفارشات ، کاربر و بررسی Admin Routes - Orders, User & Reviews

• نمایش همه سفارشات Display all Orders

• سفارش/به روزرسانی Process/Update Order

• حذف سفارش Delete Order

• نمایش همه کاربران Display all Users

• کاربر را به روز کنید Update User

• کاربر را با تصویر حذف کنید Delete User with Image

• بررسی محصولات Display Product Reviews

• بررسی محصولات را حذف کنید Delete Product Reviews

اعزام Deployment

• مؤلفه ای یافت نشد و برای استقرار آماده شد Not Found Component & Preparing for Deploy

• [به روز رسانی] استقرار در رندر [UPDATE] Deploy on Render

• استقرار در cyclic.sh Deploying on Cyclic.sh

سخنان پایانی Final Words

• تبریک می گویم !!! Congratulations!!!

[نسخه قدیمی] مقدمه ای برای دوره [OLD VERSION] Introduction to Course

• مقدمه ای برای دوره قدیمی Introduction to Old Course

• نسخه ی نمایشی پروژه قدیمی DEMO of Old Project

[نسخه قدیمی] بیایید با Backend Shopit شروع کنیم [OLD VERSION] Let's start with ShopIT Backend

• لینک GitHub Project Shopit را دریافت کنید Get ShopIT Project GitHub Link

• راه اندازی پروژه اساسی Basic Project Setup

• نصب و تنظیم Nodemon Installing & Setting up Nodemon

• ایجاد مسیر اول Creating First Route

• تنظیم محیط پستچی Setting Up Postman Environment

• نصب و راه اندازی MongoDB به صورت محلی Install & Setup MongoDB Locally

• رفع مهم در مورد سخنرانی بعدی Important Fix about Next Lecture

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

[نسخه قدیمی] اضافه کردن منابع محصولات [OLD VERSION] Adding Products Resource

• ایجاد مدل محصول Creating Product Model

• مدیر - ایجاد و ذخیره محصول Admin - Create & Save Product

• ایجاد بذر داده Creating Data Seeder

• نمایش همه محصولات Display all Products

• یک محصول واحد دریافت کنید Get Single Product

• نکته مهم در مورد سخنرانی بعدی Important Note about Next Lecture

• مدیر - محصول را به روز کنید Admin - Update Product

• نکته مهم در مورد سخنرانی بعدی Important Note about Next Lecture

• مدیر - محصول را حذف کنید Admin - Delete Product

[نسخه قدیمی] رسیدگی به خطای باطن [OLD VERSION] Backend Error Handling

• ایجاد کلاس کنترل خطا Creating Error Handler Class

• ایجاد خطاها میان افزار Creating Errors Middleware

• خطاهای تولید در مقابل توسعه Production Vs Development Errors

• جلب خطاهای async Catching Async Errors

• رسیدگی به رد وعده نامحسوس Handling Unhandled Promise Rejection

• رسیدگی به استثنائات غیر آموخته Handling Uncaught Exceptions

• اعتبار سنجی و خطای شناسه mongose Validation & Mongose ID Error

[نسخه قدیمی] اضافه کردن فیلتر ، صفحه بندی ، جستجو [OLD VERSION] Adding Filter, Pagination, Search

• محصولات را با کلمه کلیدی جستجو کنید Search Products by Keyword

• محصولات فیلتر Filter Products

• اضافه کردن صفحه بندی Adding Pagination

[نسخه قدیمی] احراز هویت و مجوز پس زمینه [OLD VERSION] Backend Authentication & Authorization

• ایجاد مدل کاربر Creating User Model

• رمزگذاری رمز عبور هنگام ثبت نام Encrypting Password while Registration

• توکن وب JSON ایجاد کنید Generate JSON Web Token

• کاربر را وارد کنید و نشانه را اختصاص دهید Login User & Assign Token

• ارسال نشانه JWT در کوکی Sending JWT Token in Cookie

• از مسیرهای کاربران غیرمجاز محافظت کنید Protect Routes from Unauthorized Users

• کاربر ورود به سیستم Logout User

• نقش ها و مجوزهای کاربر را مجاز کنید Authorize User Roles and Permissions

• افزودن کاربر در محصولات Adding User in Products

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

• ارسال ایمیل بازیابی رمز عبور Send Password Recovery Email

• بازنشانی رمز عبور جدید Reset New Password

• Token اشتباه و خطای JWT را منقضی کنید Handle Wrong JWT Token & Expire JWT Error

[نسخه قدیمی] مسیرهای کاربر [OLD VERSION] User Routes

• نشان دادن مشخصات کاربر Show User Profile

• رمز عبور را تغییر دهید/به روز کنید Change / Update Password

• مشخصات کاربر را به روز کنید Update User Profile

• مدیر - همه کاربران و کاربر خاص را دریافت کنید Admin - Get All Users & Specific User

• مدیر - کاربر را به روز و حذف کنید Admin - Update & Delete User

[نسخه قدیمی] اضافه کردن منابع سفارش [OLD VERSION] Adding Orders Resource

• ایجاد مدل سفارش Creating Order Model

• نمونه سفارش جدید JSON New Order Sample JSON

• ایجاد و ذخیره سفارش Create & Save Order

• یک سفارش واحد دریافت کرده و در سفارشات کاربر وارد شوید Get Single Order & Logged in User Orders

• مدیر - تمام سفارش را دریافت کنید Admin - Get all Order

• مدیر - سفارش به روزرسانی/پردازش Admin - Update / Process Order

• مدیر - سفارش را حذف کنید Admin - Delete Order

[نسخه قدیمی] بررسیهای کاربر [OLD VERSION] User Reviews

• بررسی جدید/به روزرسانی را اضافه کنید Add New / Update Review

• تمام بررسی های محصول را دریافت کنید Get all Reviews of Product

• بررسی محصول را حذف کنید Delete Product Review

[نسخه قدیمی] بیایید با Shopit Frontend شروع کنیم [OLD VERSION] Let's start with ShopIT Frontend

• Shopit HTML & CSS جزئیات ShopIT HTML & CSS Details

• نصب پروژه واکنش و تمیز کردن Installing React & Cleaning Project

• اجزای هدر و پاورقی Header & Footer Component

• صفحه اصلی Shopit ShopIT Homepage

• نکته مهم در مورد React Router Dom Important Note about react router DOM

• اجرای روتر React Implementing React Router

• به روزرسانی در مورد REACT ROUTER DOM Update about React Router DOM

• عناوین سفارشی را اضافه کنید Add Custom Titles

[نسخه قدیمی] اجرای Redux [OLD VERSION] Implementing Redux

• redux چیست؟ What is Redux?

• فروشگاه redux ایجاد کنید Create Redux Store

• همه محصولات کاهش دهنده All Products Reducer

• همه اقدامات محصولات All Products Action

• واکشی محصولات برای حالت Redux Fetching Products for Redux State

• جزء لودر Loader Component

• افزودن هشدار واکنش Adding React Alert

• جزئیات محصول کاهش دهنده و عمل Product Details Reducer & Action

• به روزرسانی در مورد مکان ، مطابقت ، تاریخ Update about location, match, history

• مؤلفه جزئیات محصول Product Details Component

[نسخه قدیمی] اضافه کردن صفحه بندی ، جستجو و فیلترها [OLD VERSION] Adding Pagination, Search & Filters

• اضافه کردن صفحه بندی Adding Pagination

• مؤلفه محصولات را جستجو کنید Search Products Component

• فیلتر بر اساس قیمت Filter by Price

• نکته مهم در مورد سخنرانی بعدی Important Note about Next Lecture

• فیلتر بر اساس طبقه بندی Filter by Category

• فیلتر با رتبه بندی Filter by Ratings

[نسخه قدیمی] کاربران و احراز هویت [OLD VERSION] Users & Authentication Frontend

• ورود به سیستم کاهش دهنده و عمل Login User Reducer & Action

• مؤلفه کاربر ورود به سیستم Login User Component

• ثبت نام و اقدام کاربر را ثبت کنید Register User Reducer & Action

• اضافه کردن ابر برای تصاویر Adding Cloudinary for Images

• مؤلفه کاربر را ثبت کنید Register User Component

• بارگیری در کاربر Load Logged In User

• نشان دادن کاربر در هدر Show User in Header

• کاربر ورود به سیستم Logout User

• نشان دادن مشخصات کاربر Show User Profile

• مؤلفه ProtectedRoute ProtectedRoute Component

• مؤلفه ProtectedRoute برای روتر React V6 ProtectedRoute Component for React Router v6

• به روزرسانی مشخصات و عملکرد مشخصات کاربر Update User Profile Reducer & Action

• مؤلفه پروفایل کاربر را به روز کنید Update User Profile Component

• رمز عبور کاربر را به روز کنید Update User Password

• رسیدگی به رمز ورود Handle Forgot Password

• رسیدگی به رمز عبور جدید Handle New Password

[نسخه قدیمی] اضافه کردن سبد خرید [OLD VERSION] Adding Shopping Cart

• انتخاب کمیت Handle Quantity Selection

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

• جزء چرخ دستی Cart Component

• رسیدگی به مقدار در اجزای سبد خرید Handle Quantity on Cart Component

• مورد سبد خرید را حذف کنید Remove Cart Item

• خلاصه سبد خرید Handle Cart Summary

[نسخه قدیمی] پرداخت و پرداخت ها [OLD VERSION] Handle Checkout & Payments

• رسیدگی به اطلاعات حمل و نقل Handle Shipping Info

• مؤلفه مراحل پرداخت Checkout Steps Component

• جزئیات سفارش را تأیید کنید Confirm Order Details

• اضافه کردن راه راه در باطن Adding Stripe on Backend

• ارسال API نوار برای جلو Send Stripe API to Frontend

• مؤلفه پرداخت Payment Component

• پردازش پرداخت با نوار Process Payment with Stripe

• سفارش جدید را کاهش دهنده و عمل ایجاد کنید Create New Order Reducer & Action

• سفارش و تأیید سفارش Place & Confirm Order

[نسخه قدیمی] سفارشات و بررسی های کاربر [OLD VERSION] User Orders & Reviews

• وارد شده در سفارشات کاربر کاهش دهنده و عمل Logged in User Orders Reducer & Action

• در مؤلفه سفارشات کاربر وارد شده است Logged In User Orders Component

• نمایش جزئیات سفارش Display Order Details

• ارسال بازبینی کاهش دهنده و اقدام Submit Review Reducer & Action

• ارسال بررسی Submit Review

• نمایش همه بررسی ها Display all Reviews

[نسخه قدیمی] مسیرهای مدیر - قسمت 1 [OLD VERSION] Admin Routes - Part 1

• مؤلفه نوار کناری Admin Sidebar Component

• جزء داشبورد Dashboard Component

• نمایش همه محصولات Display All Products

• کاهش دهنده محصول جدید و عمل New Product Reducer & Action

• مؤلفه محصول جدید New Product Component

• محصول را حذف کنید Delete Product

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

[نسخه قدیمی] مسیرهای مدیر - قسمت 2 [OLD VERSION] Admin Routes - Part 2

• نمایش همه سفارشات Display all Orders

• مؤلفه سفارش فرآیند Process Order Component

• حذف سفارش Delete Order

• نمایش همه کاربران Display all Users

• کاربر را به روز کنید Update User

• کاربر را حذف کنید Delete User

• بررسی محصولات Display Product Reviews

• بررسی محصولات را حذف کنید Delete Product Reviews

[نسخه قدیمی] استقرار [OLD VERSION] Deployment

• اتصال به DB آنلاین و آماده سازی برای استقرار Connecting to Online DB & Preparing for deploy

• فشار به فروشگاه در GitHub Push on ShopIT on GitHub

• استقرار Shopit در Heroku Deploying ShopIT on Heroku

[نسخه قدیمی] کلمات نهایی [OLD VERSION] Final Words

• وظیفه/تکلیف شما برای Shopit Your Task / Assignment for ShopIT

• تبریک می گویم !!! Congratulations !!!