یک فروشگاه الکترونیکی با استفاده از Next.JS ، FIGMA ، GraphQL ، PayPal بسازید

بیاموزید که چگونه از React (NextJS) ، Hygraph (GraphCMS) ، GraphQL ، FIGMA ، اجزای سبک ، ایمیل ، Auth0 و PayPal
استفاده کنید.

عنوان اصلی : Build an e-store using Next.js, Figma, GraphQL, PayPal.

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

مقدمه:
منابع دوره
طراحی با FIGMA:
درباره فیگما و الهام بخش
تنظیم اولیه
طرح کلی را طراحی کنید
لینک های NAV و نمادهای چرخ دستی را طراحی کنید
رنگ ها و نمادها
صفحه تماس را طراحی کنید
صفحه سبد خرید را طراحی کنید
CMS - ایجاد و مدیریت محصولات:
حساب GraphCMS (Hygraph) ایجاد کنید
مقدمه عمومی
طرح های محصولات ایجاد کنید
زمین بازی GraphQL
نشانه ها و مجوزهای API
جبهه:
جلوی آن را با CMS وصل کنید
اولین پرس و جو را برای واکشی محصولات بسازید
شروع به ساختن طرح بندی کنید
ناوبر
پاورقی را بسازید
نوار بالایی را ایجاد کنید
شروع به ساختن منو
منو CSS
منو CSS قسمت 2
لیست محصولات را بسازید
لیست محصولات قسمت 2 را بسازید
لیست محصولات قسمت 3 را بسازید
پیوندهای منو به صفحات
صفحات پویا بسازید
دارای مکان های مکان برای محصولات
صفحات برند پویا بسازید
محصولات را با نام تجاری پرس و جو کنید
کار در صفحه اصلی
Frontend - قلاب سفارشی
قلاب سفارشی برای به دست آوردن جزئیات محصول
اشکالات کوتاه
صفحه جزئیات
جزئیات محصول را واکشی کنید
تخریب داده های محصول
جزئیات صفحه slug
تصاویر صفحه slug
جزئیات قیمت صفحه slug
اضافه کردن به سبد خرید - دکمه ها
جزئیات صفحه CSS
یک اشکالات دیگر
صفحه تماس:
طرح بندی پایه
ایجاد حساب emailjs
با ایمیل ها ارتباط برقرار کنید
محتوای پیام ارسال شده را تغییر دهید
یک ظاهر طراحی شده
اطلاعات را ایجاد کنید
نقشه گوگل را اضافه کنید
خطاهای نقشه را برطرف کنید
ساخت صفحه سبد خرید:
مدیریت اساسی دولت
به عملکرد سبد خرید اضافه کنید
تعداد موارد موجود در سبد خرید را مدیریت کنید
یک ظاهر طراحی شده
یک ظاهر طراحی شده - قسمت 2
جزئیات کالاهای سبد خرید را اضافه کنید
ریاضی سبد خرید
صرفه جویی در سبد خرید در محل ذخیره محلی
موارد را از سبد خرید حذف کنید
تعداد موارد موجود در جلو را مدیریت کنید
تعداد موارد موجود در ایالت را مدیریت کنید
دکمه سبد پاک
سبد خالی را تمیز کنید
اطلاعات سبد خرید را در NAVBAR نشان دهید
کارت سبد خرید
مقدار سبد خرید
احراز هویت:
احراز هویت را اضافه کنید
نام کاربری را در NAV نشان دهید
صفحه تأیید ورود به سیستم
صفحه تأیید ورود به سیستم
پرداخت با استفاده از PayPal:
ایجاد حساب جدید پی پال
Stripe vs PayPal
صفحه پرداخت
دکمه پرداخت پی پال
یک ظاهر طراحی دکمه پرداخت
حفاظت از مسیر
سبد خرید را پس از پرداخت پاک کنید
مدیر سهام قسمت 1
مدیر سهام قسمت 2
بخش پایانی:
نامه های کاربران را ذخیره کنید
پاسخگویی در دستگاه های مختلف
منو را در دستگاه های کوچک پنهان کنید
سئو - بهینه سازی
کد را به GitHub فشار دهید
پروژه را به صورت رایگان در Vercel مستقر کنید