Movie Search Engine Using React and API
Last Updated :
25 Jul, 2024
In this article, we will create Movie Search Engine using ReactJS. In this movie search engine the user can search for movies which they want to know about and the search engine will fetch a list of movies from that keyword and display the result in the forms of card. A default search has been loaded initially to display movies.
This project basically implements class functional components and manages the state accordingly. The application user uses the search bar to search for the movie and then the application returns the information about the movie searched. The logic of searching the movie and getting results of the searched movie is implemented using JSX.
Let’s have an interactive look at what our final project will look like:
Technologies Used/Pre-requisites:
Approach
To create a Movie Search Engine using ReactJS, we set up the project, create a SearchBar component for user input, manage the search term state with the useState hook, fetch movie data from an API using the use effect hook, render movie information in a MovieList component using JSX, combine components in the main App component, style the components with CSS, and test the application by running it and entering movie titles in the search bar.
Project Structure:
.png)
Project Structure
Steps to create the application:
Step 1:. Set up React project using the below command in VSCode IDE.
npx create-react-app <<name of project>>
Step 2: Navigate to the newly created project folder by executing the below command.
cd <<Name_of_project>>
Step 3: Create a file named MovieCard.jsx. We will use existing files App.js and App.css for performing the behavior and styling of the application.
Write the following mentioned code in different files(The name of the files is mentioned in the first line of each code block)
Example:
- index.html: This is an automatically created file in the public folder, we have to just import the icon pack in its <head> tag.
- App.js: This file imports the movie components and exports itself.
- MovieCard.jsx: This file contains the representation of movies in the form of cards or the grid. With this file, the searched movie will be fetched using the API called.
- App.css: This file contains the design of the movie search engine elements.
HTML
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>GeeksforGeeks Movie's Center</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
/* App.css */
@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700");
@import url("https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
* {
margin: 0;
border: 0;
box-sizing: border-box;
}
:root {
--font-roboto: "Roboto Slab", serif;
--font-raleway: "Raleway", sans-serif;
}
body {
font-family: var(--font-roboto);
background-color: #212426;
}
.app {
padding: 4rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-size: 3rem;
letter-spacing: 0.9px;
background: linear-gradient(90deg,
rgba(249, 211, 180, 1) 0%,
rgba(249, 211, 180, 0) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: fit-content;
}
.search {
width: 71%;
margin: 4rem 0 2rem;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem 1.75rem;
border-radius: 3rem;
background: #1f2123;
-webkit-box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527;
box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527;
}
.search input {
flex: 1;
border: none;
font-size: 1.5rem;
font-family: var(--font-raleway);
font-weight: 500;
padding-right: 1rem;
outline: none;
color: #a1a1a1;
background: #1f2123;
}
.search img {
width: 35px;
height: 35px;
cursor: pointer;
}
.empty {
width: 100%;
margin-top: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
.empty h2 {
font-size: 1.25rem;
color: #f9d3b4;
font-family: var(--font-raleway);
}
.container {
width: 100%;
margin-top: 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.movie {
width: 310px;
height: 460px;
margin: 1.5rem;
position: relative;
border-radius: 12px;
overflow: hidden;
border: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
}
.movie div:nth-of-type(1) {
position: absolute;
padding: 16px;
width: 100%;
opacity: 0;
top: 0;
color: #f9d3b4;
}
.movie:hover {
box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
transform: scale(1.05, 1.05);
}
.movie div:nth-of-type(2) {
width: 100%;
height: 100%;
}
.movie div:nth-of-type(2) img {
height: 100%;
width: 100%;
}
.movie div:nth-of-type(3) {
z-index: 2;
background-color: #343739;
padding: 16px 24px 24px 24px;
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
.movie div:nth-of-type(3) span {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
font-weight: 500;
color: #f0f0f0;
}
.movie div:nth-of-type(3) h3 {
margin-top: 5px;
font-family: "Roboto Slab", serif;
color: #f9d3b4;
}
.movie:hover div:nth-of-type(2) {
height: 100%;
opacity: 0.3;
}
.movie:hover div:nth-of-type(3) {
background-color: transparent;
}
.movie:hover div:nth-of-type(1) {
opacity: 1;
}
@media screen and (max-width: 600px) {
.app {
padding: 4rem 2rem;
}
.search {
padding: 1rem 1.75rem;
width: 100%;
}
.search input {
font-size: 1rem;
}
.search img {
width: 20px;
height: 20px;
}
}
@media screen and (max-width: 400px) {
.app {
padding: 4rem 1rem;
}
h1 {
font-size: 2rem;
}
.container {
margin-top: 2rem;
}
.movie {
width: "100%";
margin: 1rem;
}
}
// App.js
import React, { useState } from 'react';
import { useEffect } from 'react';
import './App.css';
import MovieCard from './MovieCard';
const API_URL = 'https://omdbapi.com?apikey=fe2f6c44';
const App = () => {
const [movies, setMovies] = useState([]);
const [searchTerm, setSearchTerm] = useState([]);
const searchMovies = async (title) => {
const response = await fetch(`${API_URL}&s=${title}`);
const data = await response.json();
setMovies(data.Search);
}
useEffect(() => {
searchMovies('SpiderMan');
}, []);
return (
<div className="app">
<h1>GeeksforGeeks's Movie Center</h1>
<div className="search">
<input
placeholder="Search for Movies"
value={searchTerm}
onChange={(e) => { setSearchTerm(e.target.value) }}
/>
<img
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230626112934/search.png"
alt="search icon"
onClick={() => searchMovies(searchTerm)}
/>
</div>
{
movies?.length > 0
? (<div className="container">
{movies.map((movie) => (
<MovieCard movie={movie} />
))}
</div>) : (
<div className="empty">
<h2>No Movies found</h2>
</div>
)
}
</div>
);
}
export default App;
// MovieCard.jsx
import React from 'react';
// import App from './App';
const MovieCard = ({ movie }) => {
return (
<div className="movie">
<div>
<p>{movie.Title}</p>
</div>
<div>
<img src={movie.Poster !== 'N/A' ? movie.Poster : "https://via.placeholder.com/400"} alt={movie.Title} />
</div>
<div>
<span>{movie.Type}</span>
<h3>{movie.Title}</h3>
</div>
</div>
)
}
export default MovieCard;
Steps to run the application:
1. Execute the following command in the terminal.
npm start
2. Open the web browser and type the following URL in the address bar.
http://localhost:3000/
Output:
Similar Reads
Movie Trailer app using ReactJS
In this article, we are going to make a simple app that searches for any movie/web series trailers. The users can search for their favourite movie trailers using this application. The API will fetch the trailer from the internet and display it on the webpage. We will use 'movie-trailer' npm package
3 min read
Create a News Reader app using React-Native
Creating the News Reader application using React-Native language is an exciting project. Using this project, the users can read the news in the application itself, by filtering them according to the categories as per their interest. In this article, we will develop the complete News Reader applicati
5 min read
IP address finder app using ReactJS
In this article, we will be building an IP address finder app that lets you find your client's approximate location on a map. An IP address is a unique address that identifies a device on the internet or a local network. IP stands for "Internet Protocol," which is the set of rules governing the form
4 min read
COVID-19 Tracker using ReactJS and real time API
Creating a web application COVID-19 Tracker using ReactJS and real-time API. In this web application or website, when the user enters the name of the country, it will display the number of active cases, recovered cases, today's cases, etc. Prerequisites:React JSReactJS HooksIntroduction to APIsAPIs
4 min read
How to Build a Search Filter using React Hooks ?
In modern web development, implementing a search feature is a common requirement for various applications. With React Hooks, developers can efficiently manage state and lifecycle events, making it an ideal choice for building interactive user interfaces, including search functionalities. In this art
4 min read
Build an Image Search App with Infinite Scroll using React JS
This article delves into building a React-based image search app with infinite scroll. Users can search for images based on a query, and as they scroll down, additional images are fetched and shown. The Unsplash API is employed for searching and retrieving these images, resulting in a fully operatio
3 min read
Create a Quiz App using ReactJS
In this article, we will create a quiz application to learn the basics of ReactJS. We will be using class components to create the application with custom and bootstrap styling. The application will start with questions at first and then the score will be displayed at last. Initially, there are only
4 min read
Memory Game from scratch using React
In this article, we will create a Memory game using ReactJS. A memory game is a famous game in which a pair of cards are placed in front of a player with their face down. The two pairs are always going to have the same content. The player has the choice to select any two cards at a time and check if
6 min read
Consuming a REST API ( Github Users ) using Fetch - React Client
In this article, you will learn to develop a React application, which will fetch the data from a REST API using Fetch. We will use GitHub Users API to fetch the user's public information with their username. You can find the API reference and source code links at the end of this article. Prerequisit
3 min read
Create a Random Joke using React app through API
In this tutorial, we'll make a website that fetches data (joke) from an external API and displays it on the screen. We'll be using React completely to base this website. Each time we reload the page and click the button, a new joke fetched and rendered on the screen by React. As we are using React f
3 min read