wired up home page adjust image sizes

client/src/pages/home.js

@@ -1,11 +1,52 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Greeting from '../components/greeting';
+import CardHolder from '../components/cardHolder';
+import CharacterCard from '../components/characterCard';
+
+import CharacterService from '../services/characterService';
+const characterService = new CharacterService();
 
 export default function Home() {
+
+    const [characters, setCharacters] = useState([]);
+
+    const getCharacters = async () => {
+
+        const res = await characterService.getCharacters();
+        
+        const characters = await res.json();
+
+        return setCharacters(characters);
+
+    }
+
+    useEffect(() => {
+        getCharacters();
+    }, []);
+
+    const getCharacterCards = () => {
+
+        return characters.map(character => {
+
+            return (
+
+                <CharacterCard 
+                    character={character}
+                />
+
+            );
+
+        })
+
+    }
+
     return (
         <>
             <Greeting/>
+            <CardHolder>
+                {getCharacterCards()}
+            </CardHolder>
         </>
     );
 }