- Netflix Frontend [https://netflix-divyanshu.vercel.app/browse]
- Netflix Backend https://netflix-divyanshu-server.vercel.app/api
Give a brief description of the project. What was the reason or motivation behind the creation of the project?
- User Authentication
- Content Catalog
- Search Functionality
- Video Playback
- Multiple Profiles
- Recommendation System: Recommnedation from the searched and played movies
- Watchlist
- Responsive Design
List the tools and technologies used to build the project.
- This Single Page Application is built using React JS Library.
- For Styling I am using Tailwind CSS and Styled Component(
styled-component) - The state managemment is handled using Redux Library.
- Using
react-routerfor Routing in the application. - Firebase Auth for Identity Access Management.
- Used Firebase Firestore DB for saving the user information.
- Used NextJS API and Node for API Routes
- Used TMDB(Third Party API), for having the Movies and Videos data to make Netflix
- Using Youtube Video Player(Iframe) to play videos in the Netflix Application.
- Used
react-error-boundarylibrary for Error Handling using Error Boundary - Used Vercel to deploy the application and also CI/CD Pipeline.
- Handle the asynchronous features using
@tanstack/react-query(Asynchronous State management). - Offline View Handling
- Handle the Route based modal and work on navigation fixes.
The design patterns implemented and code styles used.
- 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.
- Using ENV Variables: Saving the crutial variables of the firebase configuration in the Environment Variables Passed from the Vercel.
- 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;" />
- Implementing API to solve the CORS error: Handled the API Calling using the Next JS API as Backend for handling the CORS.
- Implemented Firebase Auth: Handle the authentication of the Firebase Auth SDK, to enable the authenticated user to use the netflix application.
- Optimised the application, by reducing the API calls by 300%. We handled TMDB API Requests from the Backend Side.
- Implemented
lazy-loadingfor images in the react applicaiton.
- Using Error Boundary for handling the error in different components
- Catching the Anonymous Page in the
react-routerwith 404 page.
Application is working in two different language, using the transalation config.
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.
Add any license agreement information. Example (MIT, Apache).
Screenshots of the Application
Availaibe in Hindi Language
