done

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.env
 
 # Editor directories and files
 .vscode/*

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.10.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -1,9 +1,50 @@
-import React from 'react'
+import React, { useState, useEffect } from "react";
+import { HiOutlineSearch } from "react-icons/hi";
+import MovieCard from "./components/MovieCard";
 
 function App() {
+  const [movies, setMovies] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('')
+  const api = import.meta.env.VITE_API_KEY;
+
+  const getMovie = (searchTerm) => {
+    const url = `https://api.themoviedb.org/3/search/movie?api_key=${api}&query=${searchTerm}`;
+    fetch(url)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setMovies(data.results);
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error);
+      });
+  };
+  useEffect(() => {
+    getMovie(searchTerm || "Avengers");
+  }, [searchTerm]);
   return (
-    <div>App</div>
-  )
+    <div className="flex flex-col items-center justify-center p-4">
+      <div className="border-2 border-black p-2 rounded-2xl flex items-center justify-between w-full relative">
+        <input
+          className="w-full h-full outline-none p-1"
+          type="text"
+          placeholder="Search Movies..."
+          value={searchTerm}
+          onChange={(e)=>setSearchTerm(e.target.value)}
+        />
+        <HiOutlineSearch className="cursor-pointer font-bold text-2xl"/>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
+        {movies.map((movie, index) => (
+          <MovieCard key={index} movie={movie} />
+        ))}
+      </div>
+    </div>
+  );
 }
 
-export default App
+export default App;

src/components/MovieCard.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+function MovieCard({ movie }) {
+  return (
+    <div>
+      <div className="flex flex-col bg-white rounded-lg shadow-md overflow-hidden">
+        <img
+          src={
+            movie.backdrop_path
+              ? `https://image.tmdb.org/t/p/w500/${movie.backdrop_path}`
+              : "https://placehold.co/600x400/000000/FFFFFF/png"
+          }
+          alt={movie.title}
+          className="h-40 w-full object-cover"
+        />
+        <div className="p-4">
+          <h1 className="font-bold text-lg text-black">{movie.title}</h1>
+          <p className="text-gray-600 text-sm mt-1">
+            Release Date: {movie.release_date}
+          </p>
+          <p className="text-gray-600 text-sm mt-2 line-clamp-3">
+            {movie.overview}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MovieCard;