Movie Searching Platform using ReactJs

Ideation:

A person who opens the website will be able to come and search any movie name and he/she is going to get all the details related to that movie.

Pre-requisites:

Firstly, we need to have Node JS installed in our system that provides the environment to run React JS. Then we can simply create our project by typing:

npx create-react-app movie-search

Note: Here, movie-search is the name of our project.

Open the project in any code editor you want. I'll be using the VS Code Studio for this purpose. Open terminal and start the project by tying:

npm start

Additional to this, knowledge of HTML, CSS and Javascript is necessary to follow the project.

API:

Go to OMDb API - The Open Movie Database. It gives us the API endpoints that we can use to fetch the movie details. To use this, we need an API key. So generate your personal API key from this website itself.

The format to write the url for fetching the API is:

https://omdbapi.com/?t=moviename&apikey=xxxxxxxx

You can write any name of a movie replacing 'moviename' in the url, e.g. The Avengers

Use your API key in the url in the place provided.

Note: Remember to put the API key because that's the authentication otherwise it will not work.

Using the Effect Hook:

If you look at the above code snippet, we are first importing useState and useEffect from React. They are also called the State Hook and the Effect Hook respectively.

Hooks allow us to use state and other React features without writing a class.

let [movieinfo, setMovieinfo]=useState("The Avengers");

Here, movieinfo is the variable and setMovieinfo is a function which we will define later. We are using useState here to set the default movie as "The Avengers". This is the way of declaring a state variable. For a state variable, if the data changes, then the component re-renders.

When we fetch our url and print the contents of the JSON file on the console, we get the following output:

We can clearly see a lot of objects like Actors, Awards Directors, Posters, etc. Out of them we will use a few to display on our webpage.

To display the poster of the movie, we use the following lines of code. Here, we are accessing the data i.e. the poster image from the Poster Object through the movieinfo State Variable in which all the information are stored.

<div className="poster"> <img src={movieinfo.Poster}></img> </div>

In a similar way we can fetch and produce the rest of the important data that we want to show on our webpage.

With this we come to an end with the first part of the project. Now we have to make sure that the data for the particular movie which has been searched by the user is displayed.

Now some movies may not have all three ratings. Some movies may have more, some may have less. So in this case, it is better to create a loop and place the reviews inside the loop.

To display the data that is searched by the user, we create a button which on clicking calls a function called getMovieData. This function gets the data the same way the Effect Hook fetches data. To avoid repetition of same lines of code, we place the block of code inside Effect Hook, inside the getMovieData function and directly call this function inside the Effect Hook. There is also a function called readTitle which reads the title from the search bar and stores it in the state variable called title. That tile is then passed with the url for calling the API.

Finally the last step we do is the show an error message. To do that we simply check if the title entered by the user is present in the database or not. If it is present, it wont give any error and searching process will complete and data will be produced. However, if movie is not present, an error will be generated. And a message "Movie Not Found." will be displayed.

Design:

Now the webpage can be designed according to our wish. It totally depends on our CSS skills. We can use Bootstrap to use the page responsive but I haven't used it in this project as it solely focuses on React JS.

Final Screenshot:

References:

This project was part of a 3 Day long Bootcamp on React JS offered by LetsUpgrade - India's largest and fastest growing community of developers. I would like to thank LetsUpgrade and our instructor for the wonderful sessions.