معرفی دوره

در این دوره جامع و کاربردی، قدم‌به‌قدم یک فروشگاه اینترنتی مدرن را با استفاده از React و TypeScript خواهید ساخت. از مدیریت وضعیت با Redux Toolkit و واکشی داده‌ها با TanStack Query تا پیاده‌سازی صفحه محصول، سبد خرید و پرداخت نهایی را پوشش می‌دهیم. در پایان دوره یک پروژه عملی و قابل انتشار خواهید داشت که می‌توانید در رزومه یا نمونه‌کارهایتان استفاده کنید.

آنچه در این دوره خواهید آموخت

• راه‌اندازی محیط توسعه با Create React App و پیکربندی TypeScript
• ساختاردهی پروژه و تقسیم‌بندی کامپوننت‌ها بر اساس اصول طراحی
• ارسال درخواست به API و مدیریت داده با TanStack Query
• ایجاد و مدیریت Global State با Redux Toolkit
• طراحی و اجرای صفحه نمایش محصولات، جزئیات و فیلترها
• پیاده‌سازی سبد خرید، حذف و اضافه کردن آیتم‌ها
• ایجاد فرم پرداخت با اعتبارسنجی و نوبت‌دهی سفارشات
• بهینه‌سازی عملکرد، lazy loading و Code Splitting
• استقرار نهایی پروژه در Vercel یا Netlify

مزایای شرکت در دوره

• یادگیری React و TypeScript به صورت هم‌زمان و عملی
• مسلط شدن به الگوهای مدیریت وضعیت با Redux Toolkit
• افزایش توانایی شما در ساخت پروژه‌های مقیاس‌پذیر و قابل نگهداری
• آشنایی با بهترین روش‌ها برای واکشی داده‌ها و کشینگ با TanStack Query
• نمونه‌کار حرفه‌ای جهت ارائه به کارفرما یا در رزومه

پیش‌نیازها

• آشنایی اولیه با جاوااسکریپت (ES6+)
• درک مفاهیم پایه React مانند کامپوننت، پراپز و State
• آشنایی مقدماتی با HTML و CSS
• توصیه می‌شود TypeScript پایه را مرور کرده باشید

بخش 1: راه‌اندازی پروژه و مفاهیم پایه

• نصب Create React App با TypeScript template
• ساختاردهی پوشه‌ها و کامپوننت‌ها
• آشنایی با ESLint، Prettier و استانداردهای کدنویسی

بخش 2: واکشی داده‌ها با TanStack Query

• نصب و پیکربندی TanStack Query
• ساخت هوک سفارشی برای Fetch API
• استراتژی‌های کشینگ و به‌روزرسانی خودکار
• مثال عملی: نمایش لیست محصولات از یک API فرضی

بخش 3: مدیریت وضعیت با Redux Toolkit

• ایجاد Slice و Store کلی
• اتصال Provider و مصرف State در کامپوننت‌ها
• Dispatch اکشن‌ها برای افزودن و حذف آیتم‌ها
• مثال عملی: پیاده‌سازی سبد خرید و تغییر تعداد محصولات

بخش 4: طراحی رابط کاربری و افزونه‌های CSS

• انتخاب CSS-in-JS یا استفاده از Tailwind / Styled Components
• طراحی ریسپانسیو برای موبایل و دسکتاپ
• اضافه کردن انیمیشن‌های ساده برای تجربه کاربری بهتر

بخش 5: فرم پرداخت و اعتبارسنجی

• ایجاد فرم React با React Hook Form
• اعتبارسنجی ورودی‌ها با Yup
• ارسال اطلاعات سفارش و نمایش فاکتور نهایی

بخش 6: بهینه‌سازی و استقرار

• Code Splitting و Lazy Loading کامپوننت‌ها
• تنظیمات Webpack و Bundle Analyzer
• استقرار نهایی در Vercel / Netlify

مثال عملی: پیاده‌سازی کامپوننت محصول

در این مثال یک کامپوننت <ProductCard> می‌سازیم که جزئیات محصول را دریافت و نمایش می‌دهد. با استفاده از TypeScript، نوع‌دهی Props و استفاده از TanStack Query برای واکشی داده‌های تصویر، قیمت و توضیحات را به صورت بهینه مدیریت می‌کنیم.

نکات کلیدی

• تفکیک منطق کسب‌وکار از لایه نمایش برای کد تمیزتر
• استفاده از هوک‌های سفارشی برای DRY بودن کد
• توجه به تجربه کاربری و کاهش طول عمر جلسات کاربر با کشینگ مناسب
• مستندسازی کامپوننت‌ها با Storybook در مراحل پیشرفته

چرا این دوره مناسب شماست؟

اگر می‌خواهید از صفر تا صد یک فروشگاه اینترنتی واقعی را با آخرین فناوری‌های فرانت‌اند یاد بگیرید، این دوره بهترین انتخاب است. پس از اتمام دوره، توانایی ساخت برنامه‌های پیچیده و مقیاس‌پذیر را خواهید داشت و می‌توانید در پروژه‌های حرفه‌ای یا فریلنسری فعالیت کنید.

برای دانلود دوره و دسترسی به منابع تکمیلی، کافی است روی لینک دانلود کلیک کرده و فایل پروژه همراه با ویدیوهای آموزشی را دریافت کنید.