Store App

️ نظرة عامة على المشروع

- هذا مشروع تطبيق ويب حديث وكامل لمتجر إلكتروني للأثاث، تم تطويره باستخدام MERN Stack (MongoDB، Express.js، React، Node.js) مع استخدام React 18، TypeScript، و Vite في الواجهة الأمامية.

- يقدّم هذا المتجر تجربة تسوق متكاملة تشمل: تصفح المنتجات، البحث المتقدم، التصفية حسب الفئة والسعر، عربة تسوق، وإتمام عملية الشراء. كما يتميز بتصميم عصري متجاوب وواجهة مستخدم احترافية.

المميزات والوظائف الأساسية

️ المميزات الأساسية للمتجر الإلكتروني:

* كتالوج المنتجات: عرض شامل لمنتجات الأثاث مع كافة التفاصيل

- بحث وتصفية متقدمة:

- البحث النصي باسم المنتج

- التصفية حسب الفئة (أنواع الأثاث)

- التصفية حسب الشركة أو العلامة التجارية

- التصفية حسب نطاق السعر (باستخدام منزلق)

- تصفية المنتجات التي تشمل الشحن المجاني

- فرز أبجدي (A-Z، Z-A)

- فرز حسب السعر (من الأعلى إلى الأقل والعكس)

- عرض المنتجات: إمكانية التبديل بين عرض الشبكة أو القائمة

- الصفحات المتعددة (Pagination): تصفح مريح للمنتجات باستخدام التنقل بين الصفحات

عربة التسوق وإتمام الشراء:

- عربة التسوق: إضافة/إزالة المنتجات، إدارة الكميات

- حفظ الحالة: تخزين حالة العربة في Local Storage

- عملية الدفع: إتمام الشراء مع التحقق من صحة البيانات

- إدارة الطلبات: عرض تاريخ الطلبات وتتبعها

تسجيل الدخول والمصادقة:

- نظام تسجيل مستخدمين شامل (تسجيل الدخول والتسجيل)

- حماية الصفحات الخاصة بالمستخدمين المسجّلين فقط

- إدارة جلسة المستخدم

تصميم حديث وتجربة مستخدم متميزة:

- تصميم متجاوب: متوافق مع جميع الشاشات باستخدام Tailwind CSS

- مكتبة مكونات: مكونات UI مخصصة مبنية باستخدام Radix UI

- الوضع الليلي/النهاري: إمكانية التبديل بين الثيمات

- أيقونات عصرية: باستخدام مكتبة Lucide React

- إشعارات فورية: إشعارات تفاعلية باستخدام Toasts

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

- الواجهة الأمامية (Frontend):

- React 18 + TypeScript لضمان أمان الأنواع

- React Router v6 للتنقل بين الصفحات

- Redux Toolkit لإدارة الحالة

- Tailwind CSS لتصميم سريع وحديث

- Radix UI لمكونات جاهزة وقابلة للوصول

- Vite لتجربة تطوير سريعة وخفيفة

مكتبات إضافية:

- Axios للتعامل مع الـ APIs

- Embla Carousel لعرض الشرائح

- Class Variance Authority للتحكم بمظهر المكونات

- React Redux لإدارة الحالة المركزية

️ بنية المشروع

- هيكلية معيارية: تنظيم واضح للمكونات، الصفحات، والأدوات المساعدة

- TypeScript: أمان نوعي شامل في جميع أجزاء المشروع

- إدارة الحالة: باستخدام Redux Slices (عربة، مستخدم، ثيم)

- Hooks مخصصة: منطق قابل لإعادة الاستخدام (مثل الإشعارات)

- دوال مساعدة: تنسيقات وتحضير بيانات الـ API

️ خصائص متقدمة

- خيارات متعددة للمنتجات: مثل اختيار اللون

- منتجات مميزة: عرض خاص في الصفحة الرئيسية

- تتبع الطلبات: نظام إدارة وتتبع الطلبات

- معالجة الأخطاء: باستخدام Error Boundaries

- حالات التحميل: مؤشرات تحميل وعناصر هيكلية (Skeletons)

- تحسين لمحركات البحث (SEO): من خلال إعدادات Routing وMeta Tags

تجربة تطوير احترافية

- ESLint: ضبط جودة وتناسق الكود

- TypeScript: أمان نوعي في جميع أجزاء المشروع

- Hot Module Replacement: تجربة تطوير لحظية وسريعة عبر Vite

- تنظيم المكونات: مكتبة مكونات منظمة وسهلة الصيانة