🎮 متجر الألعاب - Alnafar Store

متجر ألعاب إلكتروني متكامل مع ذكاء اصطناعي للتعرف على الألعاب باستخدام Google Gemini Vision API، لوحة تحكم شاملة. مبني بـ Express.js و React و Tailwind CSS، مع دعم Turso و Cloudinary و Render للنشر المجاني.

🔗 الروابط

	الرابط
الموقع المباشر	https://alnafar-store.vercel.app/

📋 جدول المحتويات

🚀 البدء السريع

تجربة الموقع مباشرة

المتجر: https://alnafar-store.vercel.app/

✨ المميزات

🤖 التعرف الذكي على الألعاب

التقنية: Google Gemini Vision API
الدقة: 95%+ من التعرفات الناجحة
التكلفة: مجاني (15 طلب/دقيقة)
اللغات: عربية وإنجليزية

🎨 تصميم عصري

بطاقات ألعاب مع صور عالية الجودة وتدرجات لونية حسب النوع
واجهة متجاوبة وخطوط عربية (Cairo, Tajawal, Almarai)

🔍 فلترة وبحث

بحث وفئات (PS4, PS5, PC)، نوع اللعبة، السلسلة، شاشة منقسمة، ترتيب أبجدي

📊 لوحة تحكم

إدارة الألعاب (إضافة/تعديل/حذف)، تعرف تلقائي من الصور، تصنيف ذكي (Wikipedia)، إدارة الفئات والطلبات والإحصائيات

🎨 التصميم والواجهة

النوع	اللون
رعب	🔴 أحمر
أكشن	🟠 برتقالي
مغامرة	🟡 كهرماني
رياضة	🟢 أخضر
سباقات	🔵 سماوي
ألغاز	🟣 وردي فاتح
منصات	🌸 وردي
عالم مفتوح	🌊 تركواز
تخفي	⚫ رمادي
قتال	🟣 بنفسجي
استراتيجية	🔵 أزرق
تصويب	🟦 نيلي
RPG	🟨 أصفر
أطفال	🟩 أخضر زمردي

💻 التطوير

هيكل المشروع

Alnafar.store/
├── backend/
│   ├── server.js           # خادم Express
│   ├── db-adapter.js       # SQLite محلي / Turso سحابي
│   ├── cloudinary-storage  # رفع الصور (محلي / Cloudinary)
│   └── data/               # قاعدة بيانات محلية + uploads
├── frontend/
│   └── src/
│       ├── App.jsx         # الواجهة الرئيسية
│       ├── Admin.jsx       # لوحة التحكم
│       ├── GamesTabNew.jsx # إدارة الألعاب
│       └── styles.css
├── .env
├── render.yaml             # إعداد Render
├── Procfile
└── package.json

التقنيات

الطبقة	التقنية
Backend	Node.js, Express.js
قاعدة البيانات	SQLite (تطوير) / Turso (إنتاج)
الصور	تخزين محلي (تطوير) / Cloudinary (إنتاج)
Frontend	React, Vite, Tailwind CSS
AI	Google Gemini Vision API
مصادقة	JWT
استضافة	Render