آموزش Next.js تجارت الکترونیک - یک پلتفرم خرید از ابتدا بسازید

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

مقدمه Introduction

• به دوره خوش آمدید Welcome To The Course

• پشته The Stack

• پروژه The Project

• محیط زیست The Environment

• اسناد ممتاز Premium Docs

• کد نهایی و نسخه ی نمایشی Final Code & Demo

ایجاد برنامه و چیدمان اولیه App Creation & Basic Layout

• بخش معرفی Section Intro

• برنامه و دارایی های بعدی را ایجاد کنید Create Next App & Assets

• راه اندازی ShadCN UI ShadCN UI Setup

• چیدمان ریشه و ثابت ها Root Layout & Constants

• اجزای سرصفحه و پاورقی Header & Footer Components

• تغییر حالت تم Theme Mode Toggle

• صفحات در حال بارگیری و یافت نشد Loading & Not Found Pages

• منوی برگه پاسخگو Responsive Sheet Menu

• نمونه محصولات و لیست محصولات Sample Products & Product List

• جزء کارت محصول Product Card Component

• جزء قیمت محصول Product Price Component

پایگاه داده، پریسما و نمایش محصول Database, Prisma & Product Display

• بخش معرفی Section Intro

• راه اندازی PostgreSQL و Prisma PostgreSQL & Prisma Setup

• مدل‌ها و مهاجرت‌های پریسما Prisma Models & Migrations

• داده های نمونه بذر Seed Sample Data

• بارگیری محصولات از پایگاه داده Load Products From Database

• Zod Validation & Type Inference Zod Validation & Type Inference

• پیکربندی محیط بدون سرور Servlerless Environment Config

• صفحه جزئیات محصول Product Details Page

• کامپوننت تصاویر محصول Product Images Component

• استقرار اولیه Initial Deployment

• نکته ای در مورد خطاهای ES Lint A Note On ES Lint Errors

احراز هویت با Next Auth Authentication With Next Auth

• بخش معرفی Section Intro

• مدل های مرتبط با کاربر Prisma Prisma User-Related Models

• داده های کاربر بذر Seed User Data

• تنظیم بعدی Auth Next Auth Setup

• مسیر بعدی Auth Catch All API Next Auth Catch All API Route

• اقدام ورود و خروج از سیستم Sign In & Sign Out Action

• Auth Layout & Sign In Page Auth Layout & Sign In Page

• اعتبارنامه فرم ورود به سیستم Credentials Sign In Form

• فرم ورود به سیستم را وصل کنید Hook Up Sign In Form

• تغییر مسیر URL برگشت به تماس Callback URL Redirect

• دکمه کاربر و خروج از سیستم User Button & Sign Out

• ثبت نام Zod Schema & Action Sign Up Zod Schema & Action

• صفحه و فرم ثبت نام Sign Up Page & Form

• ثبت نام مدیریت خطا Sign Up Error Handling

• سفارشی کردن رمز با JWT Callback Customize Token With JWT Callback

افزودن به سبد خرید Add To Cart

• بخش معرفی Section Intro

• سبد خرید زود طرح و مدل پریسما Cart Zod Schema & Prisma Model

• افزودن به سبد خرید جزء Add To Cart Component

• کوکی شناسه سبد خرید جلسه Session Cart ID Cookie

• دریافت کالا از سبد خرید Get Item From Cart

• محاسبه قیمت و افزودن به پایگاه داده Price Calc & Add To Database

• تعداد و چند محصول را کنترل کنید Handle Quantity & Multiple Products

• حذف اقدام سبد خرید Remove Cart Action

• دکمه سبد خرید پویا Dynamic Cart Button

• رابط کاربری صاف با استفاده از قلاب انتقال Smooth UI With useTransition Hook

سبد خرید و صفحات حمل و نقل Cart & Shipping Pages

• بخش معرفی Section Intro

• صفحه سبد خرید Cart Page

• جدول UI ShadCN ShadCN UI Table

• کارت جزئی Subtotal Card

• آدرس حمل و نقل Zod Schema & Page Shipping Address Zod Schema & Page

• آدرس و فرم حمل و نقل Shipping Address & Form

• به روز رسانی آدرس کاربر Update User Address

• کامپوننت مراحل پرداخت Checkout Steps Component

• سبد خرید ادامه دار Persist Session Cart

• حفاظت از مسیرها Protecting Paths

روش پرداخت و صفحات سفارش Payment Method & Order Pages

• بخش معرفی Section Intro

• روش پرداخت و طرحواره زود Payment Method Action & Zod Schema

• صفحه روش پرداخت Payment Method Page

• فرم و به روز رسانی روش پرداخت Payment Method Form & Update

• طرحواره Prisma Order & OrderItem Order & OrderItem Prisma Schema

• طرحواره ها و انواع زود را سفارش دهید Order Zod Schemas & Types

• صفحه ثبت سفارش Place Order Page

• ایجاد اقدام سفارش Create Order Action

• فرم ثبت سفارش Place Order Form

• سفارش صفحه و اقدام Order Page & Action

• فرمت توابع ابزار Format Utility Functions

• جدول جزئیات سفارش Order Details Table

پرداخت های پی پال PayPal Payments

• بخش معرفی Section Intro

• راه اندازی پی پال سندباکس PayPal Sandbox Setup

• ایجاد رمز دسترسی Generate Access Token

• Jest Testing For Access Token Jest Testing For Access Token

• ایجاد سفارش و درخواست پرداخت Create Order & Capture Payment Request

• Jest Testing برای پرداخت سفارش Jest Testing For Order Payment

• ایجاد اکشن سفارش پی پال Create PayPal Order Action

• تأیید و به‌روزرسانی سفارش Approve & Update Order

• اجرای دکمه پی پال Implement PayPal Button

تاریخچه سفارش و مشخصات کاربر Order History & User Profile

• بخش معرفی Section Intro

• چیدمان و منوی کاربر User Layout & Menu

• دریافت اقدام سفارشات من Get My Orders Action

• صفحه سفارشات Orders Page

• صفحه بندی سفارشات Orders Pagination

• به روز رسانی عملکرد نمایه Update Profile Action

• به روز رسانی فرم پروفایل Update Profile Form

• ارسال فرم مشخصات Profile Form Submission

بررسی اجمالی و سفارشات مدیریت Admin Overview & Orders

• بخش معرفی Section Intro

• طرح‌بندی مدیریت و ناوبری اصلی Admin Layout & Main Nav

• دریافت خلاصه سفارش Get Order Summary

• نمای کلی مدیر نمایش داده ها Admin Overview Display Data

• نمودار فروش ماهانه Monthly Sales Chart

• صفحه سفارشات ادمین و اقدام Admin Orders Page & Action

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

• به‌روزرسانی اقدامات سفارش (COD) Update Order Actions (COD)

• به‌روزرسانی دکمه‌های سفارش (COD) Update Order Buttons (COD)

محصولات مدیریت و آپلود تصویر Admin Products & Image Upload

• بخش معرفی Section Intro

• دریافت محصولات برای صفحه مدیریت Get Products For Admin Page

• نمایش محصولات Display Products

• حذف محصولات Delete Products

• ایجاد و به‌روزرسانی اقدامات Create & Update Actions

• صفحه و فرم محصول را ایجاد کنید Create Product Page & Form

• Form Fields & Slugify Form Fields & Slugify

• ایجاد فرم ارسال محصول Create Product Form Submission

• پیکربندی آپلود Uploadthing Configuration

• اضافه کردن آپلود تصویر Add Image Uploads

• پاکسازی محصول Product Cleanup

• برجسته و بنر است Is Featured & Banner

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

کاربران مدیریت و جستجو Admin Users & Search

• بخش معرفی Section Intro

• دریافت و نمایش کاربران Get & Display Users

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

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

• به روز رسانی فرم کاربر Update User Form

• Update User Action Update User Action

• فرم جستجوی ادمین Admin Search Form

• جستجوی سفارش ادمین Admin Order Search

• جستجوی کاربر مدیر Admin User Search

جستجوی فیلتر، کشو و چرخ فلک Search Filtering, Drawer & Carousel

• بخش معرفی Section Intro

• کشو دسته Category Drawer

• چرخ فلک محصولات ویژه Featured Products Carousel

• کامپوننت جستجو Search Component

• صفحه جستجو Search Page

• فیلترهای جستجو Search Filters

• تابع URL فیلتر را دریافت کنید Get Filter URL Function

• فیلترهای UI دسته و قیمت Category & Price UI Filters

• فیلتر رتبه بندی و نمایش فیلتر Rating Filter & Filter Display

• مرتب سازی محصولات Sorting Products

• فراداده پویا Dynamic Metadata

رتبه بندی ها و نظرات Ratings & Reviews

• بخش معرفی Section Intro

• طرحواره Prisma، Zod & Type را مرور کنید Review Prisma Schema, Zod & Type

• بررسی جزء لیست Review List Component

• بررسی مؤلفه گفتگوی فرم Review Form Dialog Component

• ایجاد و به‌روزرسانی اقدام بررسی Create & Update Review Action

• فرم بررسی را به عمل وصل کنید Connect Review Form To Action

• اقدام دریافت نظرات Get Reviews Action

• نمایش نظرات Display Reviews

• به روز رسانی و بارگذاری مجدد نظرات Update & Reload Reviews

پرداخت های خطی Stripe Payments

• بخش معرفی Section Intro

• خیاطی راه راه Stripe Seup

• فرم سفارش قصد پرداخت Order Form Payment Intent

• مولفه پرداخت خطی Stripe Payment Component

• صفحه موفقیت در پرداخت Stripe Payment Success Page

• Webhook برای علامت گذاری سفارش به عنوان پرداخت شده Webhook To Mark Order As Paid

رسید خرید از طریق ایمیل Email Purchase Receipts

• بخش معرفی Section Intro

• ارسال مجدد کلید و راه اندازی API Resend API Key & Setup

• ارسال مجدد تابع اصلی Resend Main Function

• خرید قالب رسید ایمیل Purchase Email Receipt Template

• پیش نمایش ایمیل در مرورگر با ایمیل React Preview Email In Browser With React Email

• ارسال ایمیل Sending Emails

اجزای صفحه اصلی و جمع بندی Homepage Components & Wrap Up

• بخش معرفی Section Intro

• جزء جعبه های نماد Icon Boxes Component

• مولفه شمارش معکوس معامله Deal Countdown Component

• بسته بندی کنید Wrap Up

یادداشت ها و رفع Notes & Fixes

• خطای طرح سرگرمی ورسل Vercel Hobby Plan Error