فلش‌کارت‌های آموزشی پروژه محور: ساخت پلتفرم E-commerce با React و Next.js

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره پروژه محور: ساخت پلتفرم E-commerce با React و Next.js

موضوع کلی: برنامه نویسی

موضوع میانی: ری‌اکت (React)

📋 سرفصل‌های دوره

• 1. مفاهیم پایه HTML، CSS و JavaScript پیش از شروع React
• 2. React چیست و چرا React؟
• 3. نصب Node.js و npm/yarn و ایجاد یک پروژه React
• 4. ساختار یک پروژه React و آشنایی با فایل‌های اصلی
• 5. کامپوننت‌ها: قلب React (Function Component vs Class Component)
• 6. JSX: نوشتن HTML در JavaScript
• 7. ایجاد اولین کامپوننت React
• 8. Props: انتقال داده از والد به فرزند
• 9. State: مدیریت داده‌های پویا در کامپوننت
• 10. Lifecycle Methods (در Class Components): componentDidMount, componentDidUpdate, componentWillUnmount
• 11. Hooks: جایگزین مدرن Lifecycle Methods (useState, useEffect)
• 12. استفاده از useState برای مدیریت State
• 13. useEffect: انجام عملیات جانبی (Side Effects)
• 14. شرطی سازی رندرینگ: نمایش محتوا بر اساس شرایط مختلف
• 15. List & Keys: رندر کردن لیست‌ها به صورت پویا
• 16. Form Handling: مدیریت فرم‌ها در React
• 17. Controlled Components vs Uncontrolled Components
• 18. رویدادها (Events): مدیریت کلیک‌ها، تایپ‌ها و سایر رویدادها
• 19. کار با APIها: دریافت و ارسال داده با fetch/axios
• 20. REST API چیست و چگونه کار می‌کند؟
• 21. Async/Await: مدیریت عملیات ناهمزمان
• 22. کار با JSON و تبدیل داده‌ها
• 23. Component Composition: ترکیب کامپوننت‌ها برای ساخت رابط‌های کاربری پیچیده
• 24. Context API: مدیریت State سراسری در برنامه
• 25. Redux: مدیریت State پیشرفته (معرفی و مفاهیم اصلی)
• 26. Redux Toolkit: ساده‌سازی استفاده از Redux
• 27. Actions, Reducers, Store: اجزای اصلی Redux
• 28. Thunk: مدیریت عملیات ناهمزمان در Redux
• 29. Selectors: دسترسی به State با کارایی بالا
• 30. Routing در React: معرفی React Router
• 31. نصب و پیکربندی React Router
• 32. ایجاد مسیرها (Routes) و لینک‌ها (Links)
• 33. Navigation: هدایت کاربر بین صفحات
• 34. Protected Routes: محدود کردن دسترسی به صفحات
• 35. Custom Hooks: ایجاد منطق قابل استفاده مجدد
• 36. Error Handling: مدیریت خطاها در React
• 37. Debugging: یافتن و رفع اشکالات
• 38. Unit Testing: تست کامپوننت‌ها با Jest و React Testing Library
• 39. End-to-End Testing: تست کل برنامه با Cypress
• 40. Code Splitting: بهبود عملکرد با بارگذاری تنبل (Lazy Loading)
• 41. Memoization: بهینه‌سازی رندرینگ کامپوننت‌ها با useMemo و useCallback
• 42. Optimization: تکنیک‌های کلی بهبود عملکرد React
• 43. Accessibility (A11y): ساخت رابط کاربری قابل دسترس برای همه
• 44. React Fragments: گروه بندی عناصر بدون افزودن گره اضافی به DOM
• 45. Portals: رندر کردن عناصر در خارج از سلسله مراتب DOM
• 46. Higher-Order Components (HOCs): الگوهای پیشرفته برای استفاده مجدد از منطق
• 47. Render Props: روش دیگری برای استفاده مجدد از منطق
• 48. Styling در React: روش‌های مختلف استایل‌دهی
• 49. Inline Styles: استایل‌دهی مستقیم در کامپوننت
• 50. CSS Modules: Scope کردن استایل‌ها به کامپوننت‌ها
• 51. Styled Components: نوشتن CSS در JavaScript
• 52. UI Libraries: معرفی Material-UI, Ant Design, Bootstrap
• 53. انتخاب UI Library مناسب برای پروژه
• 54. استفاده از Material-UI برای ساخت کامپوننت‌های UI
• 55. Next.js: معرفی و مزایای آن
• 56. Static Site Generation (SSG) در Next.js
• 57. Server-Side Rendering (SSR) در Next.js
• 58. Client-Side Rendering (CSR) در Next.js
• 59. Pages Router در Next.js
• 60. App Router در Next.js (Next.js 13+)
• 61. فایل‌بندی و ساختار پروژه Next.js
• 62. Routing در Next.js: Dynamic Routes
• 63. API Routes در Next.js: ایجاد API Backend
• 64. Middleware در Next.js: اجرای کد قبل از درخواست
• 65. Image Optimization در Next.js: بهینه‌سازی تصاویر
• 66. Fonts Optimization در Next.js: بهینه‌سازی فونت‌ها
• 67. Metadata و SEO در Next.js
• 68. Environment Variables در Next.js: مدیریت متغیرهای محیطی
• 69. Deployment: دیپلوی پروژه Next.js به Vercel, Netlify, AWS
• 70. ایجاد پروژه Next.js برای پلتفرم E-commerce
• 71. طراحی دیتابیس برای E-commerce
• 72. ایجاد مدل‌های محصول، دسته بندی و کاربر
• 73. پیاده‌سازی API برای مدیریت محصولات (CRUD)
• 74. پیاده‌سازی API برای مدیریت دسته‌بندی‌ها (CRUD)
• 75. پیاده‌سازی API برای مدیریت کاربران (ثبت نام، ورود، پروفایل)
• 76. ساخت صفحه اصلی (Homepage) با نمایش محصولات ویژه
• 77. ساخت صفحه فهرست محصولات (Product Listing) با فیلتر و جستجو
• 78. ساخت صفحه جزئیات محصول (Product Detail)
• 79. سبد خرید (Cart): پیاده‌سازی افزودن، حذف و ویرایش محصولات
• 80. محاسبه قیمت کل سبد خرید
• 81. Checkout: فرآیند پرداخت و نهایی کردن سفارش
• 82. پیاده‌سازی درگاه پرداخت (Stripe, PayPal)
• 83. مدیریت سفارشات (Orders): پیگیری و مشاهده سفارشات
• 84. پنل مدیریت (Admin Panel): مدیریت محصولات، دسته‌بندی‌ها و کاربران
• 85. احراز هویت (Authentication): پیاده‌سازی Login و Logout
• 86. Authorization: سطح دسترسی و نقش‌ها (Roles)
• 87. استفاده از Local Storage یا Cookies برای نگهداری اطلاعات کاربر
• 88. پیاده‌سازی جستجو در سایت E-commerce
• 89. بهینه سازی عملکرد E-commerce (Caching, Image Optimization)
• 90. تست و دیباگ E-commerce
• 91. دیپلوی پروژه E-commerce
• 92. امنیت در E-commerce (جلوگیری از حملات CSRF و XSS)
• 93. مقیاس‌پذیری (Scalability) E-commerce
• 94. بهینه سازی SEO (بهینه سازی موتورهای جستجو) برای E-commerce
• 95. به‌روزرسانی و نگهداری پلتفرم E-commerce
• 96. استفاده از GraphQL برای دریافت داده‌ها
• 97. مستندسازی کد (Code Documentation)
• 98. به کارگیری TypeScript در پروژه
• 99. استفاده از Headless CMS برای مدیریت محتوای E-commerce
• 100. افزودن قابلیت نظرات و امتیازدهی به محصولات