E-commerce تصميم عصري و متجاوب.

المشروع عبارة عن تطبيق ويب متكامل للتجارة الإلكترونية تم بناؤه باستخدام مكتبة React، يعتمد التطبيق على جلب البيانات من مصدر خارجي (API) ويوفر تجربة مستخدم سلسة ومتجاوبة (Responsive Design) تتماشى مع التصميمات المرفقة.

أهم الميزات والصفحات

1. الهيكل والصفحات الأساسية:

يتكون التطبيق من 5 صفحات رئيسية لضمان تجربة تسوق كاملة:

الصفحة الرئيسية (Home): تعرض العروض الترويجية والمنتجات المميزة.

صفحة المنتجات (Products): تعرض قائمة شاملة بالمنتجات المتاحة.

تفاصيل المنتج (Product-Details): صفحة مخصصة لعرض معلومات دقيقة حول منتج معين.

سلة التسوق (Cart): لإدارة المشتريات قبل إتمام العملية.

اتصل بنا (Contact): نموذج للتواصل مع إدارة الموقع.

2. عرض المنتجات:

في صفحة المنتجات: يظهر (الاسم، الصورة، السعر، القسم).

في صفحة التفاصيل: يتم عرض بيانات إضافية تشمل (نسبة الخصم، معلومات الشحن، وحالة التوفر "In Stock").

3. نظام سلة التسوق الذكي (Cart Logic):

تم بناء نظام سلة متكامل يتضمن:

إضافة المنتج بنقرة واحدة (Add to Cart).

التحكم في الكمية (زيادة ونقصان) داخل السلة.

حساب إجمالي السعر (Total Price) لجميع المنتجات تلقائياً.

إمكانية حذف منتج معين أو إفراغ السلة بالكامل.

عداد السلة: تحديث فوري لعدد المنتجات في شريط التنقل (Navbar).

4.التصميم والواجهة:

التجاوب (Responsiveness): التصميم متوافق تماماً مع جميع الشاشات (موبايل، تابلت، ديسكتوب).

الوضع الليلي والنهاري (Dark/Light Mode): دعم كامل لنظام الألوان المتغير باستخدام Tailwind Elements.

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

Framework: React.js

Styling: Tailwind CSS & Tailwind Elements.

State Management: React Hooks (useState, useEffect).

Navigation: React Router Dom.