This is the Movie database project where you can see a Movie section in which the 20 movies per page are displayed. Each movie card has buttons to "add to watchlist" or "remove from watchlist". In the WatchList Movie section, you can use the "All Genre" component and the "Search For Movies" component. The table in this section has headings for "Name", "Rating", "Popularity", and "Genre". Once a movie is added, you will also see the movie poster and a delete option in the table.
The Movie DB project provides a comprehensive and user-friendly interface to browse and manage your favorite movies. Users can browse movies 20 per page and add or remove movies from their watchlist. The watchlist includes additional features like filtering by genre, searching for specific movies, and managing movie details through a table.
Very simple to install:
-
Clone the repository:
git clone https://github.com/yourusername/the-movie-db.git
-
Navigate to the project directory:
cd the-movie-db
-
Install the dependencies:
npm install
-
Install Tailwind CSS: Follow the instructions on the Tailwind CSS website.
-
Install React Icons:
npm install react-icons --save
-
Install React Router DOM:
npm install react-router-dom@6
-
Set up TMDB API Key:
- Create an account on the TMDB Developer website.
- After creating an account, go to The Movie DB website, click on the "More" option, then select "API" to create your API key.
- Add your API key in the
Movies.js
component:
useEffect(() => { axios.get( "https://api.themoviedb.org/3/movie/popular?api_key=<Your API KEY>&language=en-US&page=1" ); });
-
Run the project:
npm run start
-
Browse Movies:
- Navigate through the movie section to see 20 movies per page.
- Each movie card has buttons to "add to watchlist" or "remove from watchlist".
-
Manage Watchlist:
- Use the "All Genre" component to filter movies by genre.
- Use the "Search For Movies" component to search for specific movies.
- View the table with columns for "Name", "Rating", "Popularity", and "Genre".
- Once a movie is added to the watchlist, view additional details such as the movie poster and a delete option.
Feel free to contribute to this project. Any improvements or suggestions are welcome!
This project is open-source and available under the MIT License.
If you have any questions or need further information, feel free to contact me at mauryamohit138@gmail.com.