https://github.com/aadeshkulkarni/netflix-clone

https://github.com/aadeshkulkarni/netflix-clone

Last synced: 14 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/aadeshkulkarni/netflix-clone
• Owner: aadeshkulkarni
• Created: 2023-11-02T13:33:39.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-11-07T06:15:33.000Z (about 1 year ago)
• Last Synced: 2024-05-30T02:13:07.639Z (5 months ago)
• Language: JavaScript
• Size: 426 KB
• Stars: 0
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CinemaCentral - A Netflix clone with GPT powered Search engine

To view the application, click here → 🔥 [Cinema Central](https://www.google.com "Cinema Central") 🔥

## 💻 Functional: 

- Modules (Pages) 

    - Module 1 - Authentication

        - Feature 1 - Sign In

        - Feature 2 - Sign up

    - Module 2 - Browse

        - Feature 1 - Movie Component

            - Movie Trailer

            - Movie Details

        - Feature 2 - Secondary Component

            - Movie Lists

                - Now Playing Movies

                - Popular Movies

                - Trending Movies

                - Top-rated Movies

                - Upcoming Movies

    - Module 3 - Movie Details

    - Module 4 - Movie Watch

    - Module 5 - GPT powered Search

        - Feature 1 - Search

        - Feature 2 - Recommendation

## 🎯 Non-functional

- Desktop-first

- Responsive

- Authentication

- Offline Support

- Unit & Integration Testing

- Localization support for Search page

- Versioning (github)

- Performance 

## 👨🏻‍💻Tech choices

- ReactJS (scaffolded with CRA)

- TailwindCSS

- Single responsibility via Custom hooks

- State management using React-Redux

- Firebase for authentication backend

- Routing using React-router-dom

- Testing using Jest with React-testing-library

## 💡Development sequence

- Create React App

- Configured TailwindCSS 

- Header

- Routing of App

- Login Form

- Sign up Form

- Form Validation

- useRef Hook

- Firebase Setup

- Deploying our app to production

- Create SignUp User Account

- Implement Sign In user Api

- Created Redux Store with userSlice

- Implemented Sign out 

- Update Profile

- BugFix: Sign up user displayName and profile picture update

- BugFix: if the user is not logged in Redirect /browse to Login Page and vice-versa

- Unsubscibed to the onAuthStateChanged callback

- Add hardcoded values to the constants file

- Regiter TMDB API & create an app & get access token

- Get Data from TMDB now playing movies list API

- Custom Hook for Now Playing Movies

- Create movieSlice

- Update Store with movies Data

- Planning for MainContauiner & secondary container

- Fetch Data for Trailer Video

- Update Store with Trailer Video Data

- Embedded the Yotube video and make it autoplay and mute

- Tailwind Classes to make Main Container look awesome

- Build Secondary Component

- Build Movie List

- build Movie Card

- TMDB Image CDN URL

- Made the Browsre page amazing with Tailwind CSS

- usePopularMovies Custom hook

- GPT Search Page

- GPT Search Bar

- (BONUS) Multi-language Feature in our App)

- Get Open AI Api Key 

- Gpt Search API Call

- fetched gptMoviesSuggestions from TMDB

- created gptSlice added data

- Resused Movie List component to make movie suggestion container

- Memoization

- Added .env file

- Adding .env file to gitignore

- Made our Site Responsive

## 📽️ Project Setup

- Before starting the project please add .env file and add the following ENVs

    - REACT_APP_OPENAI_KEY

    - REACT_APP_TMDB_KEY

    - REACT_APP_FIREBASE_APIKEY

    - REACT_APP_FIREBASE_AUTHDOMAIN

    - REACT_APP_FIREBASE_PROJECTID

    - REACT_APP_FIREBASE_STORAGEBUCKET

    - REACT_APP_FIREBASE_MESSAGINGSENDERID

    - REACT_APP_FIREBASE_APPID

    - REACT_APP_FIREBASE_MEASUREMENTID