Major: Added Authentication Functionality, interfaces with backend;

Added new styles to HomePage & VideoPage;
Added AuthContext to persist logged_in status;

frontend/src/pages/HomePage.tsx

@@ -1,47 +1,23 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import Navbar from "../components/Layout/Navbar";
 import ListRow from "../components/Layout/ListRow";
-// import { data, Link } from "react-router-dom";
-
-const handleStreamClick = (streamId: string) => {
-  // Handle navigation to stream page
-  console.log(`Navigating to stream ${streamId}`);
-};
-
-interface StreamItem {
-  id: number;
-  title: string;
-  streamer: string;
-  viewers: number;
-  thumbnail?: string;
-}
+import { useNavigate } from "react-router-dom";
+import { useStreams } from "../context/StreamsContext";
 
 const HomePage: React.FC = () => {
-  const [featuredStreams, setFeaturedStreams] = useState<StreamItem[]>([]);
-  const [loggedInStatus, setLoggedInStatus] = useState<boolean>(false);
+  const { featuredStreams } = useStreams();
+  const navigate = useNavigate();
 
-  // ↓↓ runs twice when in development mode
-  useEffect(() => {
-    fetch("/api/get_login_status")
-      .then((response) => response.json())
-      .then((data) => {
-        setLoggedInStatus(data);
-        console.log(data);
-      });
-    fetch("/api/get_streams")
-      .then((response) => response.json())
-      .then((data: StreamItem[]) => {
-        setFeaturedStreams(data);
-        console.log(data);
-      });
-  }, []);
+  const handleStreamClick = (streamerId: string) => {
+    navigate(`/${streamerId}`);
+  };
 
   return (
     <div
       className="home-page bg-repeat"
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
-      <Navbar logged_in={loggedInStatus} />
+      <Navbar />
 
       <ListRow
         title="Live Now"
@@ -59,4 +35,35 @@ const HomePage: React.FC = () => {
   );
 };
 
+export const PersonalisedHomePage: React.FC = () => {
+  const { featuredStreams } = useStreams();
+  const navigate = useNavigate();
+
+  const handleStreamClick = (streamerId: string) => {
+    navigate(`/${streamerId}`);
+  };
+
+  return (
+    <div
+      className="home-page bg-repeat"
+      style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
+    >
+      <Navbar />
+
+      <ListRow
+        title="Live Now - Recommended"
+        description="We think you might like these streams - Streamers recommended for you"
+        streams={featuredStreams}
+        onStreamClick={handleStreamClick}
+      />
+      <ListRow
+        title="Followed Categories"
+        description="Current streams from your followed categories"
+        streams={featuredStreams}
+        onStreamClick={handleStreamClick}
+      />
+    </div>
+  );
+};
+
 export default HomePage;

frontend/src/pages/VideoPage.tsx

@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from "react";
+import Navbar from "../components/Layout/Navbar";
 import Button from "../components/Layout/Button";
 import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
+import { useParams } from "react-router-dom";
 
 const VideoPage: React.FC = () => {
   const [showCheckout, setShowCheckout] = useState(false);
   const showReturn = window.location.search.includes("session_id");
+  const { streamerName } = useParams<{ streamerName: string }>();
 
   useEffect(() => {
+    // Prevent scrolling when checkout is open
     if (showCheckout) {
       document.body.style.overflow = "hidden";
     } else {
@@ -17,17 +21,23 @@ const VideoPage: React.FC = () => {
       document.body.style.overflow = "unset";
     };
   }, [showCheckout]);
+  useEffect(() => {
+    if (streamerName) {
+      // Fetch stream data for this streamer
+      console.log(`Loading stream for ${streamerName}`);
+      // fetch(`/api/streams/${streamerName}`)
+    }
+  }, [streamerName]);
 
   return (
     <div className="text-5xl text-red-600 flex flex-col justify-evenly align-center h-screen text-center">
+      <Navbar />
+
       <h1>
         Hello! Welcome to the soon-to-be-awesome Video Page where you'll watch
         the best streams ever!
       </h1>
-      <Button
-        title="Payment Screen Test"
-        onClick={() => setShowCheckout(true)}
-      />
+      <Button onClick={() => setShowCheckout(true)}>Payment Screen Test</Button>
 
       {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />}
       {showReturn && <Return />}