Change "books/books" to "movie/movies"

src/App.js

@@ -118,7 +118,7 @@ const signIn = (email, password) => {
 
 // function to get data
 const readData = async () => {
-  const querySnapshot = await getDocs( collection(FBdb, "books") )
+  const querySnapshot = await getDocs( collection(FBdb, "movies") )
   let listdata = []
   querySnapshot.forEach( (doc) => {
     let item = doc.data()

src/components/ItemImage.js

@@ -10,7 +10,7 @@ export function ItemImage ( props ) {
 
   useEffect( () => {
     if( props.source ) {
-      const imgref = ref( storage, `book_covers/${props.source}`)
+      const imgref = ref( storage, `movie_covers/${props.source}`)
       getDownloadURL( imgref )
       .then( (url) => setImage(url) )
       .catch( err => console.log(err) )

src/pages/Home.js

@@ -8,22 +8,22 @@ import { useState, useEffect, useContext } from "react"
 import { ItemImage } from "../components/ItemImage"
 
 export function Home(props) {
-    const [books,setBooks] = useState([])
+    const [movies,setMovies] = useState([])
 
     useEffect(() => {
       console.log( props.items )
-      setBooks( props.items )
+      setMovies( props.items )
     }, [props.items])
   
   
   
-    const ItemCards = books.map( ( book, itemkey ) => {
+    const ItemCards = movies.map( ( movie, itemkey ) => {
       return(
         <Col md={4}>
           <Card key={itemkey}>
-            <ItemImage source={ book.cover_image} />
+            <ItemImage source={ movie.cover_image} />
             <Card.Body>
-              <Card.Title>{ book.title }</Card.Title>
+              <Card.Title>{ movie.title }</Card.Title>
             </Card.Body>
           </Card>
         </Col>