موقغ ملابس رجالية DESIRE مبرمج ب react vite

وصف مشروع DESIRE - موقع إلكتروني لبيع ملابس رجالية

1. إعداد بيئة التطوير باستخدامVite

تم استخدامVite لإنشاء بيئة تطوير سريعة وفعالة لتطبيق React. ساهم ذلك في تقليل أوقات البناء وتحسين تجربة التطوير بشكل عام.

2. إدارة البيانات باستخدام JSON Server

تم إعداد **JSON Server** لتوفير خادم بيانات وهمي، مما ساعد في محاكاة مكالمات API أثناء التطوير.

- تم تخزين بيانات المنتجات، الأسعار، الأحجام، والتقييمات في ملفdb.json

3. جلب البيانات باستخدامReactQueryTanStack

- استخدمت مكتبةReactQueryTanStack* لإدارة جلب البيانات بشكل ديناميكي وفعال.

- تم استخدام`useQuery` لجلب بيانات المنتجات من الخادم المحلي (JSON Server)، مع ضمان تحديث البيانات تلقائيًا عند تغييرها.

4. تصميم واجهة المستخدم باستخدام HTML و CSS

- تم بناء الواجهة باستخدام **HTML5** و **CSS3** لتوفير تصميم عصري ومتجاوب يناسب جميع الأجهزة.

- تضمنت المكونات الأساسية:

- الرأس (Header):** يحتوي على شعار الموقع وروابط الأقسام.

-قائمة المنتجات (Product Listing):** لعرض الملابس المتوفرة.

- تفاصيل المنتج (Product Details):** لعرض تفاصيل كل قطعة ملابس.

- سلة المشتريات (Cart):** لعرض وإدارة المنتجات المختارة.

- التذييل (Footer):** يحتوي على معلومات الاتصال وروابط التواصل الاجتماعي.

5. المصادقة باستخدام Firebase Authentication

تم استخدام Firebase Authentication لتوفير نظام تسجيل دخول آمن وسهل.

تم دعم تسجيل الدخول باستخدام البريد الإلكتروني وكلمات المرور، بالإضافة إلى تسجيل الدخول عبر Google و Facebook.

ساهم Firebase في تسهيل إدارة المستخدمين وحمايتهم من خلال أدوات أمان مدمجة.

6. تحريك المكونات باستخدام Framer Motion

- تم استخدام مكتبة **Framer Motion** لإضافة تأثيرات حركية سلسة.

- استخدمتmotion.div` لتحريك ظهور المنتجات، الأزرار، والانتقالات بين الصفحات، مما أضاف تجربة استخدام مميزة.

7. اختبار المكونات باستخدامVitest

- تم استخدامVitest لضمان جودة الكود واستقرار المكونات.

- تضمنت الاختبارات:

- التحقق من منطق جلب البيانات.

- اختبار واجهة المستخدم لنموذج الطلب وسلة المشتريات.

8. نشر التطبيق

- بعد الانتهاء من التطوير والاختبار، تم نشر الموقع باستخدامVercel.

- تم إعداد النشر المستمر لتحديث الموقع تلقائيًا مع كل تعديل جديد على الكود.

9-الموقع: https://clothing-ecommerc...

ملاحظات إضافية

- تم التركيز على تقديم تجربة مستخدم سلسة وسريعة.

- الموقع يتميز بواجهة جذابة وتصميم متجاوب يلبي احتياجات مختلف العملاء.

- اسم المشروع **DESIRE** يعكس الأناقة والجاذبية التي تقدمها العلامة التجارية.