LUXE - Modern E-Commerce Platform

و متجر إلكتروني راقي ومتطور لبيع الملابس والأزياء، تم تطويره باستخدام أحدث تقنيات الويب الحديثة. يجمع المشروع بين التصميم الأنيق والأداء العالي لتقديم تجربة تسوق استثنائية تضاهي العلامات التجارية العالمية مثل Zara وApple.

? الهدف من المشروع

إنشاء واجهة أمامية (Frontend) احترافية لمتجر إلكتروني يوفر:

تجربة مستخدم سلسة وسهلة

تصميم عصري وأنيق يعكس الفخامة

أداء سريع وتفاعلي

توافق كامل مع جميع الأجهزة (موبايل، تابلت، كمبيوتر)

✨ المميزات الرئيسية

1. عرض المنتجات الذكي

عرض المنتجات من API خارجي (Fake Store API)

شبكة عرض تفاعلية ومتجاوبة

هيكل تحميل انسيابي (Skeleton Loaders)

تأثيرات حركية جذابة عند التمرير

2. نظام تصفية وبحث متقدم

التصفية حسب الفئات (Categories)

التصفية حسب نطاق السعر (Price Range)

الترتيب حسب السعر والتقييمات

واجهة تصفية جانبية سهلة الاستخدام

3. سلة التسوق الذكية

درج جانبي منزلق للسلة (Side Drawer)

إضافة وحذف المنتجات بسهولة

تعديل الكميات بشكل تفاعلي

حساب تلقائي للمجموع والضرائب والشحن

حفظ البيانات تلقائياً في المتصفح

4. قائمة الأمنيات (Wishlist)

حفظ المنتجات المفضلة

إضافة وحذف بضغطة واحدة

أيقونة قلب تفاعلية مع تأثيرات بصرية

حفظ دائم للبيانات

5. الوضع الليلي (Dark Mode)

تبديل سلس بين الوضع الفاتح والداكن

ألوان راقية (فحمي غامق بدلاً من الأسود الصارخ)

حفظ تفضيلات المستخدم

دعم كامل لجميع المكونات

6. نافذة تفاصيل المنتج

نافذة منبثقة أنيقة عند النقر على المنتج

عرض شامل للمعلومات والوصف

صور عالية الجودة

أزرار سريعة للإضافة للسلة أو المفضلة

7. تصميم متجاوب بالكامل

يعمل بشكل مثالي على الهواتف الذكية

مُحسّن للأجهزة اللوحية

تجربة كاملة على شاشات سطح المكتب

انتقالات سلسة بين أحجام الشاشات

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

Frontend Framework:

Next.js 14 (App Router) - إطار عمل React الأكثر تقدماً

React 18 - مكتبة بناء واجهات المستخدم

TypeScript - للحصول على كود آمن ومنظم

Styling & UI:

Tailwind CSS - لتصميم سريع ومرن

Framer Motion - للحركات والتأثيرات البصرية

Lucide React - أيقونات عصرية وأنيقة

Next Themes - إدارة الوضع الليلي

State Management:

Zustand - إدارة الحالة بشكل بسيط وفعال

LocalStorage - حفظ البيانات محلياً

API Integration:

Fake Store API - للحصول على بيانات المنتجات

? الهيكل المعماري للمشروع

text

المشروع مقسم إلى وحدات منطقية:

? app/ - صفحات التطبيق والتكوينات

? components/

├── layout/ - الهيدر والفوتر والثيم

├── products/ - مكونات عرض المنتجات

├── cart/ - سلة التسوق ومحتوياتها

├── filters/ - نظام التصفية والبحث

└── ui/ - مكونات الواجهة القابلة لإعادة الاستخدام

? lib/

├── store/ - إدارة الحالة (Zustand)

├── api/ - التكامل مع الـ API

└── utils.ts - دوال مساعدة

? types/ - تعريفات TypeScript