This project is a Netflix clone built using the MERN stack (MongoDB, Express.js, React.js, Node.js). It aims to replicate the core features and functionalities of the Netflix website, allowing users to browse movies and TV shows, view details, and watch trailers.
- User Authentication: Users can create accounts, log in, and manage their personal information securely.
- Movie/TV Show Catalog: A vast catalog of movies and TV shows is available for users to explore.
- Search: Users can search for specific movies or TV shows by title, genre, or keywords.
- Movie/TV Show Details: Detailed information is provided for each movie or TV show, including trailers, descriptions, cast, and ratings.
- My List: Users can save movies and TV shows to their personal watchlist for future viewing.
- Netflix Player: Users can watch movies and TV shows directly on the platform.
The Netflix Clone project includes the following methods:
- Netflix React App Setup: Set up a new React application for the Netflix Clone.
- React Router Dom Setup: Install and configure React Router Dom to handle routing within the application.
- Firebase Setup: Set up Firebase for user authentication and data storage. Configure Firebase API keys and authentication settings.
- Signup Using Firebase: Implement user signup functionality using Firebase authentication. Allow users to create new accounts with email and password.
- Login Using Firebase: Implement user login functionality using Firebase authentication. Allow users to log in to their existing accounts.
- Netflix Navbar: Create a navigation bar component for the Netflix Clone. Include links and navigation items for different pages and sections.
- Netflix Home: Build the homepage of the Netflix Clone. Display featured movies, trending shows, and personalized recommendations.
- Netflix Player: Implement the Netflix player functionality. Allow users to watch movies and TV shows directly on the platform.
- TMDB API Setup: Set up the integration with the TMDB API to fetch movie and TV show data.
- Redux Toolkit Setup: Set up Redux Toolkit for state management in the Netflix Clone. Configure the Redux store, reducers, and actions.
- Fetching Genres from TMDB API: Fetch genres from the TMDB API and display them in the application.
- Fetching Movies from TMDB API: Fetch movies and TV shows from the TMDB API and populate the catalog.
- Netflix Card Slider: Create a card slider component to display movies and TV shows in a carousel-like format. Enable smooth sliding and navigation through the slider.
- Code Optimization Using React Memo Hook: Optimize performance by using the React memo hook. Memoize components to prevent unnecessary re-renders.
- Netflix Movies by Genre: Implement the ability to filter and display movies by genre. Allow users to browse movies based on their preferred genres.
- Netflix TV Shows By Genre: Implement the ability to filter and display TV shows by genre. Allow users to browse TV shows based on their preferred genres.
- Node.js Setup: Set up Node.js for the backend of the Netflix Clone. Install necessary dependencies and configure the project structure.
- Node.js API Add Movie to MongoDB: Implement an API endpoint in Node.js to add movies to a MongoDB database. Handle requests to add new movies to the collection.
- Using Add Movie Node.js API with React: Integrate the Node.js API for adding movies with the React frontend. Allow users to add new movies to the Netflix Clone through the user interface.
- Node.js API Get All Movies: Implement an API endpoint in Node.js to fetch all movies from the MongoDB database. Handle requests to retrieve all movies and send the data back to the frontend.
- MyList Page and Get all Movies Node.js API Integration with React: Create a MyList page in the Netflix Clone. Integrate the Node.js API to fetch all movies and display them on the MyList page.
- Node.js API Delete Movie: Implement an API endpoint in Node.js to delete movies from the MongoDB database. Handle requests to remove movies based on specified criteria.
- Delete Movie Node.js API Integration with React: Integrate the Node.js API for deleting movies with the React frontend. Allow users to remove movies from the Netflix Clone through the user interface.
Follow these steps to set up the Netflix Clone locally:
-
Clone the repository: git clone [repository-url]
-
Install the required dependencies for the Netflix UI: cd netflix-ui npm install
-
Install the required dependencies for the Netflix API: cd netflix-api npm install
-
Configure the environment variables: Update the Firebase configuration in the Netflix UI
-
Start the Netflix UI: cd netflix-ui npm start
-
Start the Netflix API: cd netflix-api npm start Open your browser and navigate to http://localhost:3000 to access the Netflix Clone.
We welcome contributions to improve Jobooking! Feel free to fork the repository, create pull requests, and report issues. Please follow the contribution guidelines when submitting changes.
This project is open-source and available under the MIT License. See the LICENSE file for details.
For any inquiries or support, please reach out to our team at danarafha@gmail.com.