Netflix

• Netflix Frontend [https://netflix-divyanshu.vercel.app/browse]
• Netflix Backend https://netflix-divyanshu-server.vercel.app/api

Table of Content: 📑

• About the Project
• Features
• Technologies Used
• Approach
• Credits
• License
• Screenshots

About the Project: 📚

Give a brief description of the project. What was the reason or motivation behind the creation of the project?

Features

1. User Authentication
2. Content Catalog
3. Search Functionality
4. Video Playback
5. Multiple Profiles
6. Recommendation System: Recommnedation from the searched and played movies
7. Watchlist
8. Responsive Design

Technologies Used: ☕️ 🐍 ⚛️

List the tools and technologies used to build the project.

1. This Single Page Application is built using React JS Library.
2. For Styling I am using Tailwind CSS and Styled Component(styled-component)
3. The state managemment is handled using Redux Library.
4. Using react-router for Routing in the application.
5. Firebase Auth for Identity Access Management.
6. Used Firebase Firestore DB for saving the user information.
7. Used NextJS API and Node for API Routes
8. Used TMDB(Third Party API), for having the Movies and Videos data to make Netflix
9. Using Youtube Video Player(Iframe) to play videos in the Netflix Application.
10. Used react-error-boundary library for Error Handling using Error Boundary
11. Used Vercel to deploy the application and also CI/CD Pipeline.

Technologies to be worked

1. Handle the asynchronous features using @tanstack/react-query(Asynchronous State management).
2. Offline View Handling
3. Handle the Route based modal and work on navigation fixes.

Approach: 🚶

The design patterns implemented and code styles used.

Dynamic Rendering (Data/Config Driven UI)

Security

1. Implementing API for securing Keys: Handled the API Calling using the Next JS API as Backend, which lets us to hide the API Key from client side, not providing it to the client.
2. Using ENV Variables: Saving the crutial variables of the firebase configuration in the Environment Variables Passed from the Vercel.
3. Implemented the CSP policy in the base HTML: Other scripts and origins are blocked. Helping the CLient Side Scripting Error.

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    frame-src https://www.youtube.com/;
    img-src data: https: http:;
    script-src 'self' 'unsafe-inline' https://vercel.live/_next-live/feedback/feedback.js https://firebasestorage.googleapis.com https://va.vercel-scripts.com;
    style-src 'self' 'unsafe-inline'; 
    connect-src 'self' https://netflix-divyanshu-server.vercel.app http://localhost:3000 https://firestore.googleapis.com/ https://identitytoolkit.googleapis.com https://corsproxy.org https://securetoken.googleapis.com;" />

4. Implementing API to solve the CORS error: Handled the API Calling using the Next JS API as Backend for handling the CORS.
5. Implemented Firebase Auth: Handle the authentication of the Firebase Auth SDK, to enable the authenticated user to use the netflix application.

Performance

1. Optimised the application, by reducing the API calls by 300%. We handled TMDB API Requests from the Backend Side.
2. Implemented lazy-loading for images in the react applicaiton.

Error Handling

1. Using Error Boundary for handling the error in different components
2. Catching the Anonymous Page in the react-router with 404 page.

Internationalization(i18) Feature

Application is working in two different language, using the transalation config.

Credits: 📝

I built this project entirely by myself. I initially started working on it by taking the Namaste React course. Later, I added numerous features on my own to optimize the entire application for better performance and security.

License: ©️

Add any license agreement information. Example (MIT, Apache).

Screenshots: 📷

Screenshots of the Application

Home Page

Desktop

Mobile

MovieInfoModal Page

Desktop

Mobile

Search Page

Desktop

Mobile

Footer Component

Desktop

Mobile

MyNetflix Page (Mobile View Only)

Internationalization Feature

Availaibe in Hindi Language