هذا المشروع إلى بناء واجهة أمامية تفاعلية وجذابة لموقع بيع مستحضرات التجميل (ميكب) باستخدام React.js وJavaScript (ES6+) مع HTML5 وCSS3 وBootstrap لضمان تصميم عصري ومتجاوب مع جميع الأجهزة. يشمل الموقع صفحات رئيسية مثل الصفحة الرئيسية التي تعرض بانر دعائي، أقسام للمنتجات الأكثر مبيعاً والجديدة، وصفحة المنتجات التي تعرض جميع المنتجات على شكل شبكة (Grid) مع شريط تصفية جانبي حسب الفئة، العلامة التجارية، السعر، التقييم، واللون، بالإضافة إلى شريط بحث للبحث الفوري عن المنتجات وترتيب النتائج بعدة معايير، وصفحة تفاصيل المنتج التي تعرض الصور، الاسم، السعر، الوصف، المكونات، التقييمات، المراجعات، والمنتجات المشابهة مع إمكانية اختيار الكمية والإضافة إلى السلة. تم استخدام React Router DOM للتنقل بين الصفحات، وContext API لإدارة الحالة العامة مثل حالة المصادقة ومحتويات سلة التسوق، مع تخزين بيانات السلة محلياً باستخدام Local Storage للحفاظ عليها عند إعادة تحميل الصفحة. كما تم تطوير سلة تسوق تفاعلية تسمح بإضافة المنتجات، زيادة أو تقليل الكميات، حذف المنتجات، وعرض المجموع الكلي، إلى جانب نموذج دفع يعرض بيانات العميل والعنوان وطريقة الدفع ومراجعة الطلب النهائية، مع نظام مصادقة وهمي (Mock Authentication) لتسجيل الدخول وإنشاء الحساب وحماية بعض الصفحات مثل ملف المستخدم الشخصي الذي يعرض سجل الطلبات وحالتها. تم استخدام Bootstrap لبناء شبكة مرنة، أزرار، نماذج، وقوالب جاهسة مع تخصيص إضافي باستخدام CSS Modules أو Styled Components لإضفاء لمسة فريدة تعكس هوية العلامة التجارية، مع إضافة إشعارات فورية (Toasts) لتأكيد الإضافات للسلة، مؤشرات تحميل (Spinners)، وتأكيدات قبل حذف المنتجات لتحسين تجربة المستخدم، بالإضافة إلى تحسين الأداء باستخدام React.memo وuseCallback وLazy Loading للصور والمكونات، وصفحات إضافية مثل مدونة لنصائح التجميل وصفحة اتصل بنا مع نموذج تواصل. هذا المشروع يقدم واجهة مستخدم احترافية وسلسة لعشاق التجميل، تعزز من سهولة التصفح والتسوق وتزيد من ولاء العملاء، مع إمكانية ربطه مستقبلاً بأي Back-End عبر APIs، مما يجعله أساساً قوياً وقابلاً للتطوير لمنصة تجارة إلكترونية متكاملة.
