Giter Club home page Giter Club logo

mohit138928 / the-movie-db Goto Github PK

View Code? Open in Web Editor NEW
1.0 2.0 0.0 6.52 MB

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.

Home Page: https://the-movie-db-filmvault.netlify.app/

HTML 2.67% CSS 3.46% JavaScript 93.87%
frontend frontend-development javascript javascript-library movie-db react react-hooks react-icons react-redux react-router react-router-dom reactjs tailwind tailwindcss the-movie-database-api the-movie-db themoviedb movie-database

the-movie-db's Introduction

The Movie DB

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.

Description

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.

Installation

Very simple to install:

  1. Clone the repository:

    git clone https://github.com/yourusername/the-movie-db.git
  2. Navigate to the project directory:

    cd the-movie-db
  3. Install the dependencies:

    npm install
  4. Install Tailwind CSS: Follow the instructions on the Tailwind CSS website.

  5. Install React Icons:

    npm install react-icons --save
  6. Install React Router DOM:

    npm install react-router-dom@6
  7. 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"
      );
    });
  8. Run the project:

    npm run start

Usage

  1. 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".
  2. 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.

Preview of the Project

Preview-1 Preview-2 Preview-3 Preview-4 Preview-5

Contributing

Feel free to contribute to this project. Any improvements or suggestions are welcome!

License

This project is open-source and available under the MIT License.

Contact Information

If you have any questions or need further information, feel free to contact me at [email protected].

the-movie-db's People

Contributors

mohit138928 avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.