Select AI
دليل منسّق لأدوات ووكلاء الذكاء الاصطناعي مع بحث وتصفية محفوظة في الرابط، وواجهة بالعربية والإنجليزية، وتصميم أحادي اللون داكن/فاتح.
التقنيات المستخدمة :
1 / 2
نظرة عامة على المشروع
Select AI دليل منسّق يجمع أدوات ووكلاء الذكاء الاصطناعي. اختيار الأداة المناسبة من بين آلاف الخيارات مهمة مرهقة، فالأدلة المتوفرة تعاني من ضعف التصنيف وغياب التسلسل البصري، ما يضطر المستخدمين للمقارنة بين مصادر متفرقة.
تعالج المنصة هذه المشكلة بتصفح منظم وتصفية وبحث وواجهة أحادية اللون. الواجهة كلها متاحة بالعربية والإنجليزية مع تخطيط RTL صحيح، أما محتوى الدليل نفسه فبالإنجليزية.
بنيتُ المشروع على قالب next-shadcn-dashboard-starter من Kiranism (برخصة MIT)، الذي وفّر مكونات shadcn/ui والهيكل العام للواجهة ولوحة الأوامر kbar وتبديل السمات. وبدلاً من صفحات القالب التجريبية (لوحة التحليلات ولوحة Kanban وصفحة المنتجات)، بنيتُ الدليل وشريطاً جانبياً جديداً والسمة أحادية اللون والصفحة الرئيسية.
الميزات الرئيسية
- دليل أدوات ووكلاء الذكاء الاصطناعي: تصفح وتصفية وبحث في 30 أداة و25 وكيلاً
- الاستكشاف والمجموعات: صفحة استكشاف و6 مجموعات مختارة من الأدوات والوكلاء
- صفحات التصنيفات: 10 تصنيفات للأدوات و10 للوكلاء، مع أعداد تُحسب من البيانات
- عرض شبكي وجدولي: فرز حسب الاسم أو التاريخ أو التقييم أو الشعبية، مع تحديد عدد الصفوف وترقيم الصفحات
- لوحة أوامر: تنقل بلوحة المفاتيح عبر kbar
- تصفية قابلة للمشاركة: البحث والتصنيف ونوع التسعير وخيار المميزة فقط، وكلها محفوظة في الرابط
- تجربة ثنائية اللغة: العربية والإنجليزية مع تخطيط RTL تلقائي
- الوضع الداكن والفاتح: تبديل سمات واعٍ بإعدادات النظام
أبرز الجوانب التقنية
- Next.js 15 App Router: مسارات مسبوقة برمز اللغة عبر middleware من next-intl، مع تصفية من جانب العميل على بيانات مُعرّفة الأنواع
- تدويل ثنائي اللغة: 330 مفتاحاً للترجمة بتطابق كامل بين العربية والإنجليزية، مع معالجة RTL في أنحاء الواجهة
- نظام تصميم: سمة سوداء أحادية اللون مع تأثيرات زجاجية، موثّقة في رموز تصميم، ومبنية على مكونات shadcn/ui (Radix UI) التي وفّرها القالب
- حالة متزامنة مع الرابط: hook مخصص باسم useUrlState يحفظ الصفحة والتصفية والفرز ونمط العرض في معاملات الرابط
- مكونات دليل قابلة لإعادة الاستخدام: مجموعة واحدة من مكونات التصفية والفرز والشبكة والجدول وترقيم الصفحات تتشاركها صفحتا الأدوات والوكلاء
- الحركة: Framer Motion لشاشة التحميل والبطاقات وصفوف الجدول ومبدّل الشريط الجانبي، إضافة إلى عناوين متحركة بمكوّن BlurText
- المسارات القديمة: تحويلات دائمة (308) من روابط /ai-tools القديمة إلى /tools في كل اللغات
مساهماتي
- حوّلتُ قالب لوحة تحكم إلى دليل لأدوات الذكاء الاصطناعي، ووضعتُ مكان صفحاته التجريبية أقسام الأدوات والوكلاء والاستكشاف والمجموعات
- بنيتُ تجربة التصفح والتصفية والفرز والبحث في الأدوات والوكلاء
- نفّذتُ طبقة التدويل: رسائل بالعربية والإنجليزية وتوجيه لغوي وRTL
- أعدتُ بناء الشريط الجانبي مع مبدّل بين الأدوات والوكلاء وعدد العناصر في كل تصنيف
- أنشأتُ السمة السوداء أحادية اللون وتنسيق المكونات بالتأثيرات الزجاجية
- أضفتُ تحويلات دائمة لمسارات /ai-tools القديمة
التحديات والحلول
التحدي: جعل دليل الأدوات والوكلاء سهل التصفح بلغتين، دون أن يتحول إلى تمرير لا نهائي.
الحل: تصنيفات منظمة مع تصفية وفرز وبحث، وعرض شبكي أو جدولي مقسّم إلى صفحات، وhook مخصص يحفظ حالة التصفية في الرابط.
النتيجة: لكل عرض مُصفّى رابطه الخاص في اللغتين، فتبقى إعدادات التصفية محفوظة عبر التنقل وإعادة التحميل، ويمكن مشاركة العرض كما هو.
التقنيات المستخدمة
Frontend: Next.js 15، React 19، TypeScript 5.7، Tailwind CSS 4، Radix UI (shadcn/ui)، next-intl، Framer Motion
الحالة والبيانات: معاملات الرابط (hook مخصص)، بيانات ثابتة مكتوبة بـ TypeScript
القالب الأساسي: next-shadcn-dashboard-starter من Kiranism (برخصة MIT)
البنية التحتية: Vercel
الأدوات: kbar، ESLint، Prettier، pnpm
تحتاج شيئاً مشابهاً؟أخبرني عن مشروعك