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;