متجرا إلكترونيًا متكاملًا لبيع المنتجات و التصميم حسب الطلب

الصفحة الرئيسية - تحتوي على:

قسم البطل (Hero) بنصوص عربية كاملة

تصنيفات المنتجات

المنتجات المميزة

شهادات العملاء

خلاصة إنستقرام

صفحة المنتجات - تحتوي على:

قائمة المنتجات مع أسماء عربية

فلترة حسب التصنيف

ترتيب المنتجات

صفحة التواصل - تحتوي على:

نموذج تواصل كامل

معلومات الاتصال

ربط واتساب مباشر

خريطة الموقع

1. الإطار الأساسي (Frontend Framework):

React 18.3.1 - أحدث إصدار مع الـ Hooks

TypeScript - للكتابة الآمنة والتطوير المحترف

Vite - أداة البناء السريعة بدلاً من Create React App

2. التصميم والواجهة (UI/UX):

Tailwind CSS 3.4.11 - نظام التصميم الحديث

shadcn/ui - مكتبة مكونات جاهزة ومتقدمة

Radix UI - مكونات أساسية للـ accessibility

Lucide React - أيقونات حديثة ومتجاوبة

3. إدارة الحالة والبيانات:

React Query (TanStack) - لإدارة البيانات والـ API calls

React Hook Form - لإدارة النماذج بكفاءة

Zod - للتحقق من البيانات (validation)

4. التنقل والتوجيه:

React Router DOM 6.26.2 - للتنقل بين الصفحات

️ هيكل المشروع الحالي:

src/

├── components/

│ ├── ui/ (25+ مكون جاهز)

│ ├── home/ (مكونات الصفحة الرئيسية)

│ ├── Layout.tsx

│ ├── Navbar.tsx

│ ├── Footer.tsx

│ ├── WhatsAppFloat.tsx

│ └── PromoPopup.tsx

├── pages/ (8 صفحات رئيسية)

├── hooks/ (خطافات مخصصة)

└── lib/ (مكتبات مساعدة)

الميزات التقنية المتقدمة:

1. التخصيص العربي:

دعم كامل للغة العربية (RTL)

خطوط عربية متخصصة (Cairo + Amiri)

متغيرات CSS مخصصة للألوان الذهبية والبنية

2. الأداء والسرعة:

React SWC للتجميع السريع

Code splitting تلقائي

تحسين الصور والأصول

3. تجربة المستخدم:

مكونات تفاعلية متقدمة

رسوم متحركة مخصصة

تصميم متجاوب كاملاً

المميزات المُطبقة:

الصفحات الأساسية: (8 صفحات كاملة) واجهة عربية كاملة مع RTL تصميم متجاوب لجميع الأجهزة مكونات تفاعلية متقدمة نظام ألوان مخصص (ذهبي/بني) زر واتساب عائم مع رسوم متحركة نافذة عروض منبثقة تصنيفات المنتجات مع فلترة نماذج تواصل متطورة

الحالة الحالية للكود:

النقاط القوية:

كود منظم ومهيكل بشكل احترافي

استخدام أفضل الممارسات في React

مكونات قابلة لإعادة الاستخدام

نظام تصميم متسق

التحسينات المطلوبة:

إضافة backend للمنتجات الحقيقية

نظام إدارة المحتوى

نظام دفع إلكتروني

قاعدة بيانات للمنتجات