Adding API for home page

main/src/Home.jsx

@@ -1,13 +1,33 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import "./styling/Home.css";
 import Navbar from "./components/Navbar.jsx";
 import HomeCards from "./components/HomeCards.jsx";
 import Footer from "./components/Footer.jsx";
+import Axios from "axios";
 
 export default function Home() {
+  const [catData, setCatData] = useState([]);
+
+  // Move these constants outside of the useEffect
+  const baseURL = "https://api.thecatapi.com/v1/images/search"; // Base URL
+  const apikey = "live_YUQtu7qoUFuzzmPawdXulxfge0eTVlkGdxaLgaI5m0vcROtnGDxSNkSrs3kVvuy3"; // Your API key
+  const limit = 10; // Limit for the number of images
+
+  // Constructed API URL with query parameters
+  const apiUrl = `${baseURL}?limit=${limit}&api_key=${apikey}`;
+
+  useEffect(() => {
+    Axios.get(apiUrl)
+      .then((res) => setCatData(res.data)) // Store the array of cat images
+      .catch((error) => console.log(error));
+  }, [apiUrl]); // Adding apiUrl as a dependency
+
+  // Extract URLs for the first two images, if available
+  const catImages = catData.slice(0, 2).map(cat => cat.url);
+
   return (
     <React.Fragment>
-      <Navbar bgColor="#F5F5F5" borderColor="#6BA8A9"/>
+      <Navbar bgColor="#F5F5F5" borderColor="#6BA8A9" />
 
       <div className="homeContainer">
         <div className="leftContainer">
@@ -23,7 +43,7 @@ export default function Home() {
               <img
                 className="searchIcon"
                 src="./main/public/assets/searchIcon.png"
-                alt=""
+                alt="Search Icon"
               />
             </a>
           </div>
@@ -32,35 +52,32 @@ export default function Home() {
         <div className="globeIconContainer">
           <img
             className="globeIcon"
-            src="./main/public/assets/globeIcon.png" /* Add the correct path to your globe icon */
+            src="./main/public/assets/globeIcon.png" 
             alt="Globe Icon"
           />
         </div>
 
         <div className="homeCardSection">
           <div className="topCard">
             <HomeCards
-              imgSrc="./main/public/assets/apples.jpg"
-              title="Apples"
-              text="Apples are a popular and nutritious fruit from the apple tree known for their crisp texture and sweet or tart flavor."
+              imgSrc={catImages[0] || "./main/public/assets/defaultCat.jpg"} 
+              title="Cat 1" // Soon will be replaced with the actual cat name and lead to cat's Wikipedia page
+              text="A cute cat image fetched from the Cat API."
               link="#"
-            />{" "}
+            />
           </div>
 
           <div className="bottomCard">
             <HomeCards
-              imgSrc="./main/public/assets/apples.jpg"
-              title="Apples"
-              text="Apples are a popular and nutritious fruit from the apple tree known for their crisp texture and sweet or tart flavor."
+              imgSrc={catImages[1] || "./main/public/assets/defaultCat.jpg"} 
+              title="Cat 2" // Soon will be replaced with the actual cat name and lead to cat's Wikipedia page
+              text="Another cute cat image fetched from the Cat API."
               link="#"
-            />{" "}
+            />
           </div>
         </div>
-
-
       </div>
       <Footer bgColor="#4F8787" />
-
     </React.Fragment>
   );
 }

package.json

@@ -14,7 +14,9 @@
   "author": "Isabella Sulisufi <i.sulisufi@gmail.com>",
   "license": "ISC",
   "dependencies": {
+    "axios": "1.7.7",
     "body-parser": "1.20.3",
+    "dotenv": "16.4.5",
     "ejs": "3.1.10",
     "express": "4.21.0",
     "pg": "8.12.0",