Rebex Shop - واجهة متجر إلكتروني

تطبيق واجهة أمامية متكامل لمتجر إلكتروني مصمم بأسلوب عصري لتقديم تجربة تسوق سلسة وعالية الأداء. يركز المشروع على استعراض أحدث تقنيات بيئة عمل React والمكتبات الداعمة لها، مع تنظيم كود نظيف يعتمد على Context API لإدارة الحالة المحلية ونشر سريع ومباشر عبر منصة Cloudflare.

المعمارية التقنية والمزايا المنجزة

الحزمة التقنية الأساسية (Modern Frontend Stack)

• React 19 & Vite 8: بناء المكونات بالتجميع التكيفي السريع والاستفادة من أحدث الـ (Hooks) وContext API لإدارة بيانات المكونات.
• Tailwind CSS v4: تنسيق عالي المرونة والتجاوب مع دعم أنماط المظهر الثلاثية.
• React Router v7: إدارة التنقل بين الصفحات والتوجيه بدون إعادة تحميل (SPA Routing).
• Cloudflare Workers / Pages: إعدادات نشر جاهزة عبر أداة Wrangler وCloudflare Pages لتقديم استجابة فائقة السرعة من Edge Deployment.

إدارة الحالة والمصادقة (State & Auth)

• نظام المصادقة والتسجيل (Client-Side Auth): نماذج تسجيل الدخول وإنشاء الحسابات مع حفظ حالة الجلسة محلياً عبر localStorage.
• سلة مشتريات ديناميكية (Cart Context): مزامنة فورية لإضافة وحذف وتعديل كميات المنتجات مع احتساب الإجمالي في الوقت الفعلي.
• التحقق من صحة النماذج: استخدام مكتبة React Hook Form لبناء نموذج إتمام شراء (Checkout Form) مرن مع التحقق الفوري من صحة مدخلات المستخدم قبل إتمام الطلب.

واجهة وتجربة المستخدم (UI/UX Features)

• كتالوج منتجات تفاعلي: عرض المنتجات بطاقات مصممة بعناية تتضمن التقييمات عبر Lucide React، شارات الخصومات، وعرض السعر.
• Theme Engine: دعم التبديل بين 3 أوضاع للمظهر (الداكن Dark / المضيء Light / التلقائي حسب إعدادات النظام System).
• تصميم متجاوب بالكامل: هيكلة مرنة تدعم مختلف قياسات الشاشات مع قائمة هاتف (Hamburger Menu) تنقل سلسة.

بنية المشروع (Project Structure)

src/
├── components/        # مكونات UI قابلة لإعادة الاستخدام (Navbar, ProductCard, Rating, ThemeToggle...)
├── context/           # مزودات حالات Context API (AuthContext, CartContext, ThemeContext)
├── data/              # البيانات الثابتة للمنتجات
├── layout/            # الهيكل الرئيسي للواجهة (Header, Footer)
├── pages/             # صفحات المسارات (Home, Auth, Cart, Checkout, ProductDetails)
├── App.jsx            # تعريف المسارات والتوجيه
└── main.jsx           # نقطة الانطلاق ومغلفات المزودات (Providers)