دوره MERN Stack ES6 E-commerce از ابتدا تا استقرار

آنچه یاد خواهید گرفت:

• React JS برای ساخت یک اپلیکیشن MERN کامل، مدیریت پایگاه داده، برقراری ارتباط از طریق Nodemailer و استقرار
• 12.82 ساعت ویدئو آموزشی
• مطالعه موردی: توسعه یک پلتفرم فروشگاهی با استفاده از MERN stack. برنامه ریزی، اجرا، تست، استقرار و نگهداری برای راه‌اندازی موفق و رضایت کاربر
• استفاده از فریمورک Node و Express با MongoDB و Mongoose برای ذخیره و بازیابی اطلاعات کاربران و محصولات
• استفاده از Nodemailer برای ارسال ایمیل‌های تأیید و پیام‌های تماس
• متدهای پرداخت: پی‌پال و Stripe

پیش نیازهای دوره

• دانش اولیه از React و NodeJS
• تمایل به یادگیری چیزهای جدید

توضیحات دوره

ما قرار است این وب‌سایت را با استفاده از MERN stack بسازیم. این دوره برای مبتدیان و توسعه‌دهندگان Junior طراحی شده است. این دوره یک تجربه خرید آشنا و بصری را با طرح بندی حرفه‌ای با استفاده از React Bootstrap ارائه می‌دهد. به عنوان بخشی از فرآیند خلاقانه، سایت خود را با ساخت یک لوگوی منحصر به فرد و Jumbotron با استفاده از Canva شخصی‌سازی می‌کنیم و افکت تایپ‌رایتر را به آن اضافه می‌کنیم. یک هدر بالایی برای تجربه کاربر و مدیر و یک هدر پایینی برای دسته‌بندی‌ها وجود دارد.

هدر ما شامل یک قابلیت جستجوی کاربرپسند است که مشتریان را به راحتی به آیتم‌های مورد نظرشان هدایت می‌کند. در این صفحه جستجو، مشتریان می‌توانند محصولات را بر اساس قیمت و نظرات فیلتر کنند، که تجربه مرور آن‌ها را بهبود می‌بخشد.

علاوه بر این، هدر ما شامل لینک‌های ضروری مانند «درباره ما» است که به شما امکان می‌دهد اطلاعات خود را شخصی‌سازی و داستان منحصر به فرد خود را به اشتراک بگذارید.

برای کاربران وارد شده، یک منوی کشویی گزینه‌های متناسبی را ارائه می‌دهد، اطلاعات کاربر قابل بروزرسانی است و سابقه سفارش قابل مشاهده است. اگر مدیر باشید، یک منوی کشویی تخصصی مدیر نمایش داده می‌شود که دسترسی به عملکردهای خاص را فراهم می‌کند.

صفحه اصلی مجموعه‌ای از محصولات برجسته را به نمایش می‌گذارد، که هر کدام با یک افکت جذاب hover scale در هنگام تعامل بهبود یافته است. کلیک بر روی یک محصول دسترسی به جزئیات جامع، از جمله یک چارچوب اسکلت که به دقت از ابتدا طراحی شده، را فراهم می‌کند.

علاوه بر این، نمایش محصول ما چندین تصویر برای مشاهده عمیق، همراه با قابلیت بزرگ‌نمایی تصویر و یک product lightbox ارائه می‌دهد که یک تجربه جذاب را تضمین می‌کند. شما قادر خواهید بود اطلاعات گسترده محصول را مرور کنید، آیتم‌ها را به سبد خرید خود اضافه کنید، نظرات خود را ارسال کنید، امتیاز دهید یا نظراتی را بگذارید که یک تعامل جامع با محصولات را ممکن می‌سازد.

وقتی کاربر روی "افزودن به سبد خرید" برای یک محصول کلیک می‌کند، سیستم یک ورودی جدید در پایگاه داده یا آرایه سبد خرید ایجاد می‌کند، شامل شناسه محصول، مقدار، قیمت و سایر جزئیات مربوطه. یک گزینه برای حذف آیتم‌ها از سبد خرید (مثلاً یک دکمه/آیکون "حذف" یا "Delete") به کاربران اجازه می‌دهد محصولات ناخواسته را حذف کنند. پس از انتخاب، سیستم آیتم مربوطه را از سبد خرید حذف می‌کند و پایگاه داده، کل قیمت را بر اساس آن بروزرسانی می‌کند.

ثبت‌نام و ورود، شامل اعتبارسنجی و ذخیره‌سازی امن اطلاعات کاربر هنگام ثبت‌نام، و تأیید اعتبار کاربر برای ورود است. علاوه بر این، کاربران می‌توانند جزئیات ارسال را با افزودن، ویرایش یا حذف آدرس‌ها در پروفایل خود مدیریت کنند. هنگام پرداخت، کاربران آدرس‌های ذخیره شده را انتخاب یا آدرس‌های جدیدی اضافه می‌کنند، با جزئیات ارسال انتخابی که با سفارش مرتبط می‌شود. این عملکردها اولویت را به مدیریت امن داده‌ها، رابط‌های کاربرپسند و پیروی از بهترین شیوه‌ها برای امنیت رمز عبور و اعتبارسنجی ورودی می‌دهند.

کاربران می‌توانند در صفحه پیش‌نمایش سفارش، بین پی‌پال یا کارت اعتباری به عنوان متد پرداخت خود در هنگام پرداخت انتخاب کنند، که در آنجا می‌توانند اطلاعات خود را قبل از ثبت سفارش ویرایش کنند. پس از تأیید، کاربران یک ایمیل تأیید تولید شده توسط وب‌سایت دریافت می‌کنند که نشان می‌دهد سفارش آن‌ها در حال پردازش است، شامل روش پرداخت انتخابی و کل قیمت. مدیر‌ها قابلیت مدیریت سفارشات، پردازش آن‌ها و ارائه جزئیات ارسال با استفاده از Nodemailer را دارند. پس از پردازش ارسال، کاربران یک ایمیل اطلاع‌رسانی با جزئیات ارسال مربوطه دریافت می‌کنند. مهم‌تر از همه، پس از هر سفارش موفق، پایگاه داده به طور خودکار به‌روزرسانی می‌شود تا مقدار خریداری شده کسر شود و مدیریت دقیق موجودی را تضمین کند.

بخش فوتر شامل لینک‌های مختلفی است که برای بهبود تعامل کاربر طراحی شده‌اند، در حالی که اطمینان حاصل می‌شود که آنها در اکوسیستم وب‌سایت باقی می‌مانند. از جمله این لینک‌ها، یک گزینه وجود دارد که کاربران را به وب‌سایت پرتفولیوی شخصی توسعه‌دهنده وب هدایت می‌کند، که یک دروازه یکپارچه برای کاربران فراهم می‌کند تا پرتفولیوی فردی توسعه‌دهنده را کشف و به آن دسترسی پیدا کنند.

این دوره برای چه کسانی مناسب است؟

• کدنویسان مبتدی
• برنامه نویسان مبتدی جاوا اسکریپت
• توسعه‌دهندگان وب
• کارآفرینان