تطبيق ويب متقدم لمتجر إلكتروني احترافي تم تطويره باستخدام React وTailwind CSS مع تكامل كامل مع FakeStore API.
المميزات الرئيسية:
- تكامل كامل مع API خارجي (FakeStore API) لعرض منتجات حقيقية
- نظام سلة تسوق ديناميكي بـ Context API
- صفحة تفاصيل لكل منتج مع إمكانية تغيير الكمية
- فلترة المنتجات حسب الفئات (Electronics, Jewelry, Men's/Women's Clothing)
- حفظ تلقائي للسلة باستخدام LocalStorage
- نظام Routing متقدم باستخدام React Router v6
- حالات Loading و Error Handling احترافية
- تصميم متجاوب بالكامل (Responsive) على جميع الأجهزة
- واجهة مستخدم عصرية باستخدام Teal/Orange Color Scheme
- Animations و Hover Effects احترافية
التقنيات المستخدمة:
- React.js 18 - لبناء واجهة المستخدم التفاعلية
- React Router v6 - للتنقل بين الصفحات
- Context API - لإدارة الحالة العامة (Global State)
- Axios - للتعامل مع الـ API
- Tailwind CSS - للتصميم العصري والمتجاوب
- React Icons - للأيقونات
- LocalStorage - لحفظ بيانات السلة
- Vite - كـ Build Tool سريع
- FakeStore API - مصدر البيانات
الصفحات المتوفرة:
1. الصفحة الرئيسية (Hero Landing Page)
2. صفحة المنتجات مع الفلترة
3. صفحة تفاصيل المنتج
4. صفحة سلة التسوق
5. Navbar ديناميكي مع عداد المنتجات
تصميم متميز:
- Color Scheme: Teal & Cyan مع Orange Accents
- Typography: Fonts واضحة وسهلة القراءة
- Spacing: مسافات منظمة ومريحة للعين
- Cards: Shadow effects و Hover animations
- Buttons: Gradient backgrounds مع Transitions
المشروع يوضح قدرتي على:
- التعامل مع APIs الخارجية
- إدارة State Management المعقدة
- بناء تطبيقات متعددة الصفحات (Multi-page Applications)
- كتابة كود نظيف وقابل للصيانة
- تطبيق أفضل الممارسات في React
- تصميم واجهات مستخدم احترافية
