e-commerce

Fresh Cart - E-commerce Website

وصف المشروع:

Fresh Cart هو موقع تجارة إلكترونية متكامل تم تطويره باستخدام React.js. يقدم الموقع واجهة سهلة الاستخدام لعرض المنتجات وإضافتها إلى سلة المشتريات، بالإضافة إلى العديد من الميزات التي تضمن تجربة تسوق سلسة للمستخدم.

المميزات الأساسية:

عرض المنتجات: صفحة تعرض المنتجات المتاحة مع تفاصيل مثل الاسم والسعر والوصف.

إضافة إلى السلة: يمكن للمستخدمين إضافة المنتجات إلى سلة المشتريات، مع تحديث فوري للسلة.

تصميم استجابة: الموقع مصمم بشكل كامل ليتناسب مع جميع أحجام الشاشات باستخدام تقنيات CSS المتقدمة وTailwind CSS لضمان أفضل تجربة على الهواتف المحمولة والأجهزة اللوحية.

نظام الدفع: صفحة الدفع تتضمن زر تعطيل تلقائيًا عند عدم وجود منتجات في السلة.

تبديل بين الوضع الفاتح والداكن: يتيح للمستخدمين التبديل بين الوضعين الفاتح والداكن مع تخصيص الألوان بناءً على تفضيلاتهم.

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

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

React.js: لإنشاء واجهات المستخدم.

Tailwind CSS: لتصميم وتنسيق الموقع بشكل متجاوب وفعال.

React Router: لتسهيل عملية التنقل بين الصفحات.

React Query: لإدارة جلب البيانات والتخزين المؤقت بكفاءة.

Flowbite React: لإضافة مكونات جاهزة وسهلة الاستخدام.

مراحل التطوير:

تصميم الواجهة: تم تصميم واجهة المستخدم باستخدام Tailwind CSS، مع التركيز على تقديم تجربة سلسة وجذابة للمستخدم.

إدارة الحالة: تم استخدام React hooks مثل useState و useEffect لإدارة حالة التطبيق بشكل فعال.

التنقل بين الصفحات: تم إعداد نظام التنقل بين صفحات المنتجات وسلة المشتريات والدفع باستخدام React Router.

التخصيص والاستجابة: تمت مراعاة تحسين تجربة المستخدم على مختلف الأجهزة من خلال التصميم المستجيب وتخصيص الألوان لتتناسب مع الوضعين الفاتح والداكن.