مقارنة أدوات الذكاء الاصطناعي للبرمجة

البرومبت المستعمل للبناء

نسخ البرومبت

أبيك تبني لي مشروع Web شخصي اسمه:

Personal Game Backlog Archive

فكرة المشروع:
موقع شخصي لإدارة الـ Game Backlog حقي. مو مشروع عام حالياً، لكن أبغيه يكون مرتب ونظيف وقابل إنه يصير Open Source مستقبلاً.

الهدف:
أدخل الموقع وأشوف الأجهزة مرتبة من القديم إلى الجديد. لما أضغط على أي جهاز، تطلع لي الألعاب الخاصة فيه. أقدر أضيف لعبة يدوياً أو أستخدم إضافة ذكية: أكتب اسم اللعبة، والنظام يحاول يعرف اللعبة والمنصات المناسبة لها، ثم يقترح وين أحطها.

مهم:
المشروع شخصي، لذلك لا أحتاج Login ولا حسابات مستخدمين ولا نظام اجتماعي.

التقنيات المطلوبة:
- Next.js
- TypeScript
- Tailwind CSS
- Local storage using IndexedDB
- اجعل الكود مرتب وقابل للتطوير
- لا تستخدم Backend معقد في البداية
- جهّز البنية بحيث أقدر مستقبلاً أنقل التخزين إلى SQLite أو Supabase

الستايل العام:
أبي تصميم مميز وغير مكرر.
الثيم:
- Dark mode
- Retro-futuristic
- Console Museum / Game Archive Room
- الأجهزة تكون كأنها كروت على رف أو متحف ألعاب
- ترتيب زمني من القديم إلى الجديد
- واجهة نظيفة، عربية RTL، وخط واضح
- لا تستخدم صور رسمية للأجهزة حتى نتجنب مشاكل الحقوق
- استخدم silhouettes أو icons بسيطة أو أشكال مجردة

الصفحات المطلوبة:

1. الصفحة الرئيسية /
تعرض الأجهزة مرتبة من القديم إلى الجديد.
كل جهاز يكون Card فيه:
- اسم الجهاز
- الجيل أو السنة
- عدد الألعاب
- عدد ألعاب Backlog
- عدد ألعاب Playing
- عدد ألعاب Completed
- آخر لعبة تمت إضافتها
- Progress صغير يوضح نسبة الإنجاز

الأجهزة الافتراضية:
- NES
- SNES
- Nintendo 64
- GameCube
- Wii
- Wii U
- Nintendo Switch
- Game Boy
- Game Boy Advance
- Nintendo DS
- Nintendo 3DS
- PlayStation 1
- PlayStation 2
- PlayStation 3
- PlayStation 4
- PlayStation 5
- PSP
- PS Vita
- Xbox
- Xbox 360
- Xbox One
- Xbox Series X/S
- Sega Genesis
- Sega Saturn
- Dreamcast
- PC

2. صفحة الجهاز /platform/[slug]
تعرض ألعاب الجهاز المختار.
في الأعلى:
- اسم الجهاز
- عدد الألعاب
- إحصائيات سريعة
- زر Add Game
- زر Smart Add

الفلاتر:
- الكل
- Wishlist
- Backlog
- Playing
- Completed
- Dropped
- Paused

كل لعبة تظهر كـ Game Card فيه:
- اسم اللعبة
- صورة الغلاف إذا موجودة
- الحالة
- التقييم الشخصي
- Tags
- ملاحظات مختصرة
- هل النسخة Physical أو Digital

3. صفحة اللعبة /game/[id]
تعرض تفاصيل اللعبة:
- العنوان
- الجهاز
- الحالة
- سنة الإصدار
- الغلاف
- التقييم الشخصي من 10
- هل أملكها؟
- Physical / Digital / Emulated / Subscription
- ملاحظاتي
- تاريخ الإضافة
- تاريخ البداية
- تاريخ الإنهاء
- Tags
- زر تعديل
- زر حذف

4. Add Game Modal
نافذة إضافة لعبة يدوية.
الحقول:
- Game title
- Platform
- Status
- Cover URL اختياري
- Release year اختياري
- Ownership type
- Rating اختياري
- Notes
- Tags

5. Smart Add Modal
نافذة ذكية.
المستخدم يكتب اسم اللعبة فقط.
مثال:
"Chrono Trigger"

المطلوب من النظام:
- يبحث أو يحاكي البحث كبنية أولية
- يعرض نتائج مقترحة
- يعرض المنصات المحتملة
- المستخدم يختار الجهاز قبل الحفظ
- لا تحفظ اللعبة مباشرة بدون تأكيد

ملاحظة مهمة:
في النسخة الأولى، خل Smart Add يعمل Mock Data محلياً بدون API حقيقي، لكن صمم الكود بحيث أقدر لاحقاً أربطه مع RAWG API أو IGDB API.

مثال Smart Add:
Input:
metal gear solid 3

Result:
Metal Gear Solid 3: Snake Eater
Platforms:
- PlayStation 2
- PlayStation 3
- Xbox 360
- PlayStation Vita
- Nintendo 3DS

ثم يختار المستخدم المنصة ويحفظها.

6. صفحة Statistics /stats
تعرض:
- إجمالي الألعاب
- عدد ألعاب Backlog
- عدد ألعاب Completed
- عدد ألعاب Playing
- أكثر جهاز عليه ألعاب
- أكثر Status مستخدم
- Progress عام
- قائمة بأحدث الألعاب المضافة

7. ميزة Pick Next Game
زر اسمه:
"شنو ألعب؟"

الفكرة:
يقترح لعبة عشوائية من ألعاب Backlog أو Paused.
ويكون فيه خيارات مزاج:
- لعبة قصيرة
- رعب
- JRPG
- أكشن
- Retro
- قصة قوية
- شيء خفيف

في النسخة الأولى ممكن يكون الاقتراح بسيط بناءً على Tags و Status.

Data Model:

Platform:
- id
- name
- slug
- generation
- releaseYear
- sortOrder
- iconType
- themeClass

Game:
- id
- title
- slug
- platformId
- status
- coverUrl
- releaseYear
- ownershipType
- rating
- notes
- tags
- addedAt
- startedAt
- completedAt
- externalIds optional

Status values:
- wishlist
- backlog
- playing
- completed
- dropped
- paused

Ownership values:
- physical
- digital
- emulated
- subscription
- borrowed
- unknown

مطلوب:
- واجهة عربية RTL بشكل أساسي
- استخدم أسماء عربية للـ UI
- الكود الداخلي ممكن يكون إنجليزي
- اجعل التصميم Responsive للموبايل والديسكتوب
- استخدم Components مرتبة:
  - PlatformCard
  - GameCard
  - AddGameModal
  - SmartAddModal
  - StatusBadge
  - StatsCard
  - FilterTabs
  - PickNextGameModal

تجربة الاستخدام:
- أول ما أفتح الموقع أشوف الأجهزة
- أضغط على PS2 مثلاً
- أشوف ألعابي على PS2
- أضغط Add Game وأضيف لعبة
- أو أضغط Smart Add وأكتب اسم اللعبة
- النظام يقترح المنصات
- أختار المنصة
- أحفظ
- اللعبة تظهر داخل الجهاز الصحيح

مهم جداً:
- لا تبني مشروع ضخم ومعقد
- أبغيه MVP نظيف وقابل للتطوير
- اهتم بالتصميم والـ UX
- لا تستخدم أي مكتبات ثقيلة بدون سبب
- أضف Seed Data بسيط عشان أشوف شكل الموقع فوراً
- أضف Export JSON و Import JSON للنسخ الاحتياطي
- خزن البيانات محلياً باستخدام IndexedDB
- اكتب README واضح يشرح التشغيل

الأوامر المطلوبة:
- npm install
- npm run dev
- npm run build

المخرجات المطلوبة:
- مشروع كامل جاهز للتشغيل
- كود نظيف
- تصميم Dark Mode
- IndexedDB working
- Seed data
- README