The East | منصة تجارة إلكترونية عصرية للأثاث (React.js - Multi-Language - RTL/LTR)

مشروع The East هو محاكاة كاملة لمتجر إلكتروني متطور متخصص في بيع الأثاث والديكور العصري. تم بناء هذا المشروع كواجهة أمامية (Frontend-Only Application) تعتمد على بنية برمجية قوية تحاكي تجربة المستخدم الكاملة (Full-Stack Experience) باستخدام بيانات وهمية (Mock Data) وتقنيات تخزين محلية، مما يجعله سريعاً، مستقلاً، وجاهزاً للعرض.

يركز المشروع على تقديم تجربة مستخدم (UX) سلسة وتصميم واجهة (UI) تفاعلي يعتمد على البساطة والأناقة (Minimalist Design)، مع دعم كامل لتعدد اللغات والوضع الليلي.

المميزات الرئيسية للمشروع:

1. تجربة تسوق متكاملة:

تصفح المنتجات: عرض المنتجات مع إمكانية الفرز (Sorting) والبحث المباشر (Live Search).

إدارة السلة (Cart Management): إضافة منتجات، تعديل الكميات، وحذف العناصر مع تحديث فوري للإجمالي، بالإضافة إلى وجود سلة جانبية (Side Cart) للوصول السريع.

قائمة الرغبات (Wishlist): إمكانية حفظ المنتجات المفضلة وتفعيل تأثيرات بصرية (Animations) عند الإضافة.

صفحة تفاصيل المنتج: عرض صور متعددة، تقييمات، خيارات (الألوان/الأحجام)، ومنتجات ذات صلة.

2. نظام مصادقة ومستخدمين (Simulated Auth System):

محاكاة كاملة لعمليات تسجيل الدخول (Login) وإنشاء الحساب (Register) باستخدام منطق تحقق (Validation) قوي.

إدارة الجلسة: التعامل مع LocalStorage و Context API للحفاظ على حالة تسجيل الدخول وتذكر بيانات المستخدم حتى بعد تحديث الصفحة.

لوحة تحكم المستخدم (Profile Dashboard): إمكانية تعديل البيانات الشخصية، إدارة العناوين (إضافة/حذف/تعيين كافتراضي)، وعرض سجل الطلبات السابق.

3. التجاوب وتعدد اللغات (Accessibility & Localization):

دعم اللغات (i18n): دعم كامل للغتين العربية والإنجليزية مع تحويل اتجاه الموقع تلقائياً (RTL/LTR) لضمان تجربة قراءة صحيحة.

الوضع الداكن (Dark Mode): إمكانية التبديل بين الوضع النهاري والليلي مع حفظ تفضيلات المستخدم.

تجاوب كامل (Fully Responsive): تصميم يعمل بكفاءة على جميع الأجهزة (موبايل، تابلت، ديسكتوب) مع قائمة جانبية مخصصة للموبايل.

4. محاكاة العمليات الخلفية (Mock Backend Logic):

تم بناء طبقة منطقية (Logic Layer) تحاكي استجابات الخادم (API Responses) والتأخير الشبكي (Network Latency) لعرض حالات التحميل (Loading States) ومعالجة الأخطاء (Error Handling) بشكل واقعي.

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

المكتبة الأساسية: React.js (Functional Components & Hooks).

إدارة الحالة (State Management): React Context API + useReducer (لإدارة السلة، المستخدم، والإعدادات العامة بكفاءة عالية).

التوجيه (Routing): React Router DOM v6.

التنسيق (Styling): CSS3 متقدم (Flexbox/Grid) مع تصميم مخصص (Custom Design) ومتجاوب.

الأنيميشن (Animations): مكتبة Framer Motion لإضافة حركات انتقالية ناعمة للعناصر والصفحات (Page Transitions).

تعدد اللغات: مكتبة i18next و react-i18next.

الأيقونات: React Icons (FontAwesome/Material).

البيانات: Mock Data Structure (JSON-based) لمحاكاة قاعدة البيانات.

التحديات التقنية والحلول:

الاستغناء عن الباك إند: تم كتابة Services وهمية تقوم بمحاكاة عمليات GET, POST, PUT, DELETE والتعامل مع LocalStorage كقاعدة بيانات مؤقتة، مما يسمح للمستخدم بتجربة دورة حياة كاملة (من التسجيل إلى إتمام الطلب) دون الحاجة لخادم فعلي.

أداء التطبيق: استخدام useMemo و useCallback لتقليل عمليات إعادة التصيير (Re-renders) غير الضرورية، خاصة في عمليات البحث وتصفية المنتجات.