Netflixai Project
Netflixai-это приложение, вдохновленное Netflix, которое имитирует внешний вид Netflix, предоставляя аналогичный пользовательский интерфейс и пользовательский опыт с дополнительными функциями, управляемыми AI. Приложение интегрирует Firebase для оптимизированной аутентификации и использует API для данных фильмов и рекомендации с AI. Netflixai поддерживает многоязычную функциональность, многоразовые компоненты и структурировано с управлением состоянием, обработанным через Redux.
Ключевые функции
- Аутентификация: использует SaaS Firebase SaaS для легкой аутентификации пользователя.
- База данных фильмов: извлекает данные фильмов из API базы данных фильмов (TMDB) , позволяя доступ к широкому разнообразию информации о фильмах.
- Рекомендации по AI: Поскольку алгоритм рекомендаций Netflix является собственностью, Netflixai использует GPT-3.5 Turbo API для генерации персонализированных рекомендаций фильма на основе взаимодействия с пользователями.
- Многоязычная поддержка: предоставляет многоязычную функциональность для улучшения доступности для разнообразных аудиторий.
- Постоянные компоненты: построены из многоразовых компонентов для облегчения технического обслуживания и масштабируемости.
- Управление государством: управляется Redux с несколькими срезами для обработки различных состояний и взаимодействий по всему приложению.
- Пользовательские крючки: реализует пользовательские крючки для оптимизации повторного использования кода и оптимизации данных и обработки данных.
Основные API используются
- TMDB API: служит основной базой данных фильмов, позволяя Netflixai получить подробную информацию о различных фильмах, включая жанры, титульные названия и многое другое.
- GPT-3.5 Turbo API: используется для имитации системы рекомендаций фильма, поскольку собственный алгоритм рекомендаций Netflix недоступен. Это решение, управляемое AI, предоставляет адаптированные предложения фильмов, основанные на подсказках и взаимодействиях пользователей.
Структура проекта
1. Компоненты аутентификации
- Компонент входа/регистрации: один компонент, который обрабатывает как вход пользователей, так и функциональные возможности регистрации, интегрированные с Firebase для бесшовной аутентификации.
2. Основная область содержания
- Основной компонент: отображает основной контент фильма после входа пользователя, состоящий из:
- MainContainer: показывает видео в фоновом режиме с наложением названия видео.
- Компонент Movielist: динамически загружает список фильмов, используя данные, извлеченные из API TMDB.
3. Поиск и предложения GPT
- Компонент страницы GPT: выделенная область, где пользователи могут искать фильмы и получить рекомендации по AI. Эта страница включает в себя:
- Гланка поиска GPT: позволяет пользователям вводить подсказки, чтобы получить адаптированные предложения фильмов.
- Компонент предложений фильма: отображает фильмы, предложенные Turbo API GPT-3.5, с данными, полученными из API TMDB на основе запроса пользователя.
Технологии и библиотеки
- Firebase: для аутентификации пользователя.
- TMDB API: для доступа к данным фильма.
- GPT-3.5 Turbo API: для получения рекомендаций фильма.
- Redux: управлять состоянием глобального приложения с различными срезами для организованного государственного контроля.
- Реагируйте с помощью пользовательских крючков: для продвижения повторного использования кода и упрощения сложной логики.
- Многоязычная поддержка: позволяет более доступный и глобально адаптируемый пользовательский интерфейс.
Пример использования
Вот пример поток того, как функционирует Netflixai:
- Пользовательский вход/регистрация: пользовательский входит в систему или входит в систему через Firebase.
- Основной контент фильма: после входа в систему пользователю представлены MainContainer, показывающий избранные фильмы и название, а также список других популярных фильмов.
- Поиск GPT: пользователь может взаимодействовать с строкой поиска GPT, чтобы получить рекомендации фильма на основе их ввода.
- Персонализированные предложения: предложения на двигателе AI отображаются в компоненте предложений фильма, извлекая данные из API TMDB на основе запроса пользователя.
Netflixai объединяет эстетику Netflix с расширенными функциями искусственного интеллекта, чтобы обеспечить надежный опыт просмотра и рекомендаций в фильмах.
Проект-конфигурации
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 в проект для аутентификации и пожарного хостинга для развертывания
