MERN Stack Project | React Project | Netflix Clone with React, Redux Toolkit, Nodejs, MongoDB.

Mern Stack Projects. React Projects. Netflix Clone with React, Redux Toolkit, Nodejs, Firebase, Express, MongoDB and many more technologies.

Source code and links ⤵️

Subscribe for more! 🔔

Timestamps ⏱️
00:00 Demo
02:54 Netflix React App Setup
06:46 React Router Dom Setup
08:40 Firebase Setup
11:20 Signup Using Firebase
41:20 Login Using Firebase
49:40 Netflix Navbar
01:12:40 Netflix Home
01:20:40 Netflix Player
01:26:05 TMDB API Setup
01:30:50 Redux Toolkit Setup
01:33:35 Fetching Genres from TMDB API
01:40:41 Fetching Movies from TMDB API
01:59:05 Netflix Card Slider
02:39:25 Code Optimization Using React Memo Hook
02:44:10 Netflix Movies by Genre
03:09:10 Netflix TV Shows By Genre

Search Terms
How to create netflix clone ?
How to create netflix clone with mern stack?
netflix clone
netflix clone using react
react netflix clone
React Netflix Clone
Nodejs Netflix Clone
Firebase Projects
Redux Toolkit Projects
Mern Stack Projects
Projects for Beginners
Reactjs Projects
Nodejs Projects
Fullstack Projects

#netflixclone #mernstackprojects #kishansheth #whatsappclone #messengerclone #telegramclone #reactjs #nodejs #javascript #mongodb #express #styledcomponents #firebase #reduxtoolkit

[rey]

🎯 Key Takeaways for quick navigation:

02:52 🎥 The video demonstrates the creation of a Netflix clone using various technologies like React, Redux Toolkit, Node.js, Express, MongoDB, and more.
07:44 🧱 The project's React setup is established using `create-react-app`, and key dependencies like Axios, Firebase, Style Components, React Icons, React Redux, and Redux Toolkit are installed.
08:49 🔑 Firebase authentication is set up for user sign-up using email and password.
17:48 🖼️ The page styling includes background images, grids, and responsive design.
27:48 🛠️ Conditional rendering is used to show password input for signing up.
35:02 📧 User input values for email and password are controlled using React state.
36:16 🚀 User sign-up is implemented using Firebase's function.
38:59 🔐 Firebase auth state changes are monitored using the `onAuthStateChanged` hook, allowing navigation based on the current user's state.
39:13 🚀 Navigated to the Netflix component and fixed potential missed details.
40:03 ❗ Fixed "invalid hook call" error by adjusting component structure and imports.
40:55 🔄 Successfully redirected to Netflix after signing up, handled database deletion.
41:31 💡 Created the login function by reusing code from the signup component.
42:41 💻 Designed the login markup including form structure and inputs.
43:48 🎨 Styled the login form for better visual presentation.
45:31 🔒 Successfully tested login functionality with different passwords.
49:43 🛠️ Created a navigation bar (navbar) component for the Netflix page.
56:22 🧐 Implemented a search input field with show/hide functionality.
57:36 🚪 Implemented user logout functionality using Firebase auth.
01:00:06 🌟 Styled the navbar with dynamic behavior on scroll.
01:02:32 🖼️ Designed the hero component for the Netflix page, including buttons.
01:20:47 ➡️ Started creating the player component for handling video playback.
01:21:04 📹 Import styled and react-icons for video player styling and controls.
01:21:50 📹 Set up container and video elements within the player.
01:22:48 📹 Import and use the `useNavigate` hook for navigation.
01:23:17 📹 Create a new route for the video page.
01:24:35 📹 Apply styling to the player, back button, SVGs, and video element.
01:25:48 📹 Fetch movie data from TMDB API and set up Redux store.
01:26:18 📹 Get API key from TMDB, set up constants for URL and API key.
01:27:30 📹 Register an application on TMDB and obtain API key.
01:29:34 📹 Create Redux actions to fetch genres and movies.
01:37:18 📹 Dispatch the `getGenres` action when genres are loaded.
01:37:42 📹 Implement Redux to fetch trending movies using genres.
01:40:01 📹 Retrieve and organize movie data from API response.
01:42:26 📹 Access genres and other data from Redux state in components.
01:45:13 📹 Define methods to fetch movies by genres and other criteria.
01:46:28 📹 Construct URLs for fetching movies with appropriate parameters.
01:52:11 📹 Utilize Redux actions and selectors to fetch and display movie data.
01:57:07 🎬 The code is updated to fetch movies and store them in the Redux store.
01:57:33 🎞️ The useSelector hook is used to access movies from the Redux store and log them.
01:58:48 🎥 A slider component is being created for the movies, with different categories.
02:00:14 📜 A function "getMoviesInRange" is written to slice movies into categories.
02:01:37 🎞️ The slider component now contains multiple card sliders with categories and movies.
02:03:24 📝 The card component is styled with image, hover effect, and various icons.
02:09:54 📹 The card slider component's hover video section is styled and connected to navigation.
02:14:20 🎚️ Various icons, controls, and genres are added to the card component.
02:24:57 🔄 The card slider's directional controls are styled and functional for scrolling movies.
02:33:41 🧮 Slider position handling: The code manages left and right movement of a slider using translate transformations and slider position tracking.
02:37:10 📺 Genre-based data display: Movies can be displayed based on selected genres using Redux to fetch data by genre.
02:44:05 📚 Pagination and navigation: The project demonstrates navigation through pages and pagination of movie data.
02:46:44 🔄 React.memo optimization: Components like CardSlider are wrapped in React.memo to prevent unnecessary re-renders.
02:52:37 🎬 Select genre functionality: Dropdown menu to select genres is implemented using Redux to dynamically change displayed movies based on genre selection.
03:02:12 🔍 Issue resolution: Debugging and identifying issues with Redux actions and data fetching to display the correct movie data.
03:05:32 🛠️ Error handling and improvement: Fixing issues related to data fetching, ensuring proper Redux state updates, and resolving component re-rendering problems.
03:09:10 ✨ Code duplication and reuse: Duplicating and modifying components for different sections, such as movies and TV shows, while reusing most of the logic.
03:10:57 📺 In the tutorial, the focus shifts to creating a "My List" feature that allows users to add movies to their personalized list.
03:11:39 📦 A new Node.js server named "netflix-api" is set up using Express, Mongoose, and other dependencies to handle backend functionality.
03:13:09 ⚙️ The Express server is configured to listen on port 5000 and connected to a MongoDB database using Mongoose.
03:17:12 🛠️ The user model is created using Mongoose to define the schema for storing user data, including email and liked movies.
03:18:08 💡 The user controller is implemented to handle adding movies to the user's liked movies list. It handles cases where the movie is already liked or not.
03:19:10 🛤️ Routes for adding movies to the liked list are defined in the Express router and connected to the server.
03:20:18 🔄 The "Add to List" functionality is integrated into the React front-end, enabling users to add movies to their liked list.
03:27:25 🔍 A "My List" page is created to display the movies that the user has added to their liked list.
03:29:53 🔀 The user can now remove movies from their liked list by implementing a controller, API route, and front-end functionality.
03:36:21 🚪 The tutorial concludes with the addition of a new route and React components to showcase the user's liked movies on a dedicated page.
03:49:56 🔄 The tutorial demonstrates how to implement the "Remove from List" functionality. A dispatch method is created to handle the removal of movies from the user's liked list.
03:50:30 📤 The dispatch method is used to trigger the removal of a movie from the liked list. The movie ID and user's email are passed as parameters.
03:51:18 ❌ An error occurs during the movie deletion process. The issue is traced to incorrect usage of the "data" variable in the controller.
03:52:16 ✅ The error is resolved by correctly returning the updated movies array and a success message after successfully removing a movie from the liked list.

Made with HARPA AI

[natalias.]

this tutorial is a good one to see how a project can be structured, I think it can be improved a bit to explain why you are using the stuff instead of what we a creating, for e.g your say "Now we are adding NetflixSlice" but why do you create a certain method, what is its purpose, why do you use redux, what is the disadvantage, why do you create NetflixSlice, what is the purpose and what does this mean.

[harshbatham]

Hey Kishan, Thanks for this tutorial everything is good, it would have became perfect if you would have explained every piece of code why you used it and what does it do.

[JJ-otps]

wow this is amazing! do you also have ecommerce clone too ? One thing I would like to suggest is that the flyout menu in navigation maybe could be added to the project and link router from there too, I am learning how to do that now....love to see tutorials on that too!

[prasadwakle]

This is an amazing project. But if you a beginner in React and looking for projects in react for reference after completing your MERN Stack course I would suggest not to go with this project.

[nikanshugoyal]

Sir but clicking on any video is playing that mp4 file fixed.... you have not imported api of video.... pls tell me how to do this so every video can play its unique

[regilearn]

Awesome, appreciate it Kishan, I would like to make a request For the next project can u use **** **** include all the CRUD operations

[jesushurtado]

Well, I watched the 4 hours! Amazing 😎

[nikanshugoyal]

Sir but clicking on any video is playing that mp4 file fixed.... you have not imported api of video.... pls tell me how to do this so every video can play its unique

[nigam_sharma]

Completed this project as a mern fresher
Firstly I got stuck at creation of redux store and lastly at my list api

[wxdiaz]

4:17 in and i already had to figure out like j10 different side issues that wouldnt let me work yarn... this is gonna be fun

[josesalazar]

Thanks for share your knowledge. It's useful

[Jae-uz]

I am having issues with the liking and unliking of videos i have looked into your Github source code and still been able to fix the issue

[manureddy]

@Kishan Sheth sir How to add Multiple videos to one movie in your project it is playing one video to all movies

[mohammadadnan]

can we say this project is performing all crud operations??

[Ishowmeat]

please make a tutorial to make this project responsive ...its a huge request please...

[manureddy]

How to add multiple videos in your project it playing on video to all movies

[atharimam]

3.14.18 can any one guide how they connect with mongo db because I don't understand how they paste url

[cutepanda]

Thanks for the amazing tutorial...I have completed this tutorial. I know machine learning and want to extend this project and want to implement recommendation system on this project...How can I do it?

[KaushalPrakash-gl]

at 1hr 55 min i have an error saying Netflix not defined in the fetchMovies function, i have tried everything but its still not working please do help..