بنية النظام والركائز الأساسية
تجمع منصة Car Market بين واجهة REST API مفصولة مبنية بواسطة Node.js وExpress وتطبيق صفحة واحدة فائق السرعة عبر React (Vite) لتوفير بحث في أقل من ثانية وتجربة بيع سلسة.
┌─────────────────────────────────────────────────────────────────────────────┐
│ Car Market Full-Stack Architecture │
└──────────────────────────────────────┬──────────────────────────────────────┘
│
┌───────────────────────────┼───────────────────────────┐
▼ ▼ ▼
🔍 محرك بحث ذكي 📸 مركز الوسائط وإدارة البائعين 🛡️ الأمان ومطابقة لائحة GDPR
• أشرطة تمرير مرتبطة بقاعدة البيانات • سحب وإفلات حتى 15 صورة • قائمة انتظار مراجعة الإعلانات
• قائمة متتالية من العلامة إلى الموديل • اختيار صورة الغلاف عبر SortableJS • معاينة وفحص شامل للمركبة
• منع صفحات النتائج الفارغة • تحويل تلقائي إلى WebP عبر Sharp • المادتان 17 و20 من لائحة GDPR
• عرض المخزون في الوقت الفعلي • تضمين فيديوهات YouTube وShorts • أمان متقدم عبر JWT وBcrypt
استكشاف فوري للمركبات
تصفية غير متزامنة وفورية متعددة المعايير دون الحاجة لإعادة تحميل الصفحة.
معالجة وتحسين مؤتمت
رفع متعدد للصور مع إمكانية إعادة الترتيب وضغط بصيغة WebP على الخادم.
الامتثال للائحة GDPR الأوروبية
تصدير بيانات الحساب بملف JSON بنقرة واحدة وحذف نهائي وشامل للملفات والصور من الخادم.
1. محرك بحث ذكي وفلاتر ديناميكية
يحسب محرك البحث حدوده الدنيا والقصوى تلقائيًا من قاعدة بيانات MySQL لتفادي عمليات البحث غير المجدية:
- أشرطة تمرير مزدوجة مرتبطة بالبيانات (rc-slider): تتكيف أشرطة تمرير السعر، والمسافة المقطوعة، وسنة الصنع تلقائيًا مع القيم الفعلية للمركبات المتوفرة.
- قوائم منسدلة متتالية (العلامة ➔ الموديل):
- منع النتائج الصفرية: تقتصر القائمة المنسدلة على عرض الماركات والموديلات التي تحتوي بالفعل على سيارات معتمدة في المخزون.
- شارات عدد الإعلانات الحية: مؤشر مباشر لعدد السيارات المتاحة بجانب كل خيار (مثال: Renault (4) ➔ Clio V (2)).
- فلاتر المواصفات التقنية: تصفية حسب فئة المركبة (سيارات، دراجات، تجارية)، ونوع الهيكل (سيدان، SUV، كوبيه)، ونوع الوقود، وناقل الحركة.
- ترتيب غير متزامن: ترتيب فوري حسب الأحدث، السعر تصاعديًا/تنازليًا، المسافة المقطوعة، أو سنة الصنع.
2. صفحة مركبة مفصلة وتجربة وسائط غنية
صفحة السيارة التفصيلية (/vehicule/:slugOrId) مصممة بهيكل من عمودين يهدف لزيادة الاستفسارات:
معرض وسائط تفاعلي
تضمين فيديوهات YouTube وShorts في الموقع الرئيسي لمعرض الصور، متبوعة بصور WebP فائقة الدقة.
جدول المواصفات التقنية
سعة المحرك (cm³)، القوة الحصانية (hp)، استهلاك الوقود، معيار الانبعاثات (Euro 1 إلى 7)، رقم الهيكل (VIN)، وعدد المقاعد.
اتصال مباشر بالبائع
تنسيق دولي لرقم الهاتف مع رابط اتصال مباشر tel: ونموذج مراسلة متصل مباشرة ببيانات السيارة.
3. نشر الإعلانات ومسار معالجة الصور
توفر المنصة للبائعين الأفراد والتجار أدوات متطورة لإدارة ونشر الإعلانات:
- تصنيف شامل للسيارات (120 علامة تجارية و1,890+ موديل): كتالوج متكامل متوفر أثناء إضافة الإعلان لضمان دقة التصنيف.
- التحقق المسبق من الملف الشخصي: حظر نشر الإعلان حتى استكمال البائع لبياناته الشخصية ورقم هاتفه الموثق.
- إعادة ترتيب الصور بالسحب والإفلات (SortableJS): رفع حتى 15 صورة في آن واحد وتحديد صورة الغلاف بالسحب والإفلات ⭐ صورة الغلاف.
- تحويل تلقائي إلى صيغة WebP (Sharp): تحويل فوري على الخادم إلى صيغة WebP بضغط 80% مع تصحيح اتجاه بيانات EXIF.
- لوحة تحكم «إعلاناتي»: إدارة متكاملة مع تبويبات الحالة (الكل، منشورة، قيد المراجعة)، وإمكانية التعديل والحذف الفوري.
4. ضبط الجودة ومراجعة الإدارة
لضمان صحة الإعلانات والحد من الاحتيال، تتضمن المنصة نظام مراجعة إداري:
قائمة انتظار المراجعة
تظل الإعلانات الجديدة في وضع الانتظار حتى يتم فحصها والموافقة عليها من قبل الإدارة.
واجهة فحص كاملة
شاشة مخصصة (/admin/vehicule/:id) تتيح تكبير الصور، ومراجعة رقم الهيكل VIN والتحقق من بيانات البائع.
إجراءات سريعة بنقرة واحدة
واجهات برمجية آمنة للموافقة والنشر، أو التعطيل، أو تعديل محتوى الإعلان.
5. أمان متقدم ومطابقة لمعايير GDPR
تلتزم منصة Car Market باللائحة الأوروبية العامة لحماية البيانات (GDPR EU 2016/679):
- مصادقة غير مرتبطة بالحالة (JWT): رموز وصول Bearer مع تشفير كلمات المرور بخوارزمية Bcrypt (8 خانات كحد أدنى مع أحرف وأرقام ورموز خاصة).
- حق نقل البيانات (المادة 20 من GDPR): تصدير فوري بنقرة واحدة لملف JSON منظم يحتوي على كامل بيانات الملف الشخصي وسجل الإعلانات.
- الحق في المحو / النسيان (المادة 17 من GDPR): حذف نهائي للحساب يترتب عليه محو البيانات بالكامل وحذف جميع ملفات الصور من قرص الخادم.
6. مصفوفة الميزات والخصائص التقنية
| الميزة |
التطبيق التقني |
ميزة تحسين محركات البحث والأداء |
| أشرطة تمرير تفاعلية |
rc-slider + Prisma DB Aggregations |
تفاعل عالٍ تصفية سريعة دون إعادة تحميل الصفحة |
| قوائم متتالية ذكية |
Prisma vehicles: { some: { isApproved: true } } |
محتوى ذو قيمة منع أرشفة صفحات البحث الخالية من النتائج |
| تحسين الصور |
Sharp Node.js library to WebP 80% |
Core Web Vitals تحميل سريع لعنصر العرض الأول (FCP) |
| تضمين الفيديو |
Responsive 16:9 YouTube iframe embeds |
مدة الجلسة زيادة متوسط وقت بقاء الزوار داخل الصفحة |
| عناوين URL سياقية |
slugify with unique ID suffixes |
أرشفة ممتازة روابط نظيفة غنية بالكلمات المفتاحية لفهارس Google |
| الأمان والخصوصية |
JWT Tokens + Bcrypt + GDPR Art. 17 & 20 |
مطابقة قانونية امتثال كامل للوائح التنظيمية الأوروبية |
استكشف المنصة المباشرة
جرّب فلاتر البحث الحية، واستعراض إعلانات السيارات، والتصميم المتجاوب.
زيارة المنصة الحية ↗
