src/App.css

@@ -1,6 +1,6 @@
 :root {
 
-  --poster-width: 15rem;
+  --poster-width: 10rem;
   --posters-wide: 10;
 }
 
@@ -11,24 +11,35 @@
 
 main {
   display: flex;
+  justify-content: center;
+
+  height: 100%;
   background-size: cover;
+
 }
 
+h1 {
+  margin: 0;
+}
 
-#movie-wall-container {
+.flow-container {
   display: inline-flex;
   flex-wrap: wrap;
-  flex-basis: calc(var(--poster-width)*var(--posters-wide))
+  align-items: center;
+  justify-content: center;
+  flex-basis: calc(var(--poster-width)*var(--posters-wide));
 }
 
 #sidebar {
-  flex-basis: calc(var(--poster-width)*2)
+  flex: 0 0 10rem;
 }
 
 .poster {
-  width: var(--poster-width);
+  font-size: 2rem;
-  aspect-ratio: 2/3;
   background-size: cover;
+  width: var(--poster-width);
+  aspect-ratio: 3/4.5;
+  flex: 0 0 auto;
 }
 
 

src/App.tsx

@@ -4,21 +4,12 @@ import { MovieWall } from './objects/movie-wall'
 import { useState, useEffect } from 'react'
 import tmdb from './objects/tmdb'
 import { Sidebar } from './objects/sidebar'
-import { makeImgUrl } from './functions'
-import { Movie } from './objects/movie-wall'
 
 export type Config = {
   language: string,
   region: string,
   page: number,
 }
-class MovieClass implements Movie {
-  id = null
-  poster_path = null
-  backdrop_path = null
-  title = null
-  overview = null
-}
 
 function App() {
   const [config, setConfig] = useState<Config>({
@@ -26,14 +17,12 @@ function App() {
     region: "spain",
     page: 1
   })
-  const [movies, setMovies] = useState([new MovieClass()])
+  const [movies, setMovies] = useState([])
   const [backdrop, setBackdrop] = useState("")
-  const [chosenMovie, setChosenMovie] = useState(new MovieClass())
-
   useEffect(() => { tmdb.getPopular(config, setMovies) }, [])
   useEffect(() => {
-    if (movies[0].backdrop_path) {
+    if (movies?.[0]) {
-      setBackdrop(makeImgUrl(movies[0].backdrop_path))
+      tmdb.getBackdrop(movies[0], setBackdrop)
     }
   }, [movies])
   return (
@@ -42,10 +31,10 @@ function App() {
         <h1>Movie Explorer</h1>
       </header>
       <main style={{ backgroundImage: backdrop }}>
-        <div id="movie-wall-container">
+        <div className='flow-container'>
           <MovieWall movies={movies} setMovies={setMovies} config={config} />
         </div>
-        <Sidebar movie={chosenMovie} />
+        <Sidebar movie={movies?.[0]} />
       </main>
 
     </>

src/index.css

@@ -25,7 +25,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;

src/objects/movie-wall.tsx

@@ -3,15 +3,13 @@ import { Config } from "../App"
 import tmdb from "./tmdb"
 import { makeImgUrl } from "../functions"
 
-export interface Movie {
+export type Movie = {
-  id: number | null
+  id: number
-  poster_path: string | null
+  poster_path: string
-  backdrop_path: string | null
+  title: string
-  title: string | null
+  overview: string
-  overview: string | null
 }
 
-
 const sampleData = {
   adult: false,
   backdrop_path: "/jnE1GA7cGEfv5DJBoU2t4bZHaP4.jpg",
@@ -59,7 +57,10 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
 
 function Poster({ movie, config, listSimilar, setMovies }: PosterProps) {
   const style = {
-    backgroundImage: makeImgUrl(movie.poster_path)
+    backgroundImage: makeImgUrl(movie.poster_path),
+    backgroundSize: "cover",
+    // alignSelf: "auto",
+    color: "inherit"
   }
   return <div className="poster" style={style}>
     <div className="overlay" onClick={() => { listSimilar(config, movie, setMovies) }}>

src/objects/sidebar.tsx

@@ -5,7 +5,8 @@ export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
 }
 export function Sidebar({ movie }: SidebarProps) {
   const style = {
-
+    backgroundImage: "url(https://image.tmdb.org/t/p/w500/" + movie?.poster_path + ")",
+    backgroundSize: "cover",
   }
   return <div id="sidebar" style={style}>
     <h1>{movie?.title ?? "loading"}</h1>

src/objects/tmdb.tsx

@@ -48,10 +48,7 @@ export default {
     console.log(res)
     if (res.status === 200) {
       const array: Array<Movie> = res.data.results
-        .filter((e: Movie) => {
+      array.splice(18)
-          return e.poster_path
-        })
-      array.splice(19)
       array.unshift(movie)
       callback(array)
       return true