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

وصف مشروع DESIRE – موقع إلكتروني لبيع ملابس رجالية (Full Stack PERN)

DESIRE هو تطبيق ويب متكامل (Full Stack PERN) لبيع الملابس الرجالية عبر الإنترنت، يهدف إلى تقديم تجربة تسوق سلسة وعصرية مع واجهة جذابة وأداء عالٍ.

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

تم استخدام Vite لتوفير بيئة تطوير سريعة وفعالة لتطبيق React.js.

ساهم ذلك في تحسين سرعة البناء وتجربة التطوير بشكل عام.

️ 2. بناء واجهة خلفية باستخدام Node.js و Express.js

تم تطوير RESTful API باستخدام Express.js لتوفير نقاط نهاية (Endpoints) ديناميكية.

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

️ 3. إدارة البيانات باستخدام PostgreSQL و Prisma ORM

تم استخدام PostgreSQL كقاعدة بيانات رئيسية لتخزين بيانات المنتجات، الأحجام، الأسعار، الطلبات والمستخدمين.

تم الاعتماد على Prisma ORM لإدارة قاعدة البيانات بطريقة آمنة وفعالة.

4. المصادقة وحماية البيانات

تم توفير نظام مصادقة آمن باستخدام:

JWT (JSON Web Tokens) للمصادقة وإدارة الجلسات.

Firebase Authentication لدعم تسجيل الدخول عبر البريد الإلكتروني أو حسابات Google وFacebook.

تم تعزيز حماية التطبيق باستخدام helmet و @arcjet/node.

5. جلب البيانات وإدارتها باستخدام React Query (TanStack Query)

تم استخدام React Query لإدارة جلب البيانات من الواجهة الخلفية (Express.js API) بشكل ديناميكي وفعال.

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

6. تصميم واجهة المستخدم (Frontend)

تم تطوير واجهة المستخدم باستخدام:

React.js + Vite

Tailwind CSS لتصميم متجاوب وأنيق.

HTML5 و CSS3 لكتابة هيكل وتصميم صفحات الموقع.

شملت الواجهة:

Header: شعار وروابط التصفح.

Product Listing: قائمة عرض المنتجات.

Product Details: عرض تفاصيل المنتجات.

Cart: سلة المشتريات وإدارة الطلبات.

Footer: معلومات التواصل وروابط الشبكات الاجتماعية.

️ 7. الرسوم المتحركة والتفاعلات

تم استخدام Framer Motion لإضافة رسوم متحركة سلسة ومحترفة عند:

ظهور المنتجات.

الانتقالات بين الصفحات.

تفاعل الأزرار.

? 8. اختبار المكونات والـ APIs باستخدام Vitest

تم تنفيذ اختبارات وحدات واختبارات تكامل لضمان جودة واستقرار كل من:

الواجهة الأمامية (React Components)

الواجهة الخلفية (APIs)

منطق جلب البيانات وسلة المشتريات.

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

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

تم نشر تطبيق React + Vite على Vercel لضمان سرعة الأداء وسهولة الوصول للمستخدمين.

الواجهة الخلفية (Backend):

تم نشر Node.js + Express.js على Render لتوفير واجهة برمجة التطبيقات (API) بشكل آمن وفعال.

قاعدة البيانات (Database):

تم استضافة قاعدة بيانات PostgreSQL على Neon، وهو مزود سحابي حديث يدعم قواعد بيانات PostgreSQL مع أداء عالي ومرونة.

رابط المشروع

https://clothing-ecommerc...

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

يوفر DESIRE تجربة مستخدم سلسة وسريعة مع واجهة جذابة وتصميم متجاوب يلبي احتياجات مختلف العملاء.

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

بفضل بنية Full Stack PERN، يتمتع المشروع بالمرونة والقابلية للتوسع مستقبلاً.