متجر إلكتروني باللغة العربية
تفاصيل العمل
تطبيق تجارة إلكترونية متجاوب مع كل الشاشات، متخصص في البيع. يركز على تقديم تجربة مستخدم سلسة من خلال إدارة متقدمة لحالة التطبيق (State Management)، وجلب البيانات بكفاءة، وتحسين أداء الواجهة.
_الميزات البرمجية والتحديات التقنية التي تم حلها:
1- إدارة الحالة واستمرارية البيانات: تم استخدام Redux Toolkit لإدارة البيانات بشكل مركزي. قمت بحل مشكلة "فقدان البيانات عند تحديث الصفحة" من خلال دمج التزامن مع LocalStorage، مما يضمن بقاء سلة التسوق والمنتجات متاحة للمستخدم دائماً.
2- تحسين أداء الواجهة (Performance Optimization): استخدمت الـ Hook الشهير useMemo للتعامل مع العمليات المعقدة لتصفية (Filtering) وترتيب (Sorting) المنتجات. هذا يمنع إعادة بناء العناصر (Re-renders) غير الضرورية ويضمن سلاسة حتى مع وجود كميات كبيرة من البيانات.
3- جلب البيانات الديناميكي: قمت بجلب بيانات غير متزامنة باستخدام createAsyncThunk للتواصل مع (API)، مع إضافة حالات التحميل (Loading states) ومعالجة الأخطاء.
4- نظام ترقيم مخصص (Pagination): قمت ببرمجة نظام ترقيم لعرض 4 منتجات فقط في كل مرة.
5- تصفية متعددة المعايير: دمجت نظام تصفية حسب الفئة مع نظام ترتيب حسب السعر، بحيث يعملان بانسجام مع نظام الترقيم.
6- توجيه آمن وديناميكي: استخدمت React Router لإدارة التنقل بين الصفحات، بما في ذلك صفحة "المنتج الواحد" التي تجلب بياناتها بناءً على المعايير الموجودة في الرابط (URL Parameters).
7- ميزة dark and light theme تتيح التبديل بين الوضع الليلي النهاري حسب التوقيت وتفضيل المستخدم.
8- التجاوب مع كل الشاشات من الكمتبيوتر والتابلت والموبايل.
9 - نشر التطبيق وعمل deploy له.
هذا رابط GitHub :