- Refactor of StreamsContext:

Added `featuredCategories` section,
Added personalised variations of HomePage contents;
- Removal of redundant/unused files from backend;
- Update to README: Updated to current method for deploying;
- Known bug: StreamsContext is being called before AuthContext, leading to unpersonalised streams & categories each time, even when logged in;

frontend/src/pages/HomePage.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import Navbar from "../components/Layout/Navbar";
-import ListRow from "../components/Layout/ListRow";
+import StreamListRow from "../components/Layout/StreamListRow";
 import { useNavigate } from "react-router-dom";
 import { useStreams } from "../context/StreamsContext";
 
 const HomePage: React.FC = () => {
-  const { featuredStreams } = useStreams();
+  const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
 
   const handleStreamClick = (streamerId: string) => {
@@ -19,24 +19,24 @@ const HomePage: React.FC = () => {
     >
       <Navbar />
 
-      <ListRow
+      <StreamListRow
         title="Live Now"
         description="Streamers that are currently live"
         streams={featuredStreams}
         onStreamClick={handleStreamClick}
       />
-      <ListRow
+      <StreamListRow
         title="Trending Categories"
         description="Categories that have been 'popping off' lately"
-        streams={featuredStreams}
-        onStreamClick={handleStreamClick}
+        streams={featuredCategories}
+        onStreamClick={() => {}} //TODO
       />
     </div>
   );
 };
 
 export const PersonalisedHomePage: React.FC = () => {
-  const { featuredStreams } = useStreams();
+  const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
 
   const handleStreamClick = (streamerId: string) => {
@@ -49,18 +49,18 @@ export const PersonalisedHomePage: React.FC = () => {
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
       <Navbar />
-
-      <ListRow
+      {/*//TODO Extract StreamListRow away to ListRow so that it makes sense for categories to be there also */}
+      <StreamListRow
         title="Live Now - Recommended"
         description="We think you might like these streams - Streamers recommended for you"
         streams={featuredStreams}
         onStreamClick={handleStreamClick}
       />
-      <ListRow
+      <StreamListRow
         title="Followed Categories"
         description="Current streams from your followed categories"
-        streams={featuredStreams}
-        onStreamClick={handleStreamClick}
+        streams={featuredCategories}
+        onStreamClick={() => {}} //TODO
       />
     </div>
   );

frontend/src/pages/VideoPage.tsx

@@ -25,7 +25,7 @@ const VideoPage: React.FC = () => {
     if (streamerName) {
       // Fetch stream data for this streamer
       console.log(`Loading stream for ${streamerName}`);
-      // fetch(`/api/streams/${streamerName}`)
+      // fetch(`/api/get_stream_data/${streamerName}`)
     }
   }, [streamerName]);