منصة متجر إلكتروني متكاملة مبنية بـ Next.js مع تسجيل دخول، Dark Mode، ومدفوعات Stripe

قمت بتطوير منصة متجر إلكتروني (E-commerce) كاملة باستخدام Next.js ضمن تدريب Full-Stack Development لعام 2024، مع ربطها بلوحة تحكم إدارة عبر Strapi، وتوثيق دخول حقيقي باستخدام Clerk، وإتمام عمليات الدفع عبر Stripe.

المتجر مصمم ليقدّم تجربة مستخدم سلسة، ويعرض المنتجات المضافة من لوحة الإدارة مباشرة في الواجهة دون أي تحديثات يدوية. كما قمت بتنفيذ نظام سلة مشتريات متقدم مرتبط بحساب المستخدم.

️ المميزات الرئيسية:

جلب بيانات المنتجات مباشرة من الـ API المتصل بـ Strapi.

دعم Dark Mode متكامل عبر الواجهة.

تسجيل دخول وتسجيل حساب باستخدام Gmail بواسطة Clerk Authentication.

أي منتج يتم إضافته من الإدارة يظهر فورًا في واجهة المتجر.

إذا قام المستخدم بإضافة منتجات للسلة ثم سجل خروج، تبقى السلة محفوظة عند تسجيل الدخول مرة أخرى.

لا يمكن إتمام عملية الشراء إلا إذا كان المستخدم مسجّل دخول.

إمكانية شراء منتج واحد مباشرة من صفحة التفاصيل دون الحاجة إلى الذهاب للسلة.

استقبال الدفع بأمان عبر Stripe.

تنبيهات تفاعلية باستخدام SweetAlert2.

? دوري في المشروع:

بناء الواجهة الأمامية بالكامل باستخدام Next.js 13+ App Router.

ربط المشروع بلوحة تحكم Strapi وجلب البيانات بـ API Routes و Fetching.

تنفيذ نظام المصادقة الكامل باستخدام Clerk (Sign-in / Sign-up / Gmail Login).

تصميم وإدارة حالة سلة المشتريات مع حفظ بياناتها للمستخدم.

تنفيذ صفحة الدفع وربطها بـ Stripe Checkout.

إدارة التجربة التفاعلية باستخدام SweetAlert2 (نجاح الشراء – أخطاء – تنبيهات).

اختبار شامل لضمان استقرار المشروع وسلاسة تجربة المستخدم.

نتيجة المشروع:

متجر إلكتروني جاهز للاستخدام ويبرهن قدرتي على تطوير حلول متكاملة باستخدام Next.js.

قدرة المستخدم على التسوق، الإضافة للسلة، والشراء بشكل آمن وسلس.

لوحة إدارة سهلة تتيح إضافة المنتجات دون أي كود.

تجربة دخول وحسابات احترافية جاهزة للعمل التجاري الحقيقي.