This is a clone of the Netflix website built using React, React Router, Redux, Axios, movie-trailer, react-loading-skeleton, react-youtube, and Tailwind CSS. The website has a responsive design and features a landing page,a page for browsing movies and TV shows, and a detail page for each movie or TV show.
To use this application, you need to have Node.js and npm installed on your machine. Once you have these installed, you can follow these steps:
- Clone the repository to your local machine.
- Navigate to the project directory in your terminal.
- Run
npm installto install the necessary dependencies. - Run
npm startto start the application.
Alternatively, you can clone this repository using the following command:
git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.git
Check out the live demo of the Netflix clone here.
Here are some screenshots of the Netflix clone:
To use the Netflix clone, simply open the website in your browser and browse through the available movies and TV shows. Click on a movie or TV show to view its details, including a trailer (if available).
The Netflix clone has the following features:
The website is designed to be responsive on desktop and mobile devices. The website has been tested on various screen sizes and optimized to provide a seamless experience to users.
The website has a page for browsing movies and TV shows, where users can view posters and titles of the available titles. The browsing page also includes a search bar where users can search for movies or TV shows by title.
The website has a detail page for each movie or TV show, where users can view a synopsis, the rating, and a trailer (if available). The detail page also includes a "Add to Watchlist" button that allows users to save the movie or TV show to their watchlist for future reference.
The website integrates with the movie-trailer package to display trailers for each movie or TV show. Users can watch the trailer by clicking the "Play" button on the detail page.
The website uses the react-loading-skeleton package to display loading placeholders when data is being fetched. This helps to provide a better user experience by giving users a visual cue that content is being loaded.
The website integrates with the react-youtube package to display YouTube videos for trailers. The package provides a simple and easy-to-use interface for embedding YouTube videos in the application.
The website is styled using the Tailwind CSS framework. Tailwind provides a range of pre-built CSS classes that can be used to style components, making it easier and faster to style the application.
Please note that the Netflix clone does not include any actual movies or TV shows, and is intended for demonstration purposes only.
The Netflix clone was built as a personal project to practice my React skills and explore various React-related packages and technologies. The project includes several components, such as the Navbar, Banner, Row, and MovieCard components, and uses Redux for state management.
The Navbar component is responsible for displaying the navigation bar at the top of the page. The navigation bar includes links to the landing page, browsing page, and the user's watchlist.
date: 2 May 2023 141 day Of Webdev
If you'd like to contribute to this project, feel free to submit a pull request. Any contributions are greatly appreciated!
This project is licensed under the MIT License.