دراسة حالة · ٠١

CineVerse Observatory

رحلة تبدأ بفحص موجه وتنتهي بعالم ذائقة قابل للاستكشاف والتنظيم والتصدير.

الدور
مصمم المنتج ومطور Full-Stack
السنة
2026
المنصة
تطبيق جوال & ويب

المشكلة

تحويل ذائقة موزعة بين أفلام وأغانٍ وقوائم منفصلة إلى صورة واحدة مفهومة.

اقرأ التفاصيل كاملة

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

الفكرة

يحوّل CineVerse فحص الذائقة الموجه إلى نظام اكتشاف آمن ودائم يربط التحليل والتوصيات واستكشاف الأفلام والموسيقى والمحتوى المحفوظ.

  • استراتيجية المنتج
  • تصميم UI/UX
  • React وTypeScript
  • NestJS API
  • Prisma وPostgreSQL
  • المصادقة والأمان
  • تكامل APIs خارجية
  • الاختبارات الآلية
  1. ٠١

    فحص الذائقة وDNA

    تنتج الأفلام المختارة وخمسة أسئلة موجهة ملفًا سينمائيًا بستة أبعاد يمنح التوصيات اللاحقة سياقًا واضحًا.

  2. ٠٢

    الاكتشاف وUniverse Map

    تجتمع توصيات الأفلام وكواكب الأنواع والعناوين المختارة وإشارات Orbitune ونيازك الأغاني داخل نموذج بصري مترابط.

  3. ٠٣

    المكتبة وTasteprint

    تعيد التقييمات والمفضلة وقوائم المشاهدة والتشغيل والمجموعات والتجميعات المختلطة استخدام المحتوى المحفوظ بدل انتهاء كل تفاعل في شاشة منفصلة.

  4. ٠٤

    حالة دائمة وآمنة

    تحمي حالة الخادم الموثقة والتحكم بالمراجعات وملفات HttpOnly ووسائط الـAPI الخلفية بيانات المستخدم ومفاتيح الخدمات عبر الجلسات.

جولة في المنتج

شاهد كيف تتحول الذائقة إلى عالم شخصي للأفلام والموسيقى.

جولة كاملة تشمل التهيئة، واختيار الذائقة، وCinematic DNA، والاكتشاف المخصص، وUniverse Map، وOrbitune، والمكتبة المحفوظة.

قرارات التصميم

ثلاثة اختيارات ربطت التحليل والاكتشاف والتنظيم داخل تجربة واحدة.

٠١

بناء الذائقة تدريجيًا قبل تقديم التوصيات

ليش؟يقلل مشكلة البداية الفارغة ويمنح التوصيات أساسًا يفهمه المستخدم.

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

٠٢

ربط الأفلام والموسيقى داخل نموذج بصري واحد

ليش؟يجعل العلاقة بين الوسائط قابلة للاستكشاف بدل عرضها كقوائم منفصلة.

صُممت Universe Map لتعرض كواكب الأنواع، وأفلام المستخدم، والأفلام المقترحة، ونيازك الأغاني، واقتراحات Orbitune داخل المشهد نفسه. يستطيع المستخدم التحكم في ظهور الأسماء والاقتراحات، وتعديل محتوى الخريطة، والتنقل مباشرة إلى الأدوات المرتبطة أو تصدير العالم كصورة، ما يجعل العلاقة بين الوسائط قابلة للاستكشاف بدل عرضها كقوائم منفصلة.

٠٣

إعادة استخدام المحتوى المحفوظ عبر مراحل المنتج

ليش؟يقلل تكرار الاختيار ويحوّل المكتبة إلى مركز عمل.

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

على الجوال

من فحص الذائقة إلى عالم CineVerse

  • فحص الذائقة على الجوال
    فحص الذائقة على الجوالأسئلة التفضيل الموجهة مهيأة لواجهة لمس صغيرة.
  • العالم على الجوال
    العالم على الجوالتحافظ الخريطة على الأسماء والتحكم والتنقل بإصبع واحد على الجوال.
  • المكتبة على الجوال
    المكتبة على الجوالتبقى الإحصاءات والتصفيات والمحتوى المحفوظ قابلة للاستخدام دون تجاوز أفقي للصفحة.

كيف انبنى

من الشاشة إلى قاعدة البيانات.

  1. React + TypeScriptواجهة تفاعلية مبنية بـVite
  2. عميل API مركزيدون اتصالات مباشرة بالخدمات أو تخزين متصفح
  3. NestJS APIالمصادقة والتحقق والوسائط وخدمات الحالة
  4. Prisma ORMعمليات علائقية ذرية
  5. PostgreSQL 16حفظ حالة المستخدم والمنتج

التكاملاتOMDbiTunesLast.fm

أدلة هندسية

  • ملفات HttpOnly الآمنة وتدوير Refresh Cookies تحل محل تخزين الرموز في المتصفح.
  • يرفض التحكم الذري بالمراجعات الجلسات القديمة قبل أن تستبدل حالة أحدث في PostgreSQL.
  • تمر طلبات OMDb وiTunes وLast.fm عبر وسائط خلفية متحقق منها دون كشف المفاتيح للواجهة.
  • يحمي رمز دخول متحقق منه في الخادم النسخة التفاعلية الخاصة ويمكن تغييره من إعدادات النشر.

التحقق

  • يغطي CI المتكامل البناء المقفل وتوليد Prisma والترحيلات واختبارات الـBackend وفحص الـAPI والمسارات المحمية.
  • يتحقق Playwright من إنشاء الحساب والحفظ واستعادة الحالة بعد الخروج والدخول والمسارات الديناميكية وتخطيطات الجوال.
  • ترفض فحوص الأمان كشف مفاتيح API والاتصالات المباشرة والتخزين في المتصفح وتغييرات الحالة غير الآمنة.

النتيجة

منتج مترابط يحوّل اختيارات المستخدم إلى ملف ذائقة قابل للاستكشاف والتنظيم والمشاركة.

اقرأ التفاصيل كاملة

النتيجة هي رحلة وظيفية متكاملة تبدأ بالتهيئة وإنشاء الحساب، ثم فحص الذائقة والتوصيات، وتمتد إلى البحث وتفاصيل الأفلام والخريطة والموسيقى والمكتبة والتصدير. أصبحت الأفلام والأغاني والتقييمات والمجموعات وقوائم التشغيل أجزاءً مترابطة داخل حالة واحدة محفوظة على الخادم، بدل أن تعمل كل ميزة بمعزل عن الأخرى. تدعم الواجهة العربية والإنجليزية واتجاهي RTL وLTR، وتتعامل مع حالات التحميل والخطأ والفراغ، كما تتكيف مساراتها الأساسية مع الهاتف وسطح المكتب. يحتوي المشروع على اختبارات للواجهة والحالة والـBackend وقاعدة البيانات ومسارات المتصفح، إضافة إلى إعداد Render يعرّف الواجهة والـAPI وقاعدة PostgreSQL، ما يجعل المستودع جاهزًا للتشغيل والنشر دون الادعاء بوجود نتائج استخدام أو أثر تجاري غير موثق. يثبت المشروع القدرة على الجمع بين تصميم تجربة مخصصة، ومنطق توصيات قابل للتفسير، وواجهة بصرية تفاعلية، وتطوير Full-stack يحافظ على الحسابات والبيانات والتكاملات ضمن منتج واحد.

القيود

  • النسخة محمية عمدًا، وتُشارك بيانات الدخول مباشرة مع المراجعين المصرح لهم.
  • تعتمد ميزات الاكتشاف الخارجية على توفر الخدمات وحدود طلباتها.
  • كان يجب الحفاظ على سلوك سطح المكتب أثناء تحسين تخطيطات الجوال وتفاعلات الخريطة بصورة مستقلة.