مشروع Netflixai
Netflixai هو تطبيق مستوحى من Netflix يحاكي مظهر Netflix ومظهره ، مما يوفر واجهة مستخدم مماثلة وتجربة مستخدم مع ميزات إضافية يحركها AI. يدمج التطبيق Firebase للمصادقة المبسطة ويعزز واجهات برمجة التطبيقات لبيانات الأفلام والتوصيات التي تعمل بالنيابة. يدعم Netflixai الوظائف متعددة اللغات ، والمكونات القابلة لإعادة الاستخدام ، ويتم تنظيمها مع إدارة الدولة التي يتم التعامل معها من خلال Redux.
الميزات الرئيسية
- المصادقة: يستخدم Firebase SaaS لسهولة مصادقة المستخدم.
- قاعدة بيانات الأفلام: تجلب بيانات الفيلم من قاعدة بيانات الأفلام (TMDB) ، مما يتيح الوصول إلى مجموعة واسعة من معلومات الفيلم.
- توصيات من الذكاء الاصطناعي: نظرًا لأن خوارزمية التوصية الخاصة بـ Netflix هي ملكية ، فإن Netflixai تستخدم واجهة برمجة تطبيقات GPT-3.5 Turbo لإنشاء توصيات فيلم مخصصة بناءً على تفاعلات المستخدم.
- الدعم متعدد اللغات: يوفر وظائف متعددة اللغات لتحسين إمكانية الوصول إلى الجماهير المتنوعة.
- المكونات القابلة لإعادة الاستخدام: تم تصميمها بمكونات قابلة لإعادة الاستخدام لتسهيل الصيانة وقابلية التوسع.
- إدارة الدولة: تديرها Redux مع شرائح متعددة للتعامل مع حالات وتفاعلات مختلفة عبر التطبيق.
- السنانير المخصصة: تنفذ خطافات مخصصة لتحسين إعادة استخدام الكود وتبسيط البيانات الجلب والمعالجة.
واجهات برمجة التطبيقات الرئيسية المستخدمة
- TMDB API: بمثابة قاعدة بيانات الأفلام الأساسية ، مما يسمح لـ Netflixai بإحضار معلومات مفصلة حول الأفلام المختلفة ، بما في ذلك الأنواع والعناوين المتجهة والمزيد.
- GPT-3.5 Turbo API: تستخدم لمحاكاة نظام توصية الفيلم ، لأن خوارزمية التوصية الخاصة بـ Netflix غير متوفرة. يوفر هذا الحل التي يحركها AI اقتراحات الفيلم المصممة بناءً على مطالبات المستخدم والتفاعلات.
هيكل المشروع
1. مكونات المصادقة
- مكون تسجيل الدخول/التسجيل: مكون واحد يتولى وظائف تسجيل الدخول والاشتراك ، مدمج مع Firebase للمصادقة السلس.
2. مجال المحتوى الرئيسي
- المكون الأساسي: يعرض محتوى الفيلم الرئيسي بعد تسجيل الدخول إلى المستخدم ، يتكون من:
- MainContainer: يعرض فيديو فيلم في الخلفية مع عنوان الفيديو المتراكب.
- مكون Movielist: يعمل بشكل ديناميكي على تحميل قائمة من الأفلام باستخدام البيانات التي تم جلبها من API TMDB.
3. بحث GPT والاقتراحات
- مكون صفحة GPT: منطقة مخصصة حيث يمكن للمستخدمين البحث عن الأفلام والحصول على توصيات تعمل بالنيابة. تتضمن هذه الصفحة:
- GPT Search Bar: يسمح للمستخدمين بكتابة مطالبات للحصول على اقتراحات للأفلام المصممة.
- مكون اقتراحات الفيلم: يعرض الأفلام التي اقترحتها GPT-3.5 Turbo API ، مع البيانات التي تم جلبها من API TMDB استنادًا إلى استعلام المستخدم.
التقنيات والمكتبات
- Firebase: لمصادقة المستخدم.
- TMDB API: للوصول إلى بيانات الفيلم.
- GPT-3.5 Turbo API: لإنشاء توصيات الفيلم.
- Redux: لإدارة حالة التطبيق العالمية مع شرائح مختلفة للتحكم في الدولة المنظمة.
- رد فعل مع السنانير المخصصة: لتعزيز إعادة استخدام الكود وتبسيط المنطق المعقد.
- الدعم متعدد اللغات: يتيح واجهة مستخدم أكثر سهولة وقابلة للتكيف عالميًا.
مثال الاستخدام
فيما يلي مثال على تدفق كيفية عمل Netflixai:
- تسجيل الدخول/التسجيل: يقوم المستخدم بتسجيل الدخول أو التسجيل عبر FireBase.
- محتوى الفيلم الرئيسي: بمجرد تسجيل الدخول ، يتم تقديم المستخدم مع MainContainer ، ويعرض فيلمًا وعنوانًا مميزًا ، إلى جانب قائمة بالأفلام الشهيرة الأخرى.
- بحث GPT: يمكن للمستخدم التفاعل مع شريط بحث GPT لتلقي توصيات الفيلم بناءً على مدخلاته.
- اقتراحات مخصصة: يتم عرض الاقتراحات التي تعمل بالطاقة الذاتي في مكون اقتراحات الفيلم ، مما يؤدي إلى سحب البيانات من API TMDB استنادًا إلى استعلام المستخدم.
يجمع Netflixai بين جمالية Netflix وميزات AI المتقدمة لتوفير تجربة قوية لتصفح الأفلام والتوصية.
عمليات تمييز المشروع
Create-React-App [Scaffold of React App]
تكوين tailwindcss
npm install -D tailwindcss
npx tailwindcss init
سيتم إنشاء ملف جديد كـ tailwind.config.css -> فقط أضف الرمز التالي في هذا الملف
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}", // js,tsx,tx,tsx is nothing but the language support
],
theme: {
extend: {},
},
plugins: [],
}
أضف هذه إلى index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
أضف Firebase إلى المشروع للمصادقة واستضافة الحرائق للنشر
