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:
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.
Javascript
// App.js import React, { useState } from 'react'; import { useEffect } from 'react'; import './App.css'; import MovieCard from './MovieCard'; 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>neveropen's Movie Center</h1> <div className="search"> <input placeholder="Search for Movies" value={searchTerm} onChange={(e) => { setSearchTerm(e.target.value) }} /> <img src= 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; |
Javascript
// 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; |
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>neveropen Movie's Center</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> |
CSS
/* App.css */@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; } } |
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:
