موقع تسوق الكتروني كامل

عنوان المشروع:

تطبيق متجر إلكتروني كامل (E-commerce App) باستخدام React و React Query و Context API

وصف تفصيلي:

مشروع متجر إلكتروني متكامل تم تطويره باستخدام مكتبات React.js و React Query و Context API لإدارة الحالة وتدفق البيانات داخل التطبيق.

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

️ المميزات الأساسية:

نظام تسجيل الدخول والتسجيل (Auth System)

باستخدام JWT Token مع حفظ بيانات المستخدم في LocalStorage.

️ إدارة سلة المشتريات (Cart System)

إضافة المنتجات إلى السلة.

تحديث الكمية مباشرة بدون إعادة تحميل الصفحة.

حذف منتج معين أو إفراغ السلة بالكامل.

حساب السعر الإجمالي تلقائيًا.

حفظ رقم الكارت (cartId) في LocalStorage واسترجاعه بعد تسجيل الدخول.

️ قائمة المفضلة (Wishlist)

استخدام React Query لإدارة البيانات وجلبها من الـ API.

تحديث القائمة لحظيًا بعد الإضافة أو الحذف بدون Refresh.

عرض المنتجات المحفوظة بشكل منسق وسريع.

نظام الطلبات والدفع الإلكتروني (Orders & Checkout)

إنشاء طلب جديد.

ربط الواجهة مع API خاص بالدفع الإلكتروني.

حفظ الطلبات السابقة لكل مستخدم.

استخدام Context API و React Query معًا

لتجربة أداء عالية وإدارة حالة ذكية بين الصفحات.

تحديث البيانات فورًا عند تسجيل الدخول أو تغيير المستخدم بدون Refresh.

تصميم متجاوب بالكامل (Responsive UI)

مناسب لجميع الشاشات (موبايل – تابلت – كمبيوتر).

? التقنيات المستخدمة:

React.js (Functional Components & Hooks)

Context API

React Query

Axios

React Router DOM

React Hot Toast (للتنبيهات)

Framer Motion (للحركات والأنيميشن)

React Spinners (لـ Loading States)

Bootstrap / CSS

LocalStorage

API خارجي (Routemisr E-commerce API)

هيكل التطبيق:

AuthContext – لإدارة الدخول والخروج والتوكن.

CartContext – لإدارة بيانات السلة.

WishListContext – لجلب وإدارة المفضلة باستخدام React Query.

OrderContext – لمعالجة الطلبات والدفع الإلكتروني.

صفحات رئيسية:

الصفحة الرئيسية (Home)

تفاصيل المنتج

سلة المشتريات (Cart)

المفضلة (Wishlist)

الدفع والطلبات (Checkout / Orders)

تسجيل الدخول والتسجيل (Login / Register)

ملاحظات إضافية:

المشروع تم بناؤه بطريقة منظمة مع تقسيم الكود في ملفات Context منفصلة، مع الالتزام بمعايير الكود النظيف (Clean Code).

يسمح بسهولة التطوير والتوسّع في المستقبل، مثل إضافة لوحة تحكم للمشرف (Admin Dashboard) أو ربط بوابات دفع جديدة.