@@ -0,0 +1 @@
+REACT_APP_ACCESS_TOKEN = eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1OTY5MGVmZDE0ZTM3NTIyNWM0NTMxZmNkY2VkMjkwMSIsIm5iZiI6MTczNTU1OTMwMS41NDksInN1YiI6IjY3NzI4ODg1OThmMmY4MmZjNDkyNmY3ZSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.UzaJvuxHsMibgfMtuRWROSX2uGrNNP59LWap2ghYNUQ

@@ -0,0 +3,4 @@
+
+function App() {
+  return (
+    <>

@@ -0,0 +20,4 @@
+  align-items: center;
+  height: 100vh; 
+  padding: 20px;
+  overflow: hidden; 

@@ -0,0 +27,4 @@
+          `https://api.themoviedb.org/3/movie/${movieId}/videos?api_key=59690efd14e375225c4531fcdced2901`
+        );
+        const videoData = await videoResponse.json();
+        const trailer = videoData.results.find(

@@ -0,0 +58,4 @@
+      <div className="movie-detail-container">
+        <div className="movie-detail-card">
+          <img
+            src={`https://image.tmdb.org/t/p/w500/${movieDetails.poster_path}`}

@@ -0,0 +65,4 @@
+          <div className="movie-detail-info">
+            <h2>{movieDetails.title}</h2>
+            <p className="movie-detail-release-date">
+              <strong>Release Date:</strong> {movieDetails.release_date}

@@ -0,0 +76,4 @@
+              {movieDetails.genres.map((genre) => genre.name).join(", ")}
+            </p>
+            <p className="movie-detail-runtime">
+              <strong>Runtime:</strong> {movieDetails.runtime} minutes

@@ -0,0 +108,4 @@
+  }
+
+  
+  if (searchResults.length > 0) {

@@ -0,0 +121,4 @@
+            >
+              <img
+                src={`https://image.tmdb.org/t/p/w500/${movie.poster_path}`}
+                alt={movie.title}

@@ -0,0 +1,64 @@
+// import React, { useState, useEffect } from "react";

@@ -0,0 +20,4 @@
+          `https://api.themoviedb.org/3/search/movie?api_key=59690efd14e375225c4531fcdced2901&query=${searchTerm}`
+        );
+        const data = await response.json();
+        setSuggestions(data.results);

@@ -0,0 +40,4 @@
+
+  return (
+    <>
+      <div>

@@ -0,0 +47,4 @@
+              <img src={logo} alt="logo" className="logo" />
+            </div>
+
+            <div className="filters">

@@ -0,0 +77,4 @@
+                step="0.1"
+                value={rating[0]}
+                onChange={(e) =>
+                  setRating([parseFloat(e.target.value), rating[1]])

@@ -0,0 +100,4 @@
+                    <li
+                      key={movie.id}
+                      className="suggestion-item"
+                      onClick={() => handleSuggestionClick(movie.id)}

@@ -0,0 +35,4 @@
+  };
+
+  return (
+    <><div className="movie-container">

@@ -0,0 +40,4 @@
+        <div key={movie.id} className="movie-card">
+          <img
+            className="movie-poster"
+            src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}

@@ -0,0 +42,4 @@
+            className="movie-poster"
+            src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
+            alt={movie.title} />
+          <div className="movie-details">

@@ -0,0 +44,4 @@
+            alt={movie.title} />
+          <div className="movie-details">
+            <h3 className="movie-title">{movie.title}</h3>
+            <p className="movie-overview">{movie.overview}</p>

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.