Solution

src/App.jsx

@@ -1,12 +1,14 @@
 /* eslint-disable max-len */
 
 import './App.scss';
-// import moviesFromServer from './api/movies.json';
+import moviesFromServer from './api/movies.json';
+import { MovieList } from './components/MovieList';
 
 export const App = () => (
   <div className="page">
     <div className="page-content">
-      <div className="movies">
+      <MovieList movies={moviesFromServer} />
+      {/*  <div className="movies">
         <div className="card" data-cy="Movie">
           <div className="card-image">
             <figure className="image is-4by3">
@@ -92,7 +94,7 @@ export const App = () => (
             </div>
           </div>
         </div>
-      </div>
+      </div> */}
     </div>
 
     <div className="sidebar" data-cy="Sidebar">

src/components/MovieCard/MovieCard.jsx

@@ -1,3 +1,35 @@
 import './MovieCard.scss';
 
-export const MovieCard = () => <>Put the card here</>;
+export const MovieCard = ({ movie }) => (
+  <div className="MovieCard" data-cy="Movie">
+    <div className="card-image">
+      <figure className="image is-4by3">
+        <img data-cy="MovieImage" src={movie.imgUrl} alt="Film logo" />
+      </figure>
+    </div>
+
+    <div className="card-content">
+      <div className="media">
+        <div className="media-left">
+          <figure className="image is-48x48">
+            <img src="images/imdb-logo.jpeg" alt="imdb" />
+          </figure>
+        </div>
+
+        <div className="media-content">
+          <p className="title is-8" data-cy="MovieTitle">
+            {movie.title}
+          </p>
+        </div>
+      </div>
+
+      <div className="content">
+        <p data-cy="MovieDescription">{movie.description}</p>
+
+        <a href={movie.imdbUrl} data-cy="MovieLink">
+          IMDB
+        </a>
+      </div>
+    </div>
+  </div>
+);

src/components/MovieList/MovieList.jsx

@@ -1,3 +1,11 @@
 import './MovieList.scss';
 
-export const MovieList = () => <>Put the list here</>;
+import { MovieCard } from '../MovieCard';
+
+export const MovieList = ({ movies }) => (
+  <div className="movies">
+    {movies.map(movie => (
+      <MovieCard movie={movie} key={movie.imdbId} />
+    ))}
+  </div>
+);