آموزش ساخت بهترین وب سایت فروشگاهی با React JS و Next JS - آخرین آپدیت

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

Introduction

• نمایش پروژه Project Showcase

بیایید پروژه‌مان را راه‌اندازی کنیم Let's setup our project

• ایجاد برنامه next Create next app

• توضیح CSS در next js و ترکیب SASS با ماژول‌ها Explaining css in next js and mixing sass with modules

• بازنشانی استایل‌های CSS Reset Css styles

• ایجاد یک کلاستر Mongodb Atlas و دریافت URL اتصال Create a Mongodb Atlas cluster and get the connection url

• اتصال و قطع اتصال به پایگاه داده Connect,Disconnect to the database

• بیایید Redux toolkit را با Redux Persist تنظیم کنیم Let's setup Redux toolkit with Redux Persist

• ایجاد متغیرهای سراسری قابل دسترسی در پیکربندی next Making global variables accessible in next config

کامپوننت هدر Header Component

• هدر تبلیغاتی Ad header

• بالای صفحه تبلیغاتی Ad top

• قسمت منوی بالا بخش 1 Top Menu part 1

• قسمت منوی بالا بخش 2 Top Menu part 2

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

کامپوننت فوتر Footer Component

• لینک‌های فوتر Footer links

• شبکه‌های اجتماعی و خبرنامه فوتر Footer Socials & Newsletter

• پرداخت و حق تکثیر فوتر Footer Payment & Copyright

• فوتر واکنش‌گرا Responsive Footer

تشخیص موقعیت مکانی Location Detection

• تشخیص موقعیت کاربر با استفاده از IpRegistry Detect user location using IpRegistry

احراز هویت Authentification

• تنظیمات Next auth Next auth setup

• توکن‌های وب JSON و آداپتور Mongodb JSON web tokens & Mongodb adapter

• ارائه‌دهنده Github Github provider

• ارائه‌دهنده Google Google provider

• نشست هدر Header session

• ارائه‌دهنده Twitter Twitter provider

• ارائه‌دهنده Auth0 Auth0 provider

• صفحه ورود 1 Sign in page 1

• صفحه ورود 2 Sign in page 2

• صفحه ورود 3 - ورودی سفارشی با yup Sign in page 3 - Custom input with yup

• صفحه ورود 4 دکمه ارسال Sign in page 4 button submit

• صفحه ورود 5 شبکه‌های اجتماعی Sign in page 5 Socials

• صفحه ورود 6 ورود و اعتبارسنجی yup Sign in page 6 sign in and yup validation

• ثبت‌نام 1 Sign up 1

• ثبت‌نام 2 مدل کاربر Sign up 2 User model

• ثبت‌نام 3 Sign up 3

• ثبت‌نام 4 ارسال ایمیل 1 Sign up 4 Send email 1

• ثبت‌نام 5 ارسال ایمیل 2 Sign up 5 Send email 2

• ثبت‌نام 6 ارسال ایمیل 3 Sign up 6 Send email 3

• ثبت‌نام 7 ارسال Sign up 7 submit

• ثبت‌نام 8 لودر، موفقیت، خطا، تغییر مسیر... Sign up 8 loader, success, error, redirect ...

• ورود با Next auth و ارسال Sign in with Next auth and submit

• Callback‌ها در Next auth Callbacks in Next auth

• تغییر مسیر csrfTOken csrfTOken redirect

فراموشی رمز عبور، بازنشانی رمز عبور forgot,reset password

• صفحه فراموشی رمز عبور 1 Forgot page 1

• صفحه فراموشی رمز عبور 2 Forgot page 2

• بازنشانی رمز عبور 1 Reset password 1

• بازنشانی رمز عبور 2 Reset password 2

صفحه اصلی Home page

• ساختار اصلی صفحه اصلی Home main structure

• Swiper صفحه اصلی قسمت 1 Home swiper part 1

• Swiper صفحه اصلی 3 Home swiper 3

• بخش پیشنهادات اصلی صفحه اصلی Home offers main

• منوی صفحه اصلی Home menu

• نشانه‌گذاری منوی کاربری صفحه اصلی Home user menu markup

• استایل‌های نشانه‌گذاری منوی کاربری صفحه اصلی Home user menu markup styles

• هدر اصلی صفحه اصلی Home main header

• واکنش‌گرایی اصلی صفحه اصلی Home main responsive

• تخفیف‌های ویژه 1 Flash deals 1

• تخفیف‌های ویژه 2 Flash deals 2

• واکنش‌گرایی تخفیف‌های ویژه Flash deals responsive

• شمارش معکوس تخفیف‌های ویژه Flash deals Countdown

• کارت‌های دسته‌بندی Category cards

• واکنش‌گرایی کارت‌های دسته‌بندی Category cards responsive

• Swiper محصولات صفحه اصلی Home products swiper

• Swiper اضافی محصولات صفحه اصلی Home products swiper extra

کارت محصول Product card

• مدل محصول و توضیح بهترین رویکرد برای محصولات Product model and explaining the most perfect approach for products

• مدل دسته‌بندی و زیردسته‌بندی Category and subcategory model

• اضافه کردن و دریافت محصولات از پایگاه داده Add and get products from database

• کارت محصول 1 Product card 1

• کارت محصول 2 Product card 2

• کارت محصول 3 Product card 3

صفحه محصول Product page

• دریافت، فیلتر و آماده‌سازی داده‌های محصول Get, filter and prepare product data

• شروع محتوای صفحه محصول product page content start

• Swiper اصلی تصاویر محصول product images main swiper

• اطلاعات محصول 1 product infos 1

• اطلاعات محصول 2 product infos 2

• اطلاعات محصول 3 product infos 3

• اطلاعات محصول 4 و اشتراک‌گذاری در حساب‌های رسانه‌های اجتماعی product infos 4 & share to social media accounts

• اطلاعات محصول 5 آکاردئون product infos 5 accordian

• Swiper مشابه محصول product simillar swiper

• کارت بررسی اجمالی نظرات محصول product reviews overview card

• اضافه کردن نظر 1 add review 1

• اضافه کردن نظر 2 add review 2

• اضافه کردن نظر 3 add review 3

• اضافه کردن نظر 4 کار با فرم آپلود تصاویر add review 4 working with images upload form

• جدول نظرات: قابلیت صفحه‌بندی reviews table : pagination functionality

• کارت نظر review card

• هدر جدول نظرات reviews table header

سبد خرید Cart

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

• اسلایس سبد خرید و اضافه کردن به سبد خرید 1 cart slice & add to cart 1

• اضافه کردن به سبد خرید و به‌روزرسانی سبد خرید 2 03-add to cart and update cart 2

• نشانه‌گذاری کارت محصول سبد خرید cart product card markup

• استایل‌های کارت محصول سبد خرید cart product card styles

• به‌روزرسانی مقدار محصول و حذف از سبد خرید update product qty & remove from cart

• هدر سبد خرید cart header

• کارت پرداخت سبد خرید cart checkout card

• انتخاب و عدم انتخاب محصولات سبد خرید cart select and unselect products

• محاسبه مجموع کل و هزینه حمل و نقل سبد خرید cart calculate total subtotal and shipping fee

• روش‌های پرداخت سبد خرید و Swiper cart payment methods and swiper

• اضافه کردن سبد خرید به پایگاه داده 1 add cart to database 1

• اضافه کردن سبد خرید به پایگاه داده 2 add cart to database 2

• همیشه به‌روز نگه داشتن سبد خرید Keeping the cart updated always

پرداخت (کوپن‌ها، آدرس‌ها، میان‌افزار auth ...) Checkout (coupons, addresses, ,also auth middlware ...)

• پرداخت، دریافت سبد خرید، کار بر روی فرم آدرس حمل و نقل 1 Checkout ,get cart, work on shipping address form 1

• ورودی سفارشی حمل و نقل custom shipping input

• نشانه‌گذاری کامل و استایل‌های فرم حمل و نقل shipping form full markup and styles

• کامپوننت select سفارشی با yup و اعتبارسنجی formik custom select componenet with yup and formik validation

• ذخیره آدرس در پایگاه داده save address to db

• فهرست تمام آدرس‌ها و تغییر وضعیت فعال 1 list all addresses and change active status 1

• AUTH MIDDLEWARE (بسیار مهم) AUTH MIDDLEWARE (VERY IMPORTANT)

• فهرست تمام آدرس‌ها و تغییر وضعیت فعال 2 list all addresses and change active status 2

• حذف آدرس و اضافه کردن هدر بخش حمل و نقل remove address and add shipping section header

• سبد خرید پرداخت checkout cart

• انتخاب روش پرداخت Select a payment method

• مدل سفارش Order model

• مدل کوپن و ایجاد کوپن برای آزمایش Coupon model and create coupons to test with

• خلاصه Summary

• اعمال کوپن apply coupon

• ایجاد سفارش create order

صفحه سفارش Order page

• ایجاد صفحه سفارش و اضافه کردن کوپن به سفارش create order page and adding coupon to order

• هدر سفارش و لیست محصولات order header & products list

• مجموع محصولات سفارش با نمایش کوپن order products total with coupon shown

• آدرس حمل و نقل و صورتحساب سفارش order shipping billing address

• تنظیمات پرداخت Paypal paypal payment setup

• تنظیمات Stripe Stripe setup

• پایان Stripe Stripe finish

• پایان پرداخت Paypal Finishing Paypal payment

مسیرها و دسترسی محافظت‌شده (middlware next js next auth) Protected routes and access (middlware next js next auth)

• middlware middlware

آپلود تصاویر به Cloudinary (راه‌اندازی کامل frontend و backend) Upload images to cloudinary (full setup frontend and backend)

• راه‌اندازی Cloudinary cloudinary setup

• middleware آپلود تصویر upload image middleware

• آپلود تصاویر به Cloudinary upload images to cloudinary

داشبورد ادمین - راه‌اندازی Admin Dashboard - setup

• راه‌اندازی داشبورد ادمین + راه‌اندازی Redux expand Sidebar admin dashboard setup + redux expand Sidebar setup

• طرح‌بندی داشبورد ادمین admin dashboard layout

• سایدبار داشبورد ادمین قسمت 1 Admin Dashboard Sidebar part 1

• سایدبار داشبورد ادمین قسمت 2 Admin Dashboard Sidebar part 2

• سایدبار داشبورد ادمین قسمت 3 admin Dashboard Sidebar part 3

• راه‌اندازی و توضیح Toastify Toastify setup and explained

داشبورد ادمین - دسته‌بندی‌ها Admin Dashboard - Categories

• راه‌اندازی صفحه دسته‌بندی‌ها categories page setup

• شروع ایجاد دسته‌بندی create category start

• ورودی سفارشی ادمین با اعتبارسنجی و رفع مشکلات Admin custom input with validation and fixing issues

• ارسال ایجاد دسته‌بندی و API + رفع مشکل regex create category submit and api + fixing regex issue

• فهرست تمام دسته‌بندی‌ها list all categories

• پایان لیست آیتم و حذف یک دسته‌بندی finish list item and delete a category

• به‌روزرسانی یک دسته‌بندی update a category

داشبورد ادمین - زیردسته‌بندی‌ها Admin Dashboard - SubCategories

• راه‌اندازی صفحه زیردسته‌بندی‌ها و ایجاد زیردسته‌بندی subcategories page setup & create subCategory

• لیست به‌روزرسانی و حذف زیردسته‌بندی list update and delete SubCategory

داشبورد ادمین - کوپن‌ها Admin Dashboard - Coupons

• راه‌اندازی صفحه کوپن‌ها coupons page setup

• انتخابگر تاریخ کوپن‌ها coupons dates picker

• ارسال کوپن Submit coupon

• به‌روزرسانی، حذف کوپن update, delete coupon

داشبورد ادمین - همه محصولات Admin Dashboard - all products

• راه‌اندازی صفحه همه محصولات all products page setup

• لیست زیبا از محصولات قسمت 1 list products beautifully part 1

• لیست زیبا از محصولات قسمت 2 list products beautifully part 2

داشبورد ادمین - ایجاد محصول Admin dashboard - create product

• راه‌اندازی صفحه ایجاد محصول و موارد اضافی create product page setup & extra

• کار بر روی فرم working on the form

• کار بر روی فرم 2 working on the form 2

• اعتبارسنجی فرم، استایل‌ها و انتخاب هدر و رفع مشکلات form validation, styles & select header and fixing issues

• مودال Dialog Dialog modal

• ایجاد تصاویر محصول 1 Create product images 1

• ایجاد تصاویر محصول 2 Create product images 2

• ایجاد تصاویر محصول 3 Create product images 3

• استخراج رنگ‌ها و انتخاب رنگ اصلی محصول extract colors and pick a product main color

• استایل محصول Product Style

• کلیک برای اضافه کردن - اندازه‌ها، تعداد، قیمت 0 click to add - SIzes Qty Price 0

• کلیک برای اضافه کردن - اندازه‌ها، تعداد، قیمت 1 click to add - SIzes Qty Price 1

• کلیک برای اضافه کردن - جزئیات و سؤالات click to add - Details & Questions

• اعتبارسنجی کامل برای همه ورودی‌ها و رفع مشکلات 1 Full validation for all inputs and fixing issues 1

• اعتبارسنجی کامل برای همه ورودی‌ها 2 Full validation for all inputs 2

• Admin middleware Admin middleware

• ارسال ایجاد محصول 1 Submit create product 1

• ارسال ایجاد محصول 2 Submit create product 2

داشبورد ادمین - کاربران Admin Dashboard - users

• صفحه کاربران و راه‌اندازی پیشرفته جدول mui users page and advanced mui table setup

• پر کردن داده‌های جدول filling the table data

داشبورد ادمین - سفارش‌ها Admin dashboard - orders

• راه‌اندازی سفارش‌ها و جدول Collapsible orders setup & Collapsible table

• پر کردن جدول سفارش‌ها Filling the orders table

• پر کردن جدول سفارش‌ها - اطلاعات حمل و نقل Filling the orders table - shipping informations

• پر کردن جدول سفارش‌ها - لیست محصولات Filling the orders table - list products

داشبورد ادمین - داشبورد Admin dashboard - dashboard

• هدر داشبورد 1 dashboard header 1

• هدر داشبورد 2 dashboard header 2

• کارت‌های وضعیت داشبورد dashboard status cards

• نشانه‌گذاری جداول داده data tables markup

• استایل‌های جداول داده data tables styles

صفحه محصول 2 (اضافه کردن نظر، لیست علاقه‌مندی‌ها، مرتبط...) Product page 2 (add review,whishlist,related...)

• اضافه کردن نظر سمت کلاینت Add a review client side

• اضافه کردن نظر سمت سرور Add a review server side

• اضافه کردن به لیست علاقه‌مندی‌ها Add to whishlist

• کار بر روی نظرات و لودر Work on reviews and loader

پروفایل Profile

• راه‌اندازی پروفایل و طرح‌بندی profile and layout setup

• سایدبار پروفایل profile sidebar

• سایدبار پروفایل 2 profile sidebar 2

• پروفایل - سفارش‌ها 1 profile - orders 1

• پروفایل - سفارش‌ها 2 profile - orders 2

• پروفایل - سفارش‌ها 3 profile - orders 3

• پروفایل - آدرس‌ها profile - addresses

• پروفایل - روش پرداخت پیش‌فرض profile - default payment method

• پروفایل - امنیت (تغییر رمز عبور 1) profile - security (change password 1)

• پروفایل - امنیت (تغییر رمز عبور 2) profile - security (change password 2)

صفحه مرور فیلترها، جستجو و صفحه‌بندی Browse page filters, search and pagination

• ابتدا دریافت داده‌ها Getting the data first

• عنوان صفحه مرور، تگ‌ها، لیست محصولات Browse heading, tags, listing products

• کامپوننت فیلتر دسته‌بندی Category filter component

• کامپوننت فیلتر رنگ‌ها و اندازه‌ها Colors & Sizes filter component

• استایل‌ها، الگوها، جنسیت، مواد Styles Patterns Materials Gender

• فیلترهای عنوان - قیمت و مرتب‌سازی Heading Filters - Pricing & Sorting

• استایل‌های فیلترهای عنوان Heading Filters styles

• الگوریتم فیلتر و ویژگی جستجوی کامل Filtering algorithm and full search feature

• فیلتر کردن بر اساس دسته‌بندی، برند، استایل‌ها و کار بر روی فیلترهای چندگانه filtering by category brand styles & working on multiple filtiring

• فیلتر کردن بر اساس برندهای چندگانه، اندازه‌ها، رنگ‌ها filtering by multiple brands sizes colors

• فیلتر کردن بر اساس الگوها، مواد، جنسیت filtering by patterns materials gender

• فیلتر کردن بر اساس قیمت (فیلتر زنده و دکمه‌ها) filtering by price (live filtering and buttons)

• ایجاد مجدد یک تابع فیلتر سراسری با انتخاب، عدم انتخاب و وضعیت فعال Re-Creating a global filtiring function with select unselect and active stat

• اعمال تابع QueryReplace جدید بر روی فیلترها Apply the new QueryReplace function on filters

• فیلتر کردن بر اساس حمل و نقل رایگان و رتبه‌بندی Filtering by free shipping and ratings

• مرتب‌سازی sorting

• صفحه‌بندی Pagination

• فیلترهای ثابت و دکمه پاک کردن fixed filters and clear button

خبرنامه با استفاده از MailChimp API Newsletter using MailChimp api

• راهنمای کامل خبرنامه Newsletter full guide