Spectrum Store

Spectrum Store تجربة تجارة إلكترونية كاملة مبنية بـ Next.js وTypeScript وshadcn/ui. بيانات المنتجات تأتي من Fake Store API؛ يضيف المشروع مصادقة JWT (عبر الكوكيز) وصلاحيات حسب الدور ووسيط طبقات (middleware) ولوحة إدارة لإدارة المنتجات—بما يتوافق مع التوجيه الآمن وإجراءات الخادم الموضحة في README المشروع.

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

• 🔒 المصادقة — تسجيل دخول وخروج بـ JWT مع التعامل مع الجلسة عبر الكوكيز
• 🌍 الواجهة — شبكة رئيسية، قائمة منتجات مع تصفية حسب الفئة، تفاصيل منتج (تقييم، سعر، إضافة للسلة)
• 🛒 السلة — درج لإضافة/إزالة العناصر
• 🔍 البحث — بحث عام عن المنتجات
• 🎨 المظهر — تبديل الوضع الفاتح / الداكن
• ✨ تجربة المستخدم — حالات تحميل وواجهة هيكلية (Skeleton)
• 📊 الإدارة — لوحة مع CRUD للمنتجات، ترقيم صفحات، بحث، ومخططات
• 🛡 الأمان — مصادقة، تفويض في طبقة البيانات، middleware، وإجراءات خادم مُتحقَّقة
• 🚀 SEO والأداء — وسوم ميتا، Next/Image، وإعداد يدعم خرائط الموقع

ملاحظات التنفيذ

• ميزات Next.js 14 مع إجراءات الخادم وAxios وتحقق Zod
• React Hook Form + Zod على العميل والخادم حيث تلامس النماذج الـ API
• Recharts لمخططات لوحة التحكم

• Next.js — App Router، إجراءات خادم، هيكل يهتم بـ SEO
• TypeScript — أنماط أنواع عبر الواجهة وتدفقات البيانات
• Tailwind CSS + shadcn/ui — واجهة قابلة للتركيب وإمكانية وصول
• React Hook Form + Zod — نماذج وتحقق بالمخطط
• Axios — عميل HTTP لطلبات Fake Store API
• Recharts — مخططات تحليلات الإدارة
• JWT — مصادقة بالرموز مع جلسات مبنية على الكوكيز

• ربط كتالوج + سلة بـ REST API عام مع إبقاء المصادقة والإدارة صريحة في الوسيط وكود الخادم
• تطبيق طبقات أمان: تحقق على الخادم، مسارات محمية، وفصل واضح بين المتجر وواجهة الإدارة
• واجهة متجاوبة ومتعددة المظهر مع أنماط تحميل وهيكل مناسبة لقوائم منتجات حقيقية