آموزش استرایپ مسترکلاس با ری‌اکت جی‌اس و نود جی‌اس - آخرین آپدیت

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

مقدمه دوره Course Introduction

• مقدمه Introduction

• آنچه خواهیم ساخت What We're Going To Be Building

• منابع دوره Course Resources

ساخت فروشگاه اینترنتی React React Ecommerce Site Build

• راه‌اندازی اپلیکیشن React با CRA Setup React App With CRA

• تنظیمات CSS CSS Setup

• مشکل Node Sass Node Sass Issue

• هدر ۱ Header 1

• هدر ۲ Header 2

• آیکون سبد خرید Cart Icon

• بخش اصلی ۱ Hero

• بخش اصلی ۲ Main Section 1

• بخش محصولات ویژه Main Section 2

• کانتکست محصولات Products Context

• محصول ویژه Featured Product

• مجموعه ویژه Featured Collection

• فوتر Footer

• چیدمان و صفحه اصلی Layout and Home Page

• یافت نشد Not Found

• صفحه فروشگاه ۱ Shop Page 1

• صفحه فروشگاه ۲ Shop Page 2

• نمایش تک محصول ۱ Single Product View 1

• نمایش تک محصول ۲ Single Product View 2

• نمایش تک محصول ۳ Single Product View 3

ساخت سبد خرید با React Context و هوک useReducer Build Cart with React Context and useReducer Hook

• مقدمه Introduction

• ایجاد کانتکست سبد خرید Create Cart Context

• افزودن محصول Add Product

• تابع کمکی Helper Function

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

• تست قابلیت افزودن محصول Test Add Product Feature

• افزودن هندلر کلیک به کامپوننت تک محصول Add Click Handler To Single Product Component

• افزایش تعداد آیتم Increase Item Quantity

• کامپوننت SVG برای صفحه سبد خرید SVG Component For Cart Page

• ساخت صفحه سبد خرید ۱ Cart Page Build 1

• ساخت صفحه سبد خرید ۲ Cart Page Build 2

• ساخت صفحه سبد خرید ۳ Cart Page Build 3

• ساخت صفحه سبد خرید ۴ Cart Page Build 4

• ساخت صفحه سبد خرید ۵ Cart Page Build 5

• کاهش تعداد آیتم Decrease Item Quantity

• حذف آیتم از سبد خرید Remove Item From Cart

• پاک کردن سبد خرید Clear The Cart

• ذخیره اطلاعات سبد خرید Persist Cart Data

پرداخت میزبانی شده Stripe Stripe Hosted Checkout

• مخزن سبد خرید React React Cart Repo

• مقدمه Stripe Stripe Introduction

• راه‌اندازی حساب Stripe Stripe Account Setup

• داشبورد Stripe Stripe Dashboard

• جریان پرداخت Stripe Stripe Payment Flow

• راه‌اندازی Node Node Setup

• پرداخت Stripe چیست What Is Stripe Checkout

• فرآیند پرداخت Stripe Stripe Checkout Process

• ایجاد شی Stripe در سرور Create Stripe Object In The Server

• ایجاد نقطه پایانی جلسه پرداخت Create Checkout Session Endpoint

• ایجاد نقطه پایانی جلسه پرداخت ۲ Create Checkout Session Endpoint 2

• تست نقطه پایانی جلسه پرداخت Test Checkout Session Endpoint

• راه‌اندازی Stripe در فرانت‌اند Setup Stripe On Frontend

• صفحه پرداخت Checkout Page

• تابع کمکی Fetch Fetch Helper Function

• کامپوننت پرداخت Stripe Stripe Checkout Component

• کامپوننت پرداخت Stripe ۲ Stripe Checkout Component 2

• ایجاد صفحات موفقیت و لغو شده Create Success & Canceled Pages

• مقدمه وب‌هوک‌ها Webhooks Introduction

• رفع کامپوننت موفقیت Success Component Fix

• وب‌هوک‌ها Webhooks

• وب‌هوک‌ها ۲ Webhooks 2

• وب‌هوک‌ها ۳ Webhooks 3

پرداخت سفارشی Stripe Stripe Custom Checkout

• فرآیند پرداخت سفارشی Stripe Stripe Custom Checkout Process

• ایجاد نقطه پایانی پرداخت Create Payment Intent Endpoint

• تست نقطه پایانی پرداخت Test Payment Intent Endpoint

• نکته در مورد وارد کردن Formik Note on Formik import

• ساخت کامپوننت آدرس حمل و نقل Build Shipping Address Component

• ساخت کامپوننت آدرس حمل و نقل ۲ Build Shipping Address Component 2

• ساخت کامپوننت پرداخت سفارشی Build Custom Checkout Component

• ساخت کامپوننت پرداخت سفارشی ۲ Build Custom Checkout Component 2

• ایجاد کامپوننت هندل پرداخت Create Handle Checkout Component

• به‌روزرسانی وب‌هوک Webhook Update

راه‌اندازی احراز هویت Setup Authentication

• ایجاد پروژه Firebase Create Firebase Project

• ساخت کامپوننت ثبت نام Build Sign Up Component

• ساخت کامپوننت ورود Build Sign In Component

• مهم - لطفاً قبل از ویدیوی بعدی بخوانید - به‌روزرسانی راه‌اندازی پروفایل کاربر Firebase Important - please read before next video - Firebase user profile setup update

• ایجاد تابع پروفایل کاربر Create User Profile Function

• ایجاد کانتکست کاربر Create User Context

• به‌روزرسانی کامپوننت ثبت نام Update Sign Up Component

• به‌روزرسانی کامپوننت ورود Update Sign In Component

• به‌روزرسانی لینک‌های منوی هدر Update Header Menu Links

• به‌روزرسانی تابع Fetch fromAPI Update Fetch fromAPI function

• ایجاد متغیر محیطی کلید حساب سرویس Create Service Account Environment Variable

• راه‌اندازی Firebase Firebase Initialization

• توابع کمکی احراز هویت Auth Helper Functions

پرداخت با کارت اعتباری ذخیره شده Checkout Using Saved Credit Card

• تابع دریافت مشتری از Stripe Get Customer From Stripe Function

• ایجاد نقطه پایانی راه‌اندازی Create Setup Intent Endpoint

• ایجاد نقطه پایانی دریافت روش پرداخت Create Get Payment Method Endpoint

• رفع اعتبارسنجی کاربر Validate User Fix

• نمایش کارت‌های ذخیره شده ۱ Show Saved Cards 1

• نمایش کارت‌های ذخیره شده ۲ Show Saved Cards 2

• ذخیره کارت هنگام پرداخت Save Card During Payment

• تست کارت ذخیره شده Test Saved Card

• پرداخت با کارت ذخیره شده و جمع‌بندی Pay With Saved Card & Wrap Up

• درس جایزه Bonus Lecture