متجر إلكتروني متكامل مع لوحة تحكم للمسؤول باستخدام React وNode.js
تفاصيل العمل
نبذة عن المشروع:
قمت بتطوير تطبيق ويب لمتجر إلكتروني متكامل يتيح للمستخدمين تصفح المنتجات حسب التصنيفات، مع إمكانية تسجيل الدخول والتسجيل، ويوفر لوحة تحكم متقدمة للمسؤول لإدارة المنتجات بشكل كامل (إضافة، تعديل، حذف). تم بناء المشروع باستخدام أحدث تقنيات الويب مع فصل واضح بين الواجهة الأمامية والخلفية.
مميزات المشروع:
واجهة مستخدم عصرية وتفاعلية:
تصميم متجاوب باستخدام Bootstrap وCSS مخصص.
استخدام مكتبة Animate.css لإضفاء حيوية على التنقل بين الصفحات.
شريط تنقل (Navbar) ثابت وسهل الاستخدام.
إدارة المنتجات:
صفحة خاصة للمسؤول (Admin) يمكن من خلالها:
إضافة منتج جديد مع صورة، وصف، سعر، وتصنيف.
تعديل بيانات المنتجات الحالية.
حذف المنتجات.
عرض المنتجات في جدول مع جميع التفاصيل.
استخدام SweetAlert للتنبيهات والتأكيدات.
تصفح المنتجات:
صفحة رئيسية تعرض المنتجات بشكل بطاقات (Cards) مع إمكانية البحث والتصفية حسب التصنيف.
عرض تفاصيل مختصرة لكل منتج (اسم، وصف، سعر، تصنيف، صورة).
نظام تسجيل ودخول المستخدمين:
صفحة تسجيل مستخدم جديد مع التحقق من صحة البيانات.
صفحة تسجيل دخول للمستخدمين الحاليين.
هيكلية برمجية منظمة:
فصل المكونات (Components) مثل: نموذج إضافة منتج، نموذج تسجيل، نموذج تسجيل الدخول، قائمة المنتجات، إلخ.
استخدام React Router للتنقل بين الصفحات (Home, Login, Register, Admin, Products).
إدارة الحالة (State) بشكل مركزي في App.js لربط بيانات المنتجات بين لوحة التحكم وصفحة العرض.
التقنيات والأدوات المستخدمة:
الواجهة الأمامية:
React.js (مع استخدام hooks وstate management)
React Router
Bootstrap وCSS مخصص
Animate.css
SweetAlert2
الواجهة الخلفية:
Node.js (Express)
التعامل مع API خاص لإدارة المنتجات والمستخدمين
تنظيم الكود:
تقسيم الكود إلى مجلدات واضحة: components, pages, public, إلخ.
كتابة كود نظيف وقابل للتطوير والتوسعة.
صور من المشروع (يمكنك إرفاقها):
صورة للصفحة الرئيسية.
صورة لصفحة المنتجات.
صورة للوحة تحكم المسؤول.
صورة لنموذج إضافة منتج.
ملاحظات إضافية:
الكود قابل للتطوير لإضافة مزايا مثل: سلة المشتريات، الدفع الإلكتروني، إدارة المستخدمين، إلخ.
يمكن ربط المشروع مع أي قاعدة بيانات أو API خارجي بسهولة.
ملاحظة:
لا تظهر المنتجات في صور المشروع المرفقة لأن عرض المنتجات يعتمد على تشغيل السيرفر (الخلفية) وقاعدة البيانات. في حالتي السيرفر غير مفعّل و قاعدة البيانات فارغة، ستظهر الصفحات بدون منتجات. الكود يعمل بشكل سليم عند توفر السيرفر والبيانات فقط لم اجد الوقت لعمله بسبب فقداني لملف السيرفير فالوقت الحالي بسبب تعطل جهازي :( .
ملاحظه2:
لم اركز على الجماليات في هذا المشروع وبامكاني جعله ب افضل شكل ممكن ولكن ركزت على فعاليته ز