آموزش جامع فروشگاه اینترنتی با Next.js: ساخت پلتفرم فروشگاهی از صفر - آخرین آپدیت

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

مقدمه Introduction

• خوش‌آمدگویی به دوره Welcome to the course

• بررسی تکنولوژی‌های مورد استفاده (Stack) The stack

• مستندات پریمیوم Premium docs

• محیط توسعه The environment

• بررسی پروژه The project

1. ایجاد اپلیکیشن و لایوت پایه 1. App Creation and Basic Layout

• منوی کشویی ریسپانسیو Responsive sheet menu

• صفحات لودینگ و یافت نشدن (Not Found) Loading and not found pages

• مقدمه بخش Section intro

• تغییر حالت تم (Dark/Light) Theme mode toggle

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

• کامپوننت‌های هدر و فوتر Header and footer components

• ایجاد Next app و دارایی‌ها Create Next app and assets

• کامپوننت قیمت محصول Product price component

• راه‌اندازی ShadCN UI ShadCN UI setup

• محصولات نمونه و لیست محصولات Sample products and product list

• لایوت ریشه و ثابت‌ها Root layout and constants

2. پایگاه داده، Prisma و نمایش محصولات 2. Database, Prisma, and Product Display

• بارگذاری محصولات از دیتابیس Load products from database

• صفحه جزئیات محصول Product details page

• کامپوننت تصاویر محصول Product images component

• مقدمه بخش Section intro

• مدل‌های Prisma و مهاجرت‌ها (Migrations) Prisma models and migrations

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

• اعتبارسنجی Zod و استخراج تایپ‌ها Zod validation and type inference

• تزریق داده‌های نمونه (Seed) Seed sample data

• راه‌اندازی PostgreSQL و Prisma PostgreSQL and Prisma setup

• نکته‌ای در مورد خطاهای ESLint A note on ESLint errors

• پیکربندی محیط Serverless Serverless environment config

3. احراز هویت با NextAuth 3. Authentication with NextAuth

• تزریق داده‌های کاربر Seed user data

• اکشن‌های سرور برای ورود و خروج Sign-in and sign-out server actions

• مدیریت خطاهای ثبت‌نام Sign-up error handling

• فرم ورود با اعتبارنامه‌ها Credentials sign-in form

• مقدمه بخش Section intro

• سفارشی‌سازی توکن با JWT callback Customize token with JWT callback

• دکمه کاربر و خروج از حساب User button and sign-out

• لایوت احراز هویت و صفحه ورود Auth layout and sign-in page

• اسکیما و اکشن ثبت‌نام با Zod Signup Zod schema and action

• مسیر API جامع NextAuth NextAuth catch all API route

• اتصال فرم ورود Hook up sign-in form

• مدل‌های Prisma مرتبط با کاربر Prisma user-related models

• راه‌اندازی NextAuth NextAuth setup

• صفحه و فرم ثبت‌نام Sign-up page and form

• تغییر مسیر URL بازگشت (Callback) Callback URL redirect

4. افزودن به سبد خرید 4. Add to Cart

• اکشن حذف از سبد خرید Remove cart action

• مدیریت تعداد و محصولات متعدد Handle quantity and multiple products

• دریافت آیتم برای سبد خرید Get item for cart

• مقدمه بخش Section intro

• شناسه سبد خرید در سشن Session cart ID

• رابط کاربری روان با useTransition Smooth UI with useTransition

• دکمه سبد خرید پویا Dynamic cart button

• کامپوننت افزودن به سبد خرید Add to cart component

• محاسبه قیمت برای سبد خرید Price calc for cart

• اسکیمای Zod و مدل Prisma سبد خرید Cart Zod schema and Prisma model

5. صفحات سبد خرید و ارسال 5. Cart and Shipping Pages

• به‌روزرسانی آدرس کاربر Update user address

• فرم آدرس ارسال Shipping address form

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

• اسکیمای Zod و صفحه آدرس ارسال Shipping address Zod schema and page

• ماندگارسازی سبد خرید سشن Persist session cart

• مقدمه بخش Section intro

• جمع کل سبد خرید Subtotal cart

• کامپوننت مراحل پرداخت Checkout steps component

• جدول ShadCN UI ShadCN UI table

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

6. متد پرداخت و صفحات سفارش 6. Payment Method and Order Pages

• جدول جزئیات سفارش Order details table

• صفحه ثبت سفارش Place order page

• توابع کمکی فرمت‌دهی Format utility functions

• صفحه و اکشن سفارش Order page and action

• مقدمه بخش Section intro

• متد پرداخت و اسکیمای Zod Payment method and Zod schemas

• اسکیماها و تایپ‌های Zod سفارش Order Zod schemas and types

• مدل‌های Prisma برای Order و OrderItem Order and OrderItem Prisma models

• فرم و به‌روزرسانی متد پرداخت Payment method form and update

• صفحه متد پرداخت Payment method page

• فرم ثبت سفارش Place order form

• اکشن ایجاد سفارش Create order action

7. پرداخت‌های PayPal 7. PayPal Payments

• تست Jest برای سفارش و پرداخت Jest testing for order and payment

• راه‌اندازی Sandbox پی‌پل (PayPal) PayPal sandbox setup

• درخواست‌های API ایجاد و دریافت سفارش Create order and capture API requests

• پیاده‌سازی دکمه PayPal Implement PayPal button

• مقدمه بخش Section intro

• تست Jest برای Access Token Jest testing for access token

• اکشن ایجاد سفارش PayPal Create PayPal order action

• تولید Access Token Generate access token

• تأیید و به‌روزرسانی سفارش Approve and update order

8. تاریخچه سفارشات و پروفایل کاربر 8. Order History and User Profile

• فرم به‌روزرسانی پروفایل Update profile form

• اکشن به‌روزرسانی پروفایل Update profile action

• اکشن دریافت سفارشات من Get my orders action

• لایوت و منوی کاربر User layout and menu

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

• ارسال فرم پروفایل Profile form submission

• مقدمه بخش Section intro

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

9. نمای کلی ادمین و سفارشات 9. Admin Overview and Orders

• مقدمه بخش Section intro

• دکمه‌های به‌روزرسانی سفارش (پرداخت در محل) Update order buttons (COD)

• نمودار فروش ماهانه Monthly sales chart

• لایوت و منوی ادمین Admin layout and menu

• نمایش داده‌های نمای کلی ادمین Admin overview data display

• دریافت خلاصه سفارشات Get order summary

• اکشن‌های به‌روزرسانی سفارش (پرداخت در محل) Update order actions (COD)

• صفحه و اکشن سفارشات ادمین Admin orders page and action

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

10. مدیریت محصولات ادمین و آپلود تصویر 10. Admin Products and Image Uploads

• بنر محصولات ویژه Is featured banner

• صفحه و فرم ایجاد محصول Create product page and form

• افزودن آپلود تصویر Add image upload

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

• دریافت محصولات برای صفحه ادمین Get products for admin page

• مقدمه بخش Section intro

• فرم به‌روزرسانی محصول Product update form

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

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

• پیکربندی Uploadthing Uploadthing configuration

• ارسال فرم ایجاد محصول Create product form submission

• اکشن‌های ایجاد و به‌روزرسانی Create and update actions

• فیلدهای فرم و ساخت Slug Form fields and slugify

11. مدیریت کاربران ادمین و جستجو 11. Admin Users and Search

• فرم جستجوی ادمین Admin search form

• جستجوی کاربران در پنل ادمین Admin users search

• مقدمه بخش Section intro

• دریافت و نمایش کاربران Get and display users

• صفحه ویرایش کاربر User edit page

• جستجوی سفارشات در پنل ادمین Admin orders search

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

• اکشن به‌روزرسانی کاربر Update user action

• فرم به‌روزرسانی کاربر Update user form

12. فیلتر جستجو، دراوِر و کاروسل 12. Search Filtering, Drawer, and Carousel

• تابع دریافت URL فیلتر Get filter URL function

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

• کاروسل محصولات ویژه Featured product carousel

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

• فیلتر امتیاز و نمایش فیلترها Rating filter and filter display

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

• فیلترهای UI دسته‌بندی و قیمت Category and price UI filters

• متادیتاهای پویا (Dynamic Metadata) Dynamic metadata

• دراوِر دسته‌بندی‌ها Category drawer

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

• مقدمه بخش Section intro

13. امتیازدهی و نظرات 13. Ratings and Reviews

• به‌روزرسانی و بارگذاری مجدد نظرات Update and reload reviews

• کامپوننت لیست نظرات Review list component

• دیالوگ فرم نظر Review form dialog

• اتصال فرم نظر به اکشن Connect review form to action

• اکشن دریافت نظرات Get reviews action

• مدل Prisma، Zod و تایپ نظرات Review Prisma model, Zod, and type

• مقدمه بخش Section intro

• اکشن ایجاد و به‌روزرسانی نظر Create and update review action

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

14. پرداخت‌های Stripe 14. Stripe Payments

• مقدمه بخش Section intro

• وب‌هوک برای علامت‌گذاری سفارش به عنوان پرداخت شده Webhook to mark order as paid

• قصد پرداخت (Payment Intent) فرم سفارش Order form payment intent

• راه‌اندازی Stripe Stripe setup

• صفحه موفقیت پرداخت Stripe Stripe payment success page

• کامپوننت پرداخت Stripe Stripe payment component

15. ارسال رسید خرید به ایمیل 15. Email Purchase Receipts

• مقدمه بخش Section intro

• تابع اصلی Resend Resend main function

• ارسال ایمیل‌ها Sending emails

• پیش‌نمایش ایمیل در مرورگر Preview email in browser

• نصب و API key سرویس Resend Resend API key and install

• قالب ایمیل رسید خرید Purchase receipt email template

16. کامپوننت‌های صفحه اصلی و جمع‌بندی 16. Homepage Components and Wrap-Up

• کامپوننت شمارش معکوس تخفیف Deal countdown component

• کامپوننت باکس‌های آیکون Icon boxes component

• جمع‌بندی نهایی Wrap-up

• مقدمه بخش Section intro