آموزش پروژه تجارت الکترونیک MERN Stack: قسمت 2: فقط Frontend

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

دموی پروژه نهایی FINAL PROJECT DEMO

• عملکردهای مشتریان نسخه ی نمایشی Customers Functionalities Demo

• عملکردهای مدیریت نسخه ی نمایشی Admin Functionalities Demo

• نسخه نمایشی زنده پروژه نهایی Final Project Live DEMO

حتما بخوانید [مهم!!!] MUST READ [IMPORTANT !!!]

• نحوه شرکت در این دوره How To Take This Course

• کدهای منبع نهایی پروژه را دانلود کنید Download Final Project Source Codes

شروع شدن GETTING STARTED

• نصب قالب استارتر Installing Starter Template

• TailwindCSS را نصب کنید Install TailwindCSS

• بررسی ساختار پروژه Project Structure Walkthrough

• نصب‌های Redux Toolkit Redux Toolkit Installations

• کد منبع نهایی پروژه Final Project Source Code

احراز هویت و مجوز AUTHENTICATION & AUTHORIZATION

• وضعیت اولیه کاربران Users Initial State

• اقدام ورود Login Action

• برش های کاربران Users Slices

• به فروشگاه Redux متصل شوید Connect To Redux Store

• ارسال اقدام برای ورود به سیستم Dispatch Action To Login

• خطای Cors رفع شد Cors Error Fixed

• سفارشی کردن VSCODE اختیاری Customise VSCODE OPTIONAL

• پس از ورود به سیستم تغییر مسیر دهید Redirect After Login

• نمایش خطا و بارگیری پس از ورود Display Error And Loading After Login

• نمایش خطا و موفقیت با استفاده از SweetAlert Displaying Error and Success Using SweetAlert

• نمایش پیغام خطا هنگام ورود Display Error Message When Login

• توکن را در LocalStorage ذخیره کنید Save Token Into LocalStorage

• قدم زدن از طریق مؤلفه نوار ناوبری Walking Through The Navbar Component

• لینک های عمومی و خصوصی Public And Private Links

• حفاظت از مسیرها Protecting Routes

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

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

• در حال بارگذاری کامپوننت Loading Component

• بارگیری ثبت نام کاربر و نمایش خطا User Registration Loading And Error Displaying

• بازنشانی خطا و اقدامات موفقیت آمیز Reset Error And Success Actions

داشبورد مدیریت (محصولات) ADMIN DASHBOARD (PRODUCTS)

• نمای کلی داشبورد مدیریت Overview Of Admin Dashboard

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

• برش محصول را ایجاد کنید Create Product Slice

• ورود مداوم کاربر به فروشگاه Redux Persist Login User Into Redux Store

• رمز عبور به اقدام محصول Pass Token To Product Action

• اقدام ارسال برای ایجاد محصول Dispatch Action To Create Product

• اندازه های محصول جزء را انتخاب کنید Product Sizes Select Component

• دسته بندی ها اقدام Categories Action

• نمایش دسته‌ها در ورودی انتخاب کنید Display Categories Inside Select Input

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

• وارد کردن رنگ محصولات به شکل ورودی Getting Products Colors Into Form Input

داشبورد مدیریت (آپلود تصویر محصولات) ADMIN DASHBOARD (PRODUCTS IMAGE UPLOAD)

• آپلود تصاویر محصول Product Images Upload

• ارسال اطلاعات محصول به اقدام محصول Sending Product Data To Product Action

• خطای ایجاد محصول رفع شد Product Creation Error Fixed

• نمایش در حال بارگذاری، خطا برای ایجاد محصول Display Loading, Error For Product Creation

• اعتبار سنجی تصویر Image Validation

• اقدام واکشی همه محصولات Fetch All Products Action

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

• افزودن محصولات جدید Adding New Products

• نمایش جزئیات محصول Display Product Details

دسته بندی محصولات PRODUCTS CATEGORIES

• اکشن ایجاد دسته اصلاح شده Modified Create Category Action

• تغییر فرم افزودن دسته Modified Add Category Form

• ارسال اقدام برای ایجاد دسته Dispatch Action To Create Category

• نمایش دسته بندی بارگیری و خطا Displaying Category Loading & Error

• رفع خطای ایجاد دسته Fixed Category Creation Error

• واکشی همه دسته ها Fetching All Categories

• استفاده از دسته ها به عنوان پیوندهای نوار ناوبری Using Categories As Navbar Links

• نمایش دسته بندی های خانه Displaying Home Categories

• نمایش همه دسته ها Display All Categories

فیلتر کردن محصولات PRODUCTS FILTERING

• بررسی اجزای فیلتر کردن محصول Product Filtering Component Walkthrough

• فیلتر کردن محصولات قسمت 1 Products Filtering Part 1

• فیلتر کردن محصولات قسمت 2 Products Filtering Part 2

• نمایش همه محصولات بدون فیلتر Display All Products Without Filtering

• محصولات Filer بر اساس دسته Filer Products By Category

• فیلتر محصولات بر اساس نام تجاری Filter Products By Brand

• محصولات را بر اساس قیمت و اندازه فیلتر کنید Filter Products By Price and Size

• محصولات را بر اساس رنگ فیلتر کنید Filter Products By Color

• نمایش محصولات در حال بارگیری و خطا Display Products Loading & Error

• برندهای محصول را ایجاد کنید Create Product Brands

• رنگ های محصول را ایجاد کنید Create Product Colors

مدیریت سبد خرید CART MANAGEMENT

• فرآیند قرار دادن سفارش و اصلاح API Order Placement Process And API Modification

• اکشن افزودن به سبد خرید Add To Cart Action

• افزودن محصول به سبد خرید Add Product To Cart

• افزودن محصول به سبد خرید با رنگ و اندازه Adding Product To Cart With Colour and Size

• اندازه سفارش سبد خرید و اعتبارسنجی رنگ Cart Order Size and Colour Validation

• اقلام سبد خرید را از LocalStorage دریافت کنید Get Cart Items From LocalStorage

• از تکرار محصولات در سبد خرید خودداری کنید Avoid Duplication Of Products In Cart

• نمایش تمامی اقلام سبد خرید Displaying All Cart Items

• راهنمای سبد خرید Shopping Cart Walkthrough

• تغییر تعداد سفارش قسمت 1 Changing Order Qty Part 1

• تغییر تعداد سفارش قسمت 2 Changing Order Qty Part 2

• سبد خرید قیمت محصول ثابت است Cart Product Price Fixed

• به روز رسانی محصول در صورت تغییر مقادیر Updating Product When Quantities Changes

• حذف محصول از سبد خرید Removing Product From Cart

• صفحه سفید ثابت محصول و قیمت کل به LocalStorage اضافه شد Fixed Product White Screen and total Price Added to LocalStorage

• محاسبه خلاصه کل سفارش Calculate Total Order Summary

• نمایش پویا کمیت محصولات Dynamically Display Products Qunatities

مدیریت کوپن محصولات PRODUCTS COUPONS MANAGEMENT

• ایجاد و واکشی همه اقدامات کوپن Create And Fetch All Coupons Actions

• API کوپن اصلاح شد Coupon API Modified

• واکشی اقدام کوپن تک Fetch Single Coupon Action

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

• نمایش خطای کوپن، موفقیت و بارگیری Display Coupon Error, Success & Loading

• درخواست کوپن برای خلاصه سفارش Apply Coupon To Order Summary

• بازنشانی فرم کوپن Reset Coupon Form

فرآیند ثبت سفارش ORDER PLACEMENT PROCESS

• کامپوننت پرداخت را سفارش دهید Order Payment Component Walkthrough

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

• به روز رسانی اقدام آدرس حمل و نقل Update Shipping Address Action

• اقدام ارسال برای به‌روزرسانی آدرس ارسال کاربر Dispatch Action To Update User Shipping Address

• نمایش به روز رسانی آدرس حمل و نقل بارگیری و خطا Display Update Shipping Address Loading & Error

• عملکرد نمایه کاربر User Profile Action

• نمایش آدرس حمل و نقل Displaying Shipping Address

• رفع اشکال آدرس حمل و نقل Fixed Shipping Address Bug

• اقدام ایجاد سفارشات Creating Of Orders Action

• اقدام ارسال سفارش Dispatch Order Placement Action

• ثبت سفارش ثابت Fixed Order Placement

• نمایش بارگیری هنگام ثبت سفارش Display Loading When Placing Orders

• نمایش تعداد اقلام سبد خرید و سفارش خالی پس از قرار دادن Show Number Of Cart Items and Empty Order After Placement

• غیرفعال کردن دکمه سفارش در صورت خارج شدن مقدار سهام Disable Order Button If Out Od Stock

بررسی محصولات PRODUCTS REVIEW

• بررسی مولفه بررسی محصول Product Review Component Walkthrough

• اقدام بررسی محصول Product Review Action

• ارسال اقدام برای بررسی محصول Dispatch Action To Review Product

• افزودن نظر به یک محصول Add Review to a Product

• API اصلاح شده نویسنده بازبینی Modified Author Of Review API

ADMMIN (مدیریت محصولات) ADMMIN (PRODUCTS MANAGEMENT)

• بررسی اجزای نمایه مشتری Customer Profile Component Walkthrough

• واکشی نمایه مشتری Fetch Customer Profile

• مدیر واکشی همه محصولات Admin Fetching All Products

• نمایش در انبار و خارج از انبار Display In Stock And Out Of Stock

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

• به روز رسانی اصلاح شده فرم محصول Modified Update Product form

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

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

• خطای به روز رسانی محصول رفع شد Product Update Error Fixed

• نمایش همه سفارشات Display All Oders

• اقدام آماری سفارش Order Statistics Action

• نمایش آمار سفارش Displaying Order Statistics

• به روز رسانی فرم وضعیت سفارش Update Order Status Form

• به روز رسانی سفارش برای ارسال Update Order To Shipped

• تغییر مسیر پس از به روز رسانی وضعیت سفارش Redirect After Update Order Status

• نمایش همه مشتریان Displaying All Customers

• موارد تکراری مشتریان را حذف کنید Remove Duplications Of Customers

کوپن های مدیریت ADMIN-MANAGING COUPONS

• ارسال اقدام برای ایجاد کوپن Dispatch Action To Create Coupon

• نمایش همه کوپن ها Display All Coupons

• به روز رسانی کوپن Update Coupon

• حذف کوپن Delete Coupon

بهبودهای برنامه و رفع خردسالان APPLICATION IMPROVEMENTS AND FIXING MINORS

• واکشی همه دسته ها Fetch All Categories

• همه رنگ ها و دسته بندی های مارک ها را واکشی کنید Fetch All Colors And Brands Categories

• بهبود نوار ناوبری Navbar Improvement

• کاربر خروج از سیستم Logout User

• خطای خروج رفع شد Logout Error Fixed

• پس از ورود به سیستم تغییر مسیر دهید Redirect After Login

• حفاظت از اجزای خصوصی Protecting Private Components

• نمایش کوپن در نوار ناوبری Show Coupon On Navbar

• اجتناب از پاپ آپ های مزاحم Avoid Annoying Popups

• CSS داشبورد مدیریت را تغییر دهید -اختیاری Modify Admin Dashboard CSS -OPTIONAL

• نمایش روزهای باقی مانده کوپن Display Coupon Days Left

• پنهان کردن پیوندهای عمومی هنگام ورود کاربر Hide Public Links When User Login

• تغییر مسیر پس از ثبت نام ثابت شد Fixed Redirect After Register

• ارسال فقط توکن به مشتری Send Only Token To Client

• بارگذاری مجدد پس از ثبت نام و ورود به سیستم Reload After Registration & Login

• پیوند رفتن به داشبورد مدیریت را نشان دهید Show Go To Admin Dashboard Link

• چرا وضعیت پرداخت Oder به روز نمی شود Why Oder Payment Status Is Not Updated

گسترش DEPLOYMENT

• آماده سازی برای استقرار Preparing For Deployment

• مستقر در Netlify Deploy To Netlify

• رفع خطای Netlify Fixed Netlify Error