آموزش ساخت وب سایت تجارت الکترونیک مانند آمازون [React & Node & MongoDB]

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

معرفی Introduction

• نصب Tools در ویندوز Install Tools On Windows

• Tools را در مک نصب کنید Install Tools On Mac

• برنامه های افزودنی کد VS را نصب و پیکربندی کنید Install & Configure VS Code Extensions

واکنش نشان دهید React

• ایجاد React App Create React App

• [اختیاری] مخزن Git ایجاد کنید [OPTIONAL] Create Git Repository

• ایجاد React App Create React App

صفحه اصلی Home Screen

• لیست محصولات List Products

• مسیریابی را اضافه کنید Add Routing

• سرور Node.JS ایجاد کنید Create Node.JS Server

• واکشی محصولات از Backend Fetch Products From Backend

• مدیریت حالت توسط Reducer Hooks Manage State By Reducer Hooks

• لیست محصولات List Products

React Bootstrap React Bootstrap

• بوت استرپ را اضافه کنید Add Bootstrap

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

صفحه نمایش محصول Product Screen

• افزودن صفحه نمایش محصول Add Product Screen

• کامپوننت بارگیری و پیام را ایجاد کنید Create Loading and Message Component

صفحه نمایش سبد خرید Cart Screen

• React Context را ایجاد کنید Create React Context

• قابلیت افزودن به سبد خرید کامل Complete Add To Cart Functionality

• ایجاد صفحه سبد خرید Create Cart Screen

• صفحه کامل سبد خرید Complete Cart Screen

صفحه ورود به سیستم Sign-in Screen

• ایجاد صفحه ورود به سیستم Create Signin Screen

• به MongoDB متصل شوید Connect To MongoDB

• تولید محصولات نمونه Generate Sample Products

• کاربران نمونه تولید کنید Generate Sample Users

• Signin API را پیاده سازی کنید Implement Signin API

• صفحه ورود کامل Complete Signin Screen

جادوگر پرداخت Checkout Wizard

• ایجاد صفحه حمل و نقل Create Shipping Screen

• ایجاد صفحه ثبت نام Create Sign Up Screen

• صفحه انتخاب روش پرداخت را اجرا کنید Implement Select Payment Method Screen

• ایجاد صفحه سفارش مکان Create Place Order Screen

• اجرای اقدام سفارش مکان Implement Place Order Action

• ایجاد صفحه سفارش Create Order Screen

• پرداخت سفارش از طریق پی پال Pay Order By PayPal

• ایجاد صفحه حمل و نقل Create Shipping Screen

• اجرای اقدام سفارش مکان Implement Place Order Action

• ایجاد صفحه سفارش Create Order Screen

منطقه مشتری Customer Area

• نمایش تاریخچه سفارش Display Order History

• ایجاد صفحه نمایه کاربر Create User Profile Screen

• انتشار به Heroku Publish To Heroku

• انتشار در رندر Publish On Render

• نوار کناری و جعبه جستجو ایجاد کنید Create Sidebar and Search Box

• ایجاد صفحه جستجو Create Search Screen

منطقه مدیریت Admin Area

• ایجاد صفحه داشبورد Create Dashboard Screen

• مدیریت محصولات Manage Products

• ایجاد صفحه ویرایش محصول Create Product Edit Screen

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

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

• حذف سفارش Delete Order

• لیست کاربران List Users

• ویرایش کاربر Edit User

• حذف کاربر Delete User

• ایجاد نمای مدیریت Create Admin View

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

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

• فهرست سفارشات List Orders

• حذف محصول Delete Product

• تحویل سفارش Deliver Order

خصوصیات پیشرفته Advanced Features

• آدرس را در نقشه گوگل انتخاب کنید Choose Address On Google Map

• رفع اشکال برای اجرای محلی از github Bug Fix for running locally from github

• پیاده سازی صفحه بندی Implement Pagination

• رسید سفارش از طریق پست الکترونیکی Email order receipt by mailgun

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

• ایجاد صفحه نمودار داشبورد Create Dashboard Chart Screen

ارتقا به React 18 Upgrade To React 18

• ارتقا به React 18 Upgrade To React 18

Old Amazona [نسخه React و Redux] Old Amazona [React & Redux Version]

• معرفی Introduction

• معرفی Introduction

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

• طراحی قالب وب سایت Design Website Template

• لیست محصولات را ایجاد کنید Create Products List

• کد را در Github به اشتراک بگذارید Share Code On Github

• ایجاد رتبه بندی و جزء محصول Create Rating And Product Component

• ساخت صفحه نمایش محصول Build Product Screen

• سرور Node & Express ایجاد کنید Create Node & Express Server

• بارگیری محصولات از Backend Load Products From Backend

• ESLint For Coding Linting را نصب کنید install ESLint For Coding Linting

• افزودن Redux به صفحه اصلی Add Redux To Home Screen

• Redux را به صفحه محصول اضافه کنید Add Redux To Product Screen

• رویداد افزودن به سبد خرید را مدیریت کنید Handle Add To Cart Event

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

• ساخت صفحه سبد خرید Build Shopping Cart Screen

• عمل حذف از سبد خرید را اجرا کنید Implement Remove From Cart Action

• به MongoDB متصل شوید و کاربران نمونه ایجاد کنید Connect to MongoDB And Create Sample Users

• Sign-In Backend را پیاده سازی کنید Implement Sign-In Backend

• طراحی صفحه ورود به سیستم Design Signin Screen

• محصولات نمونه را در MongoDB ایجاد کنید Create Sample Products In MongoDB

• اجرای عمل ورود به سیستم Implement Sign-In Action

• ایجاد صفحه ثبت نام Create Register Screen

• ایجاد صفحه پرداخت Create Payment Screen

• طراحی صفحه نمایش سفارش Design Place Order Screen

• ایجاد API سفارش مکان Create Place Order API

• دکمه PayPal را اضافه کنید Add PayPal Button

• سفارش پرداخت Pay Order

• نمایش مشخصات کاربر Display User Profile

• نمایش تاریخچه سفارشات Display Orders History

• به روز رسانی پروفایل کاربری Update User Profile

• ایجاد نمای مدیریت Create Admin View

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

• ساخت صفحه ویرایش محصول Build Product Edit Screen

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

• فهرست سفارشات List Orders

• حذف محصول Delete Product

• حذف سفارشات Delete Orders

• تحویل سفارش Deliver Order

• در هروکو مستقر شوید Deploy on Heroku

کاربران مدیریت Admin Users

• لیست کاربران List Users

• حذف کاربران Delete Users

• ویرایش کاربران Edit Users

چند فروشنده Multi-Vendors

• اجرای نمای فروشنده Implement Seller View

• ایجاد صفحه فروشنده Create Seller Page

• چرخ فلک را برای فروشندگان برتر اضافه کنید Add Carousel For Top Sellers

• سفارش اجباری اقلام از یک فروشنده Force Order Items From One Seller

جستجو و مرتب سازی محصولات Search And Sort Products

• کادر جستجو و صفحه جستجو را ایجاد کنید Create Search Box and Search Screen

• نوار کناری دسته و فیلتر را اضافه کنید Add Category Sidebar and Filter

• مرتب سازی و فیلتر کردن محصولات Sort And Filter Products

رتبه بندی و بررسی محصولات Rate and Review Products

• رتبه بندی و بررسی محصولات Rate and Review Products

چت زنده با مشتریان Live Chat With Customers

• مقدمه ای برای چت زنده با SocketIO Introduction To Live Chat With SocketIO

• اتصال به سوکت در سرور Connect To Socket In Server

• رویدادهای پیام را مدیریت کنید Handle Message Events

• ایجاد رابط کاربری صفحه مدیریت Create Admin Screen UI

• افزودن حالت به صفحه چت ادمین Add State To Admin Chat Screen

• رویدادها را به صفحه چت مدیریت اضافه کنید Add Events To Admin Chat Screen

• چت باکس را اجرا کنید Implement Chat Box

• جعبه گفتگو را کامل کنید Complete Chat Box

ارتقا به React Router Dom 6 Upgrade To React Router Dom 6

• ارتقا به react-router-dom 6 Upgrade to react-router-dom 6

ویژگی های جدید New Features

• فراموشی و بازنشانی رمز عبور Forget & Reset Password