SSR index page content

frontend/src/app/genres/[genre]/page.js

@@ -109,7 +109,7 @@ export default function GenrePage({ params }) {
         {genreItems && (
           <>
             {genreItems.movies && genreItems.movies.length > 0 && (
-              <ScrollSection title="Movies">
+              <ScrollSection title="Movies" link={"/movies"}>
                 {genreItems.movies.map((item, index) => (
                   <div key={index} className="genre-item-card">
                     <Link href={`/movie/${item[0]}`} passHref>
@@ -138,7 +138,7 @@ export default function GenrePage({ params }) {
             )}
 
             {genreItems.series && genreItems.series.length > 0 && (
-              <ScrollSection title="TV Shows">
+              <ScrollSection title="TV Shows" link={"/tvshows"}>
                 {genreItems.series.map((item, index) => (
                   <div key={index} className="genre-item-card">
                     <Link href={`/series/${item[0]}`} passHref>

frontend/src/app/index.css

@@ -3,8 +3,8 @@
 }
 
 @media (orientation: landscape) {
-  .index-page-container {
-    max-width: 80dvw;
+  .index-page-content {
+    padding: 50px;
   }
 }
 
@@ -16,6 +16,7 @@
 
 .index-page-content{
   width: 100dvw;
+  padding: 10px;
   z-index: 1;
 }
 

frontend/src/app/page.js

@@ -1,23 +1,41 @@
 import HeroSection from "@/components/shared/Sections/HeroSection";
 import "./index.css";
 import ScrollSection from "@/components/shared/Sections/ScrollSection";
+import apiClient from "@/api/apiClient";
+import MovieCard from "@/components/shared/Card/MovieCard";
+import TvShowCard from "@/components/shared/Card/TvShowCard";
 
-export const metadata = {
-  title: "Home",
-  icons: {
-    icon: '/favicon.ico"',
-  },
-};
+// Fetch recent movies and TV shows
+async function fetchRecent() {
+  const data = await apiClient.getRecent(10);
+  return data;
+}
+
+const HomePage = async () => {
+  const { movies, series } = await fetchRecent();
 
-const HomePage = () => {
   return (
     <div className="app-container">
       <div className="index-page">
         <div className="index-page-container">
           <HeroSection />
           <div className="index-page-content">
-            <ScrollSection title="Popular TV Shows"></ScrollSection>
-            <ScrollSection title="Trending Movies"></ScrollSection>
+            <ScrollSection title="Movies" link={"/movies"}>
+              {movies.map((movie, index) => (
+                <MovieCard
+                  key={index}
+                  title={movie[0]}
+                />
+              ))}
+            </ScrollSection>
+            <ScrollSection title="TV Shows" link={"/tvshows"}>
+              {series.map((show, index) => (
+                <TvShowCard
+                  key={index}
+                  title={show[0]}
+                />
+              ))}
+            </ScrollSection>
           </div>
         </div>
       </div>

frontend/src/app/search/page.js

@@ -39,14 +39,14 @@ const SearchPage = async ({ searchParams }) => {
       {error && <div className="error-message">{error}</div>}
       <div className="results-container">
         {results.films.length > 0 && (
-          <ScrollSection title={"Movies"}>
+          <ScrollSection title={"Movies"} link={"/movies"}>
             {results.films.map((film, index) => (
               <MovieCard key={index} title={film} />
             ))}
           </ScrollSection>
         )}
         {results.tv_series.length > 0 && (
-          <ScrollSection title={"TV Series"}>
+          <ScrollSection title={"TV Series"} link={"/tvshows"}>
             {results.tv_series.map((series, index) => (
               <TvShowCard key={index} title={series} />
             ))}

frontend/src/components/shared/Card/MovieCard.js

@@ -1,3 +1,5 @@
+'use server';
+
 import Image from "next/image";
 import apiClient from "@/api/apiClient";
 import "./Card.css";

frontend/src/components/shared/Card/TvShowCard.js

@@ -1,3 +1,5 @@
+'use server';
+
 import Image from 'next/image';
 import apiClient from '@/api/apiClient';
 import SkeletonLoader from '@/skeletons/Card/movieCard';

frontend/src/components/shared/Sections/ScrollSection.js

@@ -1,10 +1,11 @@
 "use client";
 import { useRef, useState, useEffect } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCaretLeft, faCaretRight } from "@fortawesome/free-solid-svg-icons";
+import { faAngleRight, faCaretLeft, faCaretRight } from "@fortawesome/free-solid-svg-icons";
 import "./ScrollSection.css";
+import Link from "next/link";
 
-const ScrollSection = ({ title, children }) => {
+const ScrollSection = ({ title, children, link=null }) => {
   const scrollRef = useRef(null);
   const [canScrollLeft, setCanScrollLeft] = useState(false);
   const [canScrollRight, setCanScrollRight] = useState(true);
@@ -51,7 +52,15 @@ const ScrollSection = ({ title, children }) => {
   return (
     <section className="scroll-section">
       <div className="scroll-section-controls">
+      {link ? (
+        <Link href={link}>
+          <h2>
+            {title} <FontAwesomeIcon icon={faAngleRight} size="lg" />
+          </h2>
+        </Link>
+      ) : (
         <h2>{title}</h2>
+      )}
         <div className="scroll-controls">
           <button
             onClick={() => scroll("left")}

frontend/src/lib/LoadBalancer.js

@@ -69,8 +69,8 @@ class LoadBalancerAPI {
     return this._getRequest('/api/get/series/all');
   }
 
-  async getRecent() {
-    return this._getRequest('/api/get/recent');
+  async getRecent(limit = 5) {
+    return this._getRequest(`/api/get/recent?limit=${limit}`);
   }
 
   async getGenreItems(genres, mediaType = null, limit = 5) {