Movie App

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;
}

/* .search button {
  padding: 20px 40px;
  border-radius: 0.5rem;
  margin-left: 15px;
  color: #a1a1a1;
  font-family: var(--font-raleway);
  font-weight: 900;
  letter-spacing: 0.75px;
  font-size: 1.25rem;
  cursor: pointer;

  background: #1f2123;
  -webkit-box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527;
  box-shadow: 5px 5px 7px #1c1d1f, -5px -5px 7px #222527;
} */

.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, useEffect } from "react";

import MovieCard from "./MovieCard";
import SearchIcon from "./search.svg";
import "./App.css";

const API_URL = "http://www.omdbapi.com?apikey=b6003d8a";

const App = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    searchMovies("Batman");
  }, []);

  const searchMovies = async (title) => {
    const response = await fetch(`${API_URL}&s=${title}`);
    const data = await response.json();

    setMovies(data.Search);
  };

  return (
    <div className="app">
      <h1>MovieLand</h1>

      <div className="search">
        <input
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          placeholder="Search for movies"
        />
        <img
          src={SearchIcon}
          alt="search"
          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';

const MovieCard = ({ movie: { imdbID, Year, Poster, Title, Type } }) => {
  return (
    <div className="movie" key={imdbID}>
      <div>
        <p>{Year}</p>
      </div>

      <div>
        <img src={Poster !== "N/A" ? Poster : "https://via.placeholder.com/400"} alt={Title} />
      </div>

      <div>
        <span>{Type}</span>
        <h3>{Title}</h3>
      </div>
    </div>
  );
}

export default MovieCard;

search.svg

<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.8594 29.8594L39.4219 39.4219" stroke="#D88769" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17.9062 33.0469C26.2682 33.0469 33.0469 26.2682 33.0469 17.9062C33.0469 9.54431 26.2682 2.76562 17.9062 2.76562C9.54431 2.76562 2.76562 9.54431 2.76562 17.9062C2.76562 26.2682 9.54431 33.0469 17.9062 33.0469Z" stroke="#D88769" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

the search icon code

Create a file name "search.svg" and copy ,paste the code above

Module not found means file doesn't exist. Ensure the file name should be correct and in should be in folder. I think you'll try it and past your code to gpt and ask him. Make sure you'll resolve your error but don't give up.

…

On Mon, 12 Aug 2024, 11:10 am Oji-kun, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Anyone knows how to fix this? I'm a complete beginne. ERROR in ./src/App.js 7:0-37 Module not found: Error: Can't resolve '.search.svg' in 'C:\Users\Prince\Desktop\my_first_react_app\src' webpack compiled with 1 error and 1 warning — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1#gistcomment-5151291> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE2YAQYQIMVDPSLBGB4FU2LZRBGTVBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNJQGI2TCNZRU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

Why it is movies?.length . why not movies.length?

If you use movies.length? it might give you an error I guess. While chaining you are supposed to write it like: 'object?.property'.

CSS is not Working as display in the Video

yes i also hadd that problem

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>

// </React.StrictMode>
);

For the Newer version of React, you need to use the Strict Mode. But with the strict Mode, Console.log will give to the same values

import React from "react"; import ReactDOM from "react-dom/client";

import App from "./App"; import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // <React.StrictMode> // </React.StrictMode> );

For the Newer version of React, you need to use the Strict Mode. But with the strict Mode, Console.log will give to the same values

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>

// </React.StrictMode>
);

For the Newer version of React, you need to use the Strict Mode. But with the strict Mode, Console.log will give to the same values

true

i faced the same problem : "API not working"

solution: Verify Your Email ( ...by the received link)

Thanks

…

On Wed, Nov 6, 2024, 11:24 AM B.K Jeeban ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ i faced the same problem : "API not working" solution: Verify Your Email ( ...by the received link) — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1#gistcomment-5268876> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BJMT3EQMOA5HM3HFCOA5O6DZ7HU6XBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNJQGI2TCNZRU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

if you get any issue contact me i am here to help 4 everybody

i think the api isn't working
help me

I am not able to fetch data from the movie search results. It tells me, can't read properties of null. Can someone help me out with this?

CSS is not Working as display in the Video

you should just copy the css file from github page . link provided in description.

Not working, can you send the link of project, so I can identify which css file have issue/bugs

…

On Sat, 28 Dec 2024, 4:45 pm Faiz Ur Rehman, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ CSS is not Working as display in the Video you should just copy the css file from github page . link provided in description. — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1#gistcomment-5364819> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE2YAQ75424P6HGGDMZDEAL2H2FMHBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNJQGI2TCNZRU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

Any body need help keep touch on me pls

import React from "react"; import ReactDOM from "react-dom/client";
import App from "./App"; import "./index.css";
const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // <React.StrictMode> // </React.StrictMode> );
For the Newer version of React, you need to use the Strict Mode. But with the strict Mode, Console.log will give to the same values

import React from "react"; import ReactDOM from "react-dom/client";

import App from "./App"; import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root")); root.render( // <React.StrictMode>

// </React.StrictMode> );

For the Newer version of React, you need to use the Strict Mode. But with the strict Mode, Console.log will give to the same values

thanks man i see

Any body need help keep touch on me pls

plz help me out as this code doesnt working

Hello Kash, first you have to go to their site https://www.omdbapi.com/apikey.aspx there,
leave your email, submit and it will come to your email

Any body need help keep touch on me pls

this is what I am getting in output screen:
{
"Response": "False",
"Error": "Invalid API key!"
}

please help me out

Make sure you have copied the API key correctly. Verify that there are no extra spaces or characters when you paste it into your code.

plz provide svg code

when i am importing moviecard on app.js it showing this eror : Already included file name 'c:/Users/Tech aarohi/Desktop/my react pro/my-react-proj/src/MovieCard.jsx' differs from file name 'c:/Users/Tech aarohi/Desktop/my react pro/my-react-proj/src/Moviecard.jsx' only in casing. The file is in the program because: Imported via '../src/MovieCard' from file 'c:/Users/Tech aarohi/Desktop/my react pro/my-react-proj/src/App.jsx' Root file specified for compilation

this is happening because you must have created a file name earlier with small case or something like that delete and try a new name with Initails letter upercase

The following code doesn't display the year in the browser. However, when I put

{movie1.Year}

else where it displays the year. Any assistance?

          <div className="movie">
            
              <div>
              <p>{movie1.Year}</p>
              </div>
          </div>
    </div>

@Leks10
Hey! I found the issue - it's actually a CSS problem, not a React one.
Look at this part of your CSS:

css.movie div:nth-of-type(1) {
  position: absolute;
  padding: 16px;
  width: 100%;
  opacity: 0;  /* <-- This is the culprit! */
  top: 0;
  color: #f9d3b4;
}

Your year is actually there, but it's invisible because opacity: 0 makes it completely transparent. The year only shows up when you hover over the movie card because of this rule:

css.movie:hover div:nth-of-type(1) {
  opacity: 1;  /* Only shows on hover */
}

So if you want the year to always be visible, just change opacity: 0 to opacity: 1 in the first CSS rule.
If you want to keep some of the hover effect but still show the year normally, you could try opacity: 0.8 or something like that instead of completely hiding it.
The reason it works when you put {movie1.Year} somewhere else is because those other spots aren't affected by this CSS rule that's hiding the first div.
Try that fix and let me know if it works!

@its-me-mhd you are the best! I followed you advise and it worked like magic. I spent about 3 hours trying to figure it out. Thank you!

@Leks10 You are welcome 👏

@its-me-mhd Could you plz give me the search.svg? Because I didn't see that in this page.

From which project??

…

On Tue, 9 Sept 2025, 6:57 am TerryZ, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ @its-me-mhd <https://github.com/its-me-mhd> Could you plz give me the search.svg? Because I didn't see that in this page. — Reply to this email directly, view it on GitHub <https://gist.github.com/adrianhajdin/997a8cdf94234e889fa47be89a4759f1#gistcomment-5752088> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE2YAQ2PXGAKFP22I5ZFBD33RYXY5BFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCNJQGI2TCNZRU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

I just finished the Moviehub website, and it works fine. I deployed it on Vercel too💃🚀

Huge thanks to Adrian JSM for being my React Hero 🦸‍♂️

• Link to My Deployed Project
• Youtube Video Link
• Github Repository

I would love to get stars on my Repo too 🌟✨

Made with 💖 by Fasakin Henry