Building a Movie Search App with React and OMDb API

Get ready to unleash your inner movie buff! In this tutorial, we’ll guide you through building a simple web app that lets users search and display information about their favorite movies using the OMDb API.

Getting Started

First, obtain an API key by signing up with OMDb. Then, create a new React app using the command npx create-react-app my-app. Make sure your project is set up correctly by running npm start. You should see a familiar React app screen if everything is working as expected.

Adding Tailwind CSS and Tailwind UI

To give our app a sleek look, we’ll use Tailwind CSS and Tailwind UI. Install them using the following commands:


npm install tailwindcss
npm install @tailwindui/react


Next, add the following script to your package.json file to compile Tailwind CSS:

json
"scripts": {
"build:tailwind": "tailwindcss -i src/tailwind.css -o src/tailwind.output.css",
"start": "npm run build:tailwind && react-scripts start",
"build": "npm run build:tailwind && react-scripts build"
}


Create a new file src/tailwind.css and add the following code:

css
@tailwind base;
@tailwind components;
@tailwind utilities;


Finally, import the compiled CSS file in your index.js file:

js
import './tailwind.output.css';


Building Components

Our app will consist of three components: App, Header, and Search. Create a new folder components in the src directory and add the following files:

• App.js: The parent component that renders the other two components.
• Header.js: A simple component that renders the app header and accepts a title prop.
• Search.js: Contains a form with the search input and functions to handle the input element, reset the field, and call the search function.

Here’s the code for Header.js:

“`js
import React from ‘eact’;

class Header extends React.Component {
render() {
return (

);
}
}

export default Header;
“`

Search Component

The Search component is where the magic happens. We’ll create a function searchMovies that makes an API call to OMDb using async-await. We’ll also use the useState hook to manage the component’s state.

Here’s the code for Search.js:

“`js
import React, { useState } from ‘eact’;

const Search = () => {
const [searching, setSearching] = useState(false);
const [message, setMessage] = useState(”);
const [movieTitle, setMovieTitle] = useState(”);
const [movies, setMovies] = useState([]);

const searchMovies = async (title) => {
try {
const response = await fetch(https://www.omdbapi.com/?t=${title}&apikey=YOUR_API_KEY);
const data = await response.json();
setMovies(data.Search);
} catch (error) {
setMessage(error.message);
}
};

const handleSearch = (event) => {
event.preventDefault();
searchMovies(movieTitle);
};

return (

);
};

export default Search;
“`

Displaying Search Results

Finally, let’s display the search results in our app. We’ll iterate through the movies array and display the movie details.

That’s it! You now have a fully functional movie search app using React and the OMDb API.