- 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/components/Layout/StreamListRow.tsx

@@ -8,29 +8,29 @@ interface StreamItem {
   thumbnail?: string;
 }
 
-interface ListEntryProps {
+interface StreamListEntryProps {
   stream: StreamItem;
   onClick?: () => void;
 }
 
-interface ListRowProps {
+interface StreamListRowProps {
   title: string;
   description: string;
   streams: StreamItem[];
-  onStreamClick?: (streamerId: string) => void;
+  onStreamClick?: (streamId: string) => void;
 }
 
 // Individual stream entry component
-const ListEntry: React.FC<ListEntryProps> = ({ stream, onClick }) => {
+const StreamListEntry: React.FC<StreamListEntryProps> = ({ stream, onClick }) => {
   return (
     <div
-      className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 border border-gray-100 hover:border-purple-500 hover:border-b-4 hover:border-l-4 transition-all"
+      className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
       onClick={onClick}
     >
       <div className="relative w-full pt-[56.25%]">
         {stream.thumbnail ? (
           <img
-            src={`images/` + stream.thumbnail}
+            src={`images/`+stream.thumbnail}
             alt={stream.title}
             className="absolute top-0 left-0 w-full h-full object-cover"
           />
@@ -48,24 +48,24 @@ const ListEntry: React.FC<ListEntryProps> = ({ stream, onClick }) => {
 };
 
 // Row of stream entries
-const ListRow: React.FC<ListRowProps> = ({
+const StreamListRow: React.FC<StreamListRowProps> = ({
   title,
   description,
   streams,
   onStreamClick,
 }) => {
   return (
-    <div className="flex flex-col space-y-4 py-6 mx-4">
+    <div className="flex flex-col space-y-4 py-6">
       <div className="space-y-1">
         <h2 className="text-2xl font-bold">{title}</h2>
         <p className="text-gray-400">{description}</p>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {streams.map((stream) => (
-          <ListEntry
+          <StreamListEntry
             key={stream.id}
             stream={stream}
-            onClick={() => onStreamClick?.(stream.streamer)}
+            onClick={() => onStreamClick?.(stream.id)}
           />
         ))}
       </div>
@@ -73,4 +73,4 @@ const ListRow: React.FC<ListRowProps> = ({
   );
 };
 
-export default ListRow;
+export default StreamListRow;