homepage image endpoint + random image on home screen

api/main_endpoints/routes/Image.js

@@ -0,0 +1,26 @@
+const express = require ('express');
+const router = express.Router();
+const { OK, NOT_FOUND } = require('../../util/constants').STATUS_CODES;
+
+//sample images (all from openverse.org) for now!! 
+const imageUrls = [
+    {url: "https://live.staticflickr.com/14/19329415_09b1eae0e8_b.jpg", alt: "2025 internship"},
+    {url: "https://live.staticflickr.com/2182/2377582173_89e0ca2f83_b.jpg", alt: "empty room"},
+    {url: "https://live.staticflickr.com/4045/4339898436_8283d8be54_b.jpg", alt: "full room"},
+    {url: "https://live.staticflickr.com/102/298812490_b57db6f58b_b.jpg", alt: "decorating room"},
+    {url: "https://live.staticflickr.com/204/468095839_bba3fc0e30_b.jpg", alt: "office"},
+    {url: "https://live.staticflickr.com/7208/14133744683_ae04e8f1e4_b.jpg", alt: "dev team collaboration"},
+];
+
+const getRandomImage = () => {
+    if(imageUrls.length === 0) return null;
+    return imageUrls[Math.floor(Math.random() * imageUrls.length)];
+}
+
+router.get('/Homepage', (req, res) => {
+    const image = getRandomImage();
+    if(!image) return res.sendStatus(NOT_FOUND);
+    res.status(OK).send(image);
+});
+
+module.exports = router;

src/APIFunctions/Image.js

@@ -0,0 +1,19 @@
+import { ApiResponse } from './ApiResponses';
+import { BASE_API_URL } from '../Enums';
+
+export async function getHomeImage() {
+    let status = new ApiResponse();
+    try {
+        const res = await fetch (BASE_API_URL + 'api/Image/Homepage');
+        if (res.ok) {
+            const result = await res.json();
+            status.responseData = result;
+        } else {
+            status.error = true;
+        }
+    } catch (err) {
+    status.responseData = err;
+    status.error = true;
+  }
+  return status;
+}

src/Pages/Home/Home.js

@@ -3,12 +3,16 @@ import Footer from '../../Components/Footer/Footer.js';
 import './Home.css';
 
 import { getAd } from '../../APIFunctions/Advertisement.js';
+import { getHomeImage } from '../../APIFunctions/Image.js';
 
 const Home = () => {
 
   const [message, setMessage] = useState('');
   const [showMessage, setShowMessage] = useState(false);
   const [showAll, setShowAll] = useState(false);
+  const [homeImageUrl, setHomeImageUrl] = useState('');
+  const [homeImageAlt, setHomeImageAlt] = useState('');
+
   async function getMessage() {
     try {
       const messageData = await getAd();
@@ -20,8 +24,22 @@ const Home = () => {
     }
   }
 
+  async function loadHomeImage() {
+    const DEFAULT_IMAGE = 'https://raw.githubusercontent.com/thebeninator/Clark/refs/heads/add_comp_homepage/public/images/compressed2.jpg';
+    const response = await getHomeImage();
+    let url = DEFAULT_IMAGE;
+    let alt = 'sce club image';
+    if (!response.error) {
+      url = response.responseData.url;
+      alt = response.responseData.alt;
+    }
+    setHomeImageUrl(url);
+    setHomeImageAlt(alt);
+  }
+
   useEffect(() => {
     getMessage();
+    loadHomeImage();
     setTimeout(() => setShowAll(true), 100);
   }, []);
 
@@ -91,11 +109,12 @@ const Home = () => {
         <div className={`fade-in-img w-full h-full p-12 overflow-hidden xl:w-3/5${showAll ? ' show' : ''}`}>
           <img
             className="w-full mx-auto transform md:w-4/5 rounded-xl"
-            src="https://raw.githubusercontent.com/thebeninator/Clark/refs/heads/add_comp_homepage/public/images/compressed2.jpg"
+            src={homeImageUrl}
+            alt={homeImageAlt}
           />
-        </div>
+        </div> 
       </div>
-
+  
       <Footer />
     </div>
   );