Netflixai 프로젝트
Netflixai는 Netflix에서 영감을 얻은 응용 프로그램으로 Netflix의 모양과 느낌을 모방하여 추가 AI 중심 기능을 사용하여 유사한 사용자 인터페이스 및 사용자 경험을 제공합니다. 이 응용 프로그램은 간소화 된 인증을 위해 Firebase를 통합하고 영화 데이터 및 AI 구동 권장 사항에 대한 API를 활용합니다. Netflixai는 다국어 기능, 재사용 가능한 구성 요소를 지원하며 Redux를 통해 처리되는 상태 관리로 구성됩니다.
주요 기능
- 인증 : 사용자 인증을 쉽게하기 위해 FireBase SaaS를 사용합니다.
- 영화 데이터베이스 : 영화 데이터베이스 (TMDB) API에서 영화 데이터를 가져와 다양한 영화 정보에 액세스 할 수 있습니다.
- 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 구성 요소 : TMDB API에서 가져온 데이터를 사용하여 영화 목록을 동적으로로드합니다.
3. GPT 검색 및 제안
- GPT 페이지 구성 요소 : 사용자가 영화를 검색하고 AI 기반 권장 사항을 얻을 수있는 전용 영역. 이 페이지에는 다음이 포함됩니다.
- GPT 검색 바 : 사용자가 맞춤형 영화 제안을 얻기 위해 프롬프트를 입력 할 수 있습니다.
- 영화 제안 구성 요소 : GPT-3.5 Turbo API가 제안한 영화를 표시하며 사용자의 쿼리를 기반으로 TMDB API에서 데이터를 가져온다.
기술 및 도서관
- Firebase : 사용자 인증 용.
- TMDB API : 영화 데이터에 액세스합니다.
- GPT-3.5 Turbo API : 영화 권장 사항을 생성합니다.
- Redux : 조직화 된 상태 제어를 위해 다양한 슬라이스로 글로벌 응용 프로그램 상태를 관리합니다.
- 커스텀 후크와 반응 : 코드 재사용을 촉진하고 복잡한 논리를 단순화합니다.
- 다국어 지원 : 보다 액세스 가능하고 전 세계적으로 적응 가능한 사용자 인터페이스를 가능하게합니다.
예제 사용
다음은 Netflixai 기능 기능의 예입니다.
- 사용자 로그인/가입 : 사용자 로그인 또는 FireBase를 통해 가입합니다.
- 메인 영화 내용 : 일단 로그인하면 사용자는 메인 컨테이너와 함께 제공되며 다른 인기있는 영화 목록과 함께 주요 영화 및 제목을 보여줍니다.
- GPT 검색 : 사용자는 GPT 검색 바와 상호 작용하여 입력에 따라 영화 권장 사항을받을 수 있습니다.
- 개인화 된 제안 : AI 기반 제안은 영화 제안 구성 요소에 표시되어 사용자의 쿼리를 기반으로 TMDB API의 데이터를 가져옵니다.
Netflixai는 Netflix의 미학을 고급 AI 기능과 결합하여 강력한 영화 탐색 및 추천 경험을 제공합니다.
프로젝트 구성
Create-React-App [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 추가
