PERFUME TALISMAN — متجر عطور فاخر (Full Stack)
تفاصيل العمل
منصة تجارة إلكترونية متكاملة للعطور الفاخرة موجهة للسوق الخليجي، مبنية بواجهة React 19 و Vite مع باك إند PHP ولوحة تحكم لإدارة المتجر بالكامل. المشروع يقدم تجربة شراء كاملة تبدأ من تصفح المنتجات وحتى إتمام الطلب والدفع، مع تصميم RTL احترافي مخصص بالكامل وتجربة مستخدم سلسة وسريعة وموجهة للبيع. تجربة المستخدم تبدأ رحلة المستخدم من صفحة رئيسية بتصميم كامل الشاشة يعكس هوية العلامة التجارية، ثم الانتقال إلى الأقسام المختلفة مثل العطور الفردية والباقات، وبعدها استعراض المنتجات المرتبطة مباشرة بالباك إند. عند اختيار أي منتج يتم فتح نافذة عرض سريع بدون مغادرة الصفحة، مع إمكانية إضافة المنتج إلى السلة مباشرة، ثم الانتقال إلى صفحة الدفع التي تحتوي على نموذج بيانات التوصيل مع تحقق من المدخلات قبل إرسال الطلب إلى الباك إند PHP. لوحة التحكم الإدارية تم بناء لوحة تحكم كاملة مخصصة لإدارة المتجر تعمل عبر نظام PHP في الباك إند، وتتيح إدارة جميع عناصر النظام بشكل مباشر. تشمل: إدارة المنتجات (إضافة، تعديل، حذف) إدارة الباقات رفع الصور وإدارتها عبر FormData إدارة الطلبات وتحديث حالاتها عرض إحصائيات مثل عدد الطلبات والمبيعات نظام تسجيل دخول وحماية الجلسات لوحة التحكم تم تصميمها كأداة تشغيل حقيقية لإدارة متجر فعلي وليس مجرد عرض تجريبي. الأداء والتحسين تم التركيز على الأداء كعنصر أساسي في المشروع لضمان تجربة استخدام سريعة حتى مع ضعف الإنترنت: تقسيم الكود لتحسين سرعة التحميل تحميل الصور بشكل تدريجي مع Skeleton Loader نظام كاش باستخدام TanStack Query إعادة جلب البيانات في الخلفية بدون التأثير على تجربة المستخدم ضغط الملفات وتحسين الصور في نسخة الإنتاج استخدام WebP لتقليل حجم الصور دعم اللغة العربية (RTL) المشروع مبني بالكامل بنظام RTL من البداية وليس تحويل لاحق، مما يوفر تجربة طبيعية للمستخدم العربي. تم الاعتماد على: تصميم اتجاه من اليمين لليسار بشكل كامل تخطيط مرن مناسب للغة العربية ألوان وهوية بصرية متوافقة مع السوق الخليجي واجهة واضحة وسهلة الاستخدام البنية التقنية واجهة المستخدم: React 19 Vite React Router إدارة الحالة: Zustand TanStack Query الباك إند: PHP (API + إدارة بيانات + لوحة التحكم) التصميم: Tailwind CSS مع نظام تصميم مخصص ألوان الهوية: كحلي فاخر وذهبي الأدوات: Framer Motion للحركات Axios للتواصل مع API خطوط عربية Almarai و Tajawal التحديات والحلول إدارة السلة (منتجات وباقات): تم توحيد التعامل مع أنواع مختلفة من العناصر داخل السلة باستخدام نظام تعريف ذكي يمنع التكرار ويسهل الإرسال للباك إند PHP. نافذة عرض المنتج السريع: تم حل مشاكل الطبقات والتمرير باستخدام React Portal لضمان عرض النافذة فوق جميع العناصر بدون تعارض. تصميم RTL الحقيقي: تم بناء الواجهة بالكامل بنظام RTL أصلي بدون الاعتماد على تحويل CSS، مما جعل التجربة طبيعية بالكامل للمستخدم العربي. لوحة التحكم باستخدام PHP: تم بناء نظام إدارة كامل باستخدام PHP بدون الاعتماد على أنظمة جاهزة، مما يعطي تحكم كامل في البيانات والطلبات. الخلاصة مشروع PERFUME TALISMAN هو نظام تجارة إلكترونية متكامل يجمع بين تصميم فاخر وتجربة مستخدم احترافية، مع أداء عالي وبنية تقنية قابلة للتوسع، ولوحة تحكم حقيقية مبنية بـ PHP لإدارة متجر فعلي وليس مجرد واجهة عرض.
بطاقة العمل
طلب عمل مماثل
