آموزش ساخت اپلیکیشن تجارت الکترونیک MERN با ریداکس و Tailwind CSS 2025 - آخرین آپدیت

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

Welcome to course

• Diving into our MERN E-commerce app-شروع کار با برنامه تجارت الکترونیک MERN ما Diving into our MERN E-commerce app

• Course Prerequisites – Getting Ready-پیش‌نیازهای دوره – آماده‌سازی Course Prerequisites – Getting Ready

Start with backend-شروع با بخش پشتیبان (بک‌اند) Start with backend

• Create express server and install nodemon-ایجاد سرور اکسپرس و نصب nodemon Create express server and install nodemon

• Install mongoose and create product schema-نصب mongoose و ایجاد schema محصول Install mongoose and create product schema

• Implement product controller Part 1-پیاده‌سازی کنترلر محصول قسمت ۱ Implement product controller Part 1

• Implement product controller Part 2-پیاده‌سازی کنترلر محصول قسمت ۲ Implement product controller Part 2

• Create product routes-ایجاد مسیرهای محصول Create product routes

• Create project db in mongodb atlas and create db file and install .env-ایجاد پایگاه داده پروژه در mongodb atlas و ایجاد فایل پایگاه داده و نصب .env Create project db in mongodb atlas and create db file and install .env

• Create user mongodb schema-ایجاد schema کاربر mongodb Create user mongodb schema

• Install json web token and create token-نصب json web token و ایجاد توکن Install json web token and create token

• User controllers part 1 ( sign in and sign up )-کنترلرهای کاربر قسمت ۱ (ورود و ثبت‌نام) User controllers part 1 ( sign in and sign up )

• User controllers part 2-کنترلرهای کاربر قسمت ۲ User controllers part 2

• User controllers part 3 for admin user-کنترلرهای کاربر قسمت ۳ برای کاربر ادمین User controllers part 3 for admin user

• Implement user routes-پیاده‌سازی مسیرهای کاربر Implement user routes

• Create auth middlware for user and admin user-ایجاد میان‌افزار احراز هویت (auth middleware) برای کاربر و کاربر ادمین Create auth middlware for user and admin user

• Protect user and product routes by middleware-محافظت از مسیرهای کاربر و محصول با استفاده از میان‌افزار Protect user and product routes by middleware

• Install cors and cookie parser middlewares-نصب میان‌افزارهای cors و cookie parser Install cors and cookie parser middlewares

• Upload data to mongo db-آپلود داده‌ها به mongo db Upload data to mongo db

• Test user routes in postman-تست مسیرهای کاربر در postman Test user routes in postman

• Test products routes in postman-تست مسیرهای محصولات در postman Test products routes in postman

Move to frontend-حرکت به سمت رابط کاربری (فرانت‌اند) Move to frontend

• Install vite react-نصب vite react Install vite react

• Start with redux toolkit ( configure store and api slice )-شروع با redux toolkit (پیکربندی store و api slice) Start with redux toolkit ( configure store and api slice )

• Implement auth slice and user api slice-پیاده‌سازی auth slice و user api slice Implement auth slice and user api slice

• Product api slice-product api slice Product api slice

• Page number and search functionality in backend-شماره صفحه و قابلیت جستجو در بخش پشتیبان Page number and search functionality in backend

• Create first component part 1, header functionality-ایجاد اولین کامپوننت قسمت ۱، عملکرد هدر Create first component part 1, header functionality

• Header component part 2, start with jsx-کامپوننت هدر قسمت ۲، شروع با jsx Header component part 2, start with jsx

• Header component part 3-کامپوننت هدر قسمت ۳ Header component part 3

• Header part4, implement routes in main file and run the app-هدر قسمت ۴، پیاده‌سازی مسیرها در فایل اصلی و اجرای برنامه Header part4, implement routes in main file and run the app

• Loader, Message and search components-کامپوننت‌های Loader, Message و جستجو Loader, Message and search components

• Rating and Pagination components-کامپوننت‌های Rating و Pagination Rating and Pagination components

• Product component-کامپوننت محصول Product component

• Implement Home screen-پیاده‌سازی صفحه اصلی Implement Home screen

• Product screen part 1-صفحه محصول قسمت ۱ Product screen part 1

• Product screen part 2-صفحه محصول قسمت ۲ Product screen part 2

• Product screen part 3-صفحه محصول قسمت ۳ Product screen part 3

• Product screen part 4-صفحه محصول قسمت ۴ Product screen part 4

• Fix in Product screen and add it's route-رفع اشکال در صفحه محصول و افزودن مسیر آن Fix in Product screen and add it's route

• Create form container and start with login screen-ایجاد کانتینر فرم و شروع با صفحه ورود Create form container and start with login screen

• Continue with login screen-ادامه با صفحه ورود Continue with login screen

• Test login and fix some bugs-تست ورود و رفع برخی اشکالات Test login and fix some bugs

• Implement error middleware in backend-پیاده‌سازی میان‌افزار خطا در بخش پشتیبان Implement error middleware in backend

• Register screen-صفحه ثبت‌نام Register screen

• Implement check token expiration date-پیاده‌سازی بررسی تاریخ انقضای توکن Implement check token expiration date

• Implement cart slice and cart utils functionality-پیاده‌سازی cart slice و قابلیت‌های cart utils Implement cart slice and cart utils functionality

• Implement cart functionality to product screen and header-پیاده‌سازی عملکرد سبد خرید برای صفحه محصول و هدر Implement cart functionality to product screen and header

• Cart screen part 1-صفحه سبد خرید قسمت ۱ Cart screen part 1

• Cart screen part 2-صفحه سبد خرید قسمت ۲ Cart screen part 2

Back to backend-بازگشت به بخش پشتیبان Back to backend

• Implement order schema-پیاده‌سازی schema سفارش Implement order schema

• calculate prices for items-محاسبه قیمت‌ها برای اقلام calculate prices for items

• Paypal setup-تنظیمات پی‌پل Paypal setup

• Order controllers part 1-کنترلرهای سفارش قسمت ۱ Order controllers part 1

• Order controllers part 2-کنترلرهای سفارش قسمت ۲ Order controllers part 2

• Order routes-مسیرهای سفارش Order routes

Order UI screens-صفحات رابط کاربری سفارش Order UI screens

• Orders api slice-orders api slice Orders api slice

• Private route for private screens and start with shipping screen part 1-مسیر خصوصی برای صفحات خصوصی و شروع با صفحه حمل و نقل قسمت ۱ Private route for private screens and start with shipping screen part 1

• Shipping screen part 2-صفحه حمل و نقل قسمت ۲ Shipping screen part 2

• Payment screen-صفحه پرداخت Payment screen

• Place order part 1-ثبت سفارش قسمت ۱ Place order part 1

• Place order part 2-ثبت سفارش قسمت ۲ Place order part 2

• Order Screen part 1-صفحه سفارش قسمت ۱ Order Screen part 1

• Order Screen part 2-صفحه سفارش قسمت ۲ Order Screen part 2

• Order Screen part 3-صفحه سفارش قسمت ۳ Order Screen part 3

• Profile screen part 1-صفحه پروفایل قسمت ۱ Profile screen part 1

• Profile screen part 2-صفحه پروفایل قسمت ۲ Profile screen part 2

• Profile screen part 3-صفحه پروفایل قسمت ۳ Profile screen part 3

Admin user section-بخش کاربر ادمین Admin user section

• Order list screen-صفحه لیست سفارش‌ها Order list screen

• Implement admin private route-پیاده‌سازی مسیر خصوصی ادمین Implement admin private route

• User list screen-صفحه لیست کاربران User list screen

• User Edit screen-صفحه ویرایش کاربر User Edit screen

• Product screen-صفحه محصول Product screen

• Fix upload image path in backend-رفع اشکال مسیر آپلود تصویر در بخش پشتیبان Fix upload image path in backend

• Implement upload routes using cloudinary-پیاده‌سازی مسیرهای آپلود با استفاده از cloudinary Implement upload routes using cloudinary

• Product edit screen part 1-صفحه ویرایش محصول قسمت ۱ Product edit screen part 1

• Product edit screen part 2 (The end of course)-صفحه ویرایش محصول قسمت ۲ (پایان دوره) Product edit screen part 2 (The end of course)