update

frontend/package-lock.json

@@ -8,6 +8,11 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-regular-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
+        "axios": "^1.7.4",
         "next": "14.2.5",
         "react": "^18",
         "react-dom": "^18"
@@ -87,6 +92,59 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -833,6 +891,11 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -857,6 +920,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.4.tgz",
+      "integrity": "sha512-DukmaFRnY6AzAALSH4J2M3k6PkaC+MfaAGdEERRWcC9q3/TWQwLpHR8ZRLKTdQ3aBDL64EdluRDjJqKw+BPZEw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -1048,6 +1121,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1235,6 +1319,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2013,6 +2105,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2038,6 +2149,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3035,6 +3159,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3194,7 +3337,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3664,13 +3806,17 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3726,8 +3872,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/read-cache": {
       "version": "1.0.0",

frontend/package.json

@@ -9,14 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "axios": "^1.7.4",
+    "next": "14.2.5",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.5"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.5"
+    "eslint-config-next": "14.2.5",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
   }
 }

frontend/src/api/apiClient.js

@@ -0,0 +1,6 @@
+import { LoadBalancerAPI } from '@/lib/LoadBalancer';
+import config from '@/lib/config';
+
+const apiClient = new LoadBalancerAPI(config.apiBaseUrl);
+
+export default apiClient;

frontend/src/api/searchApi.js

@@ -0,0 +1,21 @@
+// lib/searchApi.js or utils/searchApi.js based on your structure
+import axios from 'axios';
+import config from '@/lib/config'; // Adjust path if necessary
+
+const searchUrl = config.searchUrl;
+
+/**
+ * Perform a search query.
+ * @param {string} query - The search query.
+ * @returns {Promise<Object>} - The search results.
+ */
+export const search = async (query) => {
+    try {
+        const response = await axios.post(searchUrl, { query });
+        console.log(response);
+        return response.data;
+    } catch (error) {
+        console.error("Error performing search:", error);
+        throw error; // Rethrow the error to be handled by the caller
+    }
+};

frontend/src/app/films/filmsPage.css

@@ -0,0 +1,78 @@
+.films-page-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    max-width: 1300px;
+    margin: 0 auto;
+  }
+  
+  .films-page {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 50px;
+    justify-items: center;
+    align-items: start;
+    width: 100%;
+  }
+  
+  /* Media query for smaller screens */
+  @media (max-width: 768px) {
+    .films-page {
+      grid-template-columns: repeat(auto-fit, minmax(150px, .1fr));
+      gap: 10px;
+    }
+  }
+  
+  @media (max-width: 480px) {
+    .films-page {
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    }
+  }
+  
+  .pagination-controls {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .pagination-button {
+    background-color: #2c2b2b;
+    color: #f5f5f5; 
+    border: none;
+    border-radius: 5px;
+    padding: 5px; 
+    width: 50px;
+    text-align: center;
+    margin: 0 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+  }
+  
+  .pagination-button:hover {
+    background-color: #555; 
+    transform: scale(1.05); 
+  }
+  
+  .pagination-button:disabled {
+    background-color: #555; 
+    cursor: not-allowed;
+  }
+  
+  .page-info {
+    font-size: 1.2em;
+    color: #f5f5f5;
+  }
+  
+  /* Handle animations on page load */
+@keyframes pageLoad {
+  from {
+      opacity: 0;
+  }
+  to {
+      opacity: 1;
+  }
+}
+.films-page-container {
+  animation: pageLoad 1s ease;
+}

frontend/src/app/films/page.js

@@ -0,0 +1,87 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import apiClient from '@/api/apiClient'; // Updated for Next.js absolute import
+import FilmCard from '@/components/film/card'; // Updated for Next.js absolute import
+import { useFilmContext } from '@/context/FilmContext'; // Updated for Next.js absolute import
+import './filmsPage.css'; // Updated for Next.js absolute import
+
+import { faCaretLeft } from '@fortawesome/free-solid-svg-icons';
+import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
+
+const FILMS_PER_PAGE = 2;
+
+export default function FilmsPage() {
+    const { films, setFilms } = useFilmContext();
+    const [currentPage, setCurrentPage] = useState(1);
+
+    useEffect(() => {
+        if (films.length === 0) {
+            apiClient.getAllFilms()
+                .then(response => {
+                    console.log('All films:', response);
+                    setFilms(response.map(film => film.replace('films/', '')));
+                })
+                .catch(error => {
+                    console.error('Failed to get all films:', error);
+                });
+        }
+    }, [films, setFilms]);
+
+    const startIndex = (currentPage - 1) * FILMS_PER_PAGE;
+    const currentFilms = films.slice(startIndex, startIndex + FILMS_PER_PAGE);
+
+    const handleNextPage = () => {
+        setCurrentPage(prevPage => prevPage + 1);
+    };
+
+    const handlePrevPage = () => {
+        setCurrentPage(prevPage => Math.max(prevPage - 1, 1));
+    };
+
+    // Calculate total number of pages
+    const totalPages = Math.ceil(films.length / FILMS_PER_PAGE);
+
+    // Determine if the previous and next buttons should be enabled
+    const isPrevButtonEnabled = currentPage > 1;
+    const isNextButtonEnabled = currentPage < totalPages;
+
+    return (
+        <div className="films-page-container">
+            <div className="pagination-controls">
+                <button 
+                    onClick={handlePrevPage} 
+                    disabled={!isPrevButtonEnabled}
+                    className="pagination-button"
+                >
+                    <FontAwesomeIcon 
+                        icon={faCaretLeft}
+                        size="2xl"
+                        color='#e88f36'
+                        bounce={isPrevButtonEnabled}
+                    />
+                </button>
+                <span className="page-info">
+                    {currentPage} - {totalPages} 
+                </span>
+                <button 
+                    onClick={handleNextPage} 
+                    disabled={!isNextButtonEnabled}
+                    className="pagination-button"
+                >
+                    <FontAwesomeIcon 
+                        icon={faCaretRight}
+                        size="2xl"
+                        color='#e88f36'
+                        bounce={isNextButtonEnabled} 
+                    />
+                </button>
+            </div>
+            <div className="films-page">
+                {currentFilms.map(title => (
+                    <FilmCard key={title} title={title} />
+                ))}
+            </div>
+        </div>
+    );
+}

frontend/src/app/layout.js

@@ -1,17 +1,40 @@
 import { Inter } from "next/font/google";
 import "./globals.css";
+import Navbar from "../components/Navbar";
+import { FilmProvider } from "@/context/FilmContext";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+config.autoAddCss = false;
+import {
+  faEllipsisVertical,
+  faPlay,
+  faChevronLeft,
+  faCaretDown,
+  faCaretLeft,
+  faCaretRight,
+  faMagnifyingGlass,
+  faHome,
+  faFilm,
+  faTv,
+} from "@fortawesome/free-solid-svg-icons";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Create Next App",
+  title: "Home",
   description: "Generated by create next app",
 };
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <header>
+          <Navbar />
+        </header>
+        <FilmProvider>{children}</FilmProvider>
+      </body>
     </html>
   );
 }

frontend/src/app/page.js

@@ -1,113 +1,43 @@
-import Image from "next/image";
+'use client';
+import { useEffect, useState } from 'react';
+import apiClient from "@/api/apiClient";
 
 export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.js</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
+  const [films, setFilms] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
+  useEffect(() => {
+    async function fetchFilms() {
+      try {
+        const all_films = await apiClient.getAllFilms();
+        setFilms(all_films);
+        console.log(all_films);
+      } catch (error) {
+        setError('Failed to load films.');
+        console.error('Error fetching films:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
 
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
+    fetchFilms();
+  }, []);
 
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>{error}</p>;
 
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+  return (
+    <>
+      <div>
+        <h1>Welcome to the Streaming Service</h1>
+        <p>Explore our collection of films and TV shows.</p>
+        <ul>
+          {films.map((film, index) => (
+            <li key={index}>{film.title}</li>
+          ))}
+        </ul>
       </div>
-    </main>
+    </>
   );
 }

frontend/src/app/player/film/[title]/page.js

@@ -0,0 +1,16 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+
+export default function FilmPlayer() {
+  const { title } = useParams();
+
+  return (
+    <>
+      <div>
+        <h1 className='text-white'>Film Player - {title}</h1>
+        {/* Add film player component here */}
+      </div>
+    </>
+  );
+}

frontend/src/app/player/tvshow/[title]/[season]/[episode]/page.js

@@ -0,0 +1,16 @@
+"use client";
+
+import { useParams } from "next/navigation";
+
+export default function TVShowPlayer() {
+  const { title, season, episode } = useParams();
+
+  return (
+    <>
+      <div>
+        <h1 className="text-white">TV Show Player - {title + season + episode}</h1>
+        {/* Add TV show player component here */}
+      </div>
+    </>
+  );
+}

frontend/src/app/search/page.js

@@ -0,0 +1,106 @@
+"use client"; // Indicate that this file is a client component in Next.js
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { search } from "@/api/searchApi"; // Ensure the path is correct for your API
+import "./searchPage.css";
+
+const SearchPage = () => {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState({ films: [], tv_series: [] });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+
+  const router = useRouter(); // Use Next.js useRouter for navigation
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      if (debouncedQuery) {
+        handleSearch();
+      }
+    }, 200); // Delay of 200ms
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [debouncedQuery]);
+
+  const handleSearch = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await search(debouncedQuery);
+      setResults(data);
+    } catch (err) {
+      setError("Failed to fetch search results.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e) => {
+    setQuery(e.target.value);
+    setDebouncedQuery(e.target.value);
+  };
+
+  const handleItemClick = (path) => {
+    router.push(path); // Use router.push for navigation
+  };
+
+  return (
+    <div className="search-page">
+      <div className="search-container">
+        <input
+          type="text"
+          value={query}
+          onChange={handleChange}
+          placeholder="Search for films or TV shows..."
+          className="search-input"
+        />
+        {loading && (
+          <div className="loading-indicator">
+            <div className="spinner"></div>
+          </div>
+        )}
+      </div>
+      {error && <div className="error-message">{error}</div>}
+      <div className="results-container">
+        {results.films.length > 0 && (
+          <div className="results-section">
+            <h2>Films</h2>
+            <ul className="results-list">
+              {results.films.map((film, index) => (
+                <li
+                  key={index}
+                  className="result-item"
+                  onClick={() => handleItemClick(`/film/${encodeURIComponent(film)}`)}
+                >
+                  {film}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+        {results.tv_series.length > 0 && (
+          <div className="results-section">
+            <h2>TV Series</h2>
+            <ul className="results-list">
+              {results.tv_series.map((series, index) => (
+                <li
+                  key={index}
+                  className="result-item"
+                  onClick={() => handleItemClick(`/tvshow/${encodeURIComponent(series)}`)}
+                >
+                  {series}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SearchPage;

frontend/src/app/search/searchPage.css

@@ -0,0 +1,189 @@
+.search-page {
+    background-color: #121212;
+    color: #ffffff;
+    min-height: 85vh;
+    transition: background-color 0.3s ease;
+    font-family: "Signika", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings: "GRAD" 0;
+}
+
+/* Search container styles */
+.search-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px;
+    transition: transform 0.3s ease;
+}
+
+/* Input field styling with animation */
+.search-input {
+    width: 100%;
+    max-width: 600px;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #444;
+    border-radius: 5px;
+    background-color: #1e1e1e;
+    color: #ffffff;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: #ff6f00;
+    box-shadow: 0 0 8px rgba(255, 111, 0, 0.6);
+    transform: scale(1.02);
+}
+
+/* Loading indicator animation */
+.loading-indicator {
+    margin-top: 10px;
+    font-size: 18px;
+    color: #ff6f00;
+    opacity: 0;
+    animation: fadeIn 1s forwards;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Error message styling */
+.error-message {
+    color: #ff6f00;
+    text-align: center;
+    margin-top: 20px;
+    animation: bounce 1s infinite;
+}
+
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% {
+        transform: translateY(0);
+    }
+    40% {
+        transform: translateY(-10px);
+    }
+    60% {
+        transform: translateY(-5px);
+    }
+}
+
+/* Results container styles */
+.results-container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Results section styles */
+.results-section {
+    width: 100%;
+    max-width: 800px;
+    margin-bottom: 20px;
+    transition: opacity 0.3s ease;
+}
+
+.results-section h2 {
+    font-size: 24px;
+    border-bottom: 2px solid #444;
+    padding-bottom: 10px;
+    margin-bottom: 15px;
+    color: #ff6f00;
+    animation: fadeIn 1s ease;
+}
+
+/* Results list styles */
+.results-list {
+    list-style-type: none;
+    padding: 0;
+}
+
+.result-item {
+    background-color: #1e1e1e;
+    border: 1px solid #444;
+    border-radius: 5px;
+    margin-bottom: 10px;
+    padding: 10px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    animation: slideIn 0.5s ease;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.result-item:hover {
+    background-color: #333;
+    transform: scale(1.02);
+}
+
+/* Link styling */
+.result-link {
+    text-decoration: none;
+    color: #ffffff;
+    font-size: 18px;
+    transition: color 0.3s ease;
+}
+
+.result-link:hover {
+    text-decoration: underline;
+    color: #ff6f00;
+}
+
+/* Handle animations on page load */
+@keyframes pageLoad {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+.search-page {
+    animation: pageLoad 1s ease;
+}
+
+/* Loading indicator styles */
+.loading-indicator {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    font-size: 18px;
+    color: #ff6f00;
+}
+
+.loading-indicator .spinner {
+    width: 20px;
+    height: 20px;
+    border: 4px solid #ff6f00;
+    border-top: 4px solid transparent;
+    border-radius: 50%;
+    margin-right: 10px;
+    animation: spin 1s linear infinite;
+}
+
+/* Spinner animation */
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}

frontend/src/app/tvshows/page.js

@@ -0,0 +1,11 @@
+export default function TVShows() {
+  return (
+    <>
+      <div>
+        <h1>TV Shows</h1>
+        <p className='text-white'>Browse our TV show collection.</p>
+        {/* Add TV show list here */}
+      </div>
+    </>
+  );
+}

frontend/src/components/Navbar.css

@@ -0,0 +1,89 @@
+/* Container for the navbar and underline */
+nav {
+    position: relative;
+  }
+  
+  .nav-links {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    position: relative; /* Ensure it's positioned relative for absolute positioning of underlines */
+  }
+  
+  @import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Rubik+Burned&family=Rubik+Marker+Hatch&family=Rubik+Maze&family=Rubik+Microbe&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+  
+  .nav-link {
+    text-decoration: none;
+    color: #b0b0b0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px;
+    height: 50px;
+    position: relative;
+    font-size: 1em;
+    font-family: "Signika", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings: "GRAD" 0;
+    font-weight: 600;
+    padding: 0 15px;
+    transition: color 0.3s ease, transform 0.3s ease;
+    box-sizing: border-box;
+  }
+  
+  .nav-link-menue {
+    text-decoration: none;
+    color: #b0b0b0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    padding: 11px 10px;
+    transition: color 0.3s ease, transform 0.3s ease;
+    box-sizing: border-box;
+  }
+  
+  .nav-link-menue.active {
+    color: #ffffff;
+  }
+  
+  .nav-link-menue:hover {
+    color: #ffffff;
+    transform: translateY(-2px);
+  }
+  
+  .nav-link.active {
+    color: #ffffff;
+  }
+  
+  .nav-link:hover {
+    color: #ffffff;
+    transform: translateY(-2px);
+  }
+  
+  .underline {
+    position: absolute;
+    bottom: -3px; /* Adjust this to position the underline correctly at the bottom of the navbar */
+    height: 3px;
+    transition: width 0.3s ease, left 0.3s ease;
+  }
+  
+  .active-underline {
+    background-color: #e88f36; /* Warm orange underline for active route */
+  }
+  
+  .hover-underline {
+    background-color: #007bc7; /* Bright blue underline for hover effect */
+  }
+  
+  /* Media Queries for Mobile Devices */
+  @media (max-width: 768px) {
+    .nav-link {
+      width: 70px;
+      padding: 10px;
+    }
+  }
+  

frontend/src/components/Navbar.js

@@ -0,0 +1,119 @@
+"use client";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHome, faMagnifyingGlass, faFilm, faTv, faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import "./Navbar.css"; // Ensure CSS is in the correct location
+
+function Navbar() {
+  const pathname = usePathname(); // Use Next.js usePathname
+  const [hoveredLink, setHoveredLink] = useState(null);
+  const [prevLink, setPrevLink] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModalClose = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleModalOpen = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  useEffect(() => {
+    const activeLink = document.querySelector(
+      `.nav-link[href="${pathname}"]`
+    );
+    if (activeLink) {
+      setPrevLink(activeLink);
+    }
+  }, [pathname]);
+
+  const handleMouseEnter = (e) => {
+    setPrevLink(document.querySelector(".nav-link.active"));
+    setHoveredLink(e.target);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredLink(null);
+  };
+
+  return (
+    <nav>
+      <ul className="nav-links">
+        <li>
+          <Link
+            href="/"
+            className={`nav-link ${pathname === "/" ? "active" : ""}`}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <FontAwesomeIcon icon={faHome} size="lg" />
+          </Link>
+        </li>
+        <li>
+          <Link
+            href="/search"
+            className={`nav-link ${pathname === "/search" ? "active" : ""}`}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <FontAwesomeIcon icon={faMagnifyingGlass} size="lg" />
+          </Link>
+        </li>
+        <li>
+          <Link
+            href="/films"
+            className={`nav-link ${pathname === "/films" ? "active" : ""}`}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <FontAwesomeIcon icon={faFilm} size="lg" />
+          </Link>
+        </li>
+        <li>
+          <Link
+            href="/tvshows"
+            className={`nav-link ${pathname === "/tvshows" ? "active" : ""}`}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <FontAwesomeIcon icon={faTv} size="lg" />
+          </Link>
+        </li>
+        <li>
+          <FontAwesomeIcon
+            className="nav-link-menue"
+            icon={faCaretDown}
+            size="xl"
+            onClick={handleModalOpen}
+          />
+        </li>
+      </ul>
+      <span
+        className="underline active-underline"
+        style={
+          prevLink
+            ? {
+                width: prevLink.offsetWidth,
+                left: prevLink.offsetLeft,
+              }
+            : {}
+        }
+      />
+      <span
+        className="underline hover-underline"
+        style={
+          hoveredLink
+            ? {
+                width: hoveredLink.offsetWidth,
+                left: hoveredLink.offsetLeft,
+              }
+            : {}
+        }
+      />
+    </nav>
+  );
+}
+
+export default Navbar;

frontend/src/components/film/card.css

@@ -0,0 +1,193 @@
+.film-card {
+    box-sizing: border-box;
+    width: 220px;
+    height: 390px;
+    border: 1px solid #333; 
+    background-color: #2c2c2c;
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+    transition: background-color 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 10px;
+    position: relative;
+}
+
+.film-card:hover {
+    background-color: #1e1e1e; 
+}
+
+.film-card-image {
+    width: 100%;
+    object-fit: cover;
+    border-bottom: 3px solid #f8b525;
+    transition: transform 0.5s ease; 
+    position: relative; 
+    z-index: 1;
+}
+
+.film-card:hover .film-card-image {
+    transform: scale(1.1);
+}
+
+.film-card-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, rgba(18, 36, 65, 0) 0%, rgba(2, 12, 30, 0.658) 80%); 
+    opacity: .6;
+    transition: opacity 0.3s ease;
+    z-index: 2;
+}
+
+.film-card:hover .film-card-overlay {
+    opacity: 1;
+}
+
+.film-card-info {
+    height: 100%;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.807); 
+    border-top: 1px solid #333; 
+    z-index: 3;
+    position: relative;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Pacifico&family=Rubik+Burned&family=Rubik+Marker+Hatch&family=Rubik+Maze&family=Rubik+Microbe&family=Rubik:ital,wght@0,300..900;1,300..900&family=Signika:[email protected]&display=swap');
+
+.film-card-title {
+    margin: 0;
+    font-family: "Signika", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings:
+      "GRAD" 0;
+    font-weight: 600;
+    color: #f5f5f5; 
+    width: 100%;
+    box-sizing: border-box; 
+    text-align: center; 
+    white-space: nowrap; 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+}
+
+.film-card-year {
+    margin: 0;
+    font-size: .9em;
+    font-family: "Signika", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings:
+      "GRAD" 0;
+    font-weight: 600; 
+    color: #949494; 
+    border: none; 
+    width: 100%;
+    box-sizing: border-box; 
+    text-align: center; 
+    white-space: nowrap; 
+    overflow: hidden; 
+    text-overflow: ellipsis; 
+}
+
+.spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+}
+
+.spinner div {
+    width: 15px;
+    height: 15px;
+    background-color: #ff8c00;
+    border-radius: 50%;
+    animation: spin 1s infinite ease-in-out;
+    margin: 0 5px;
+}
+
+.spinner div:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.spinner div:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+@keyframes spin {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+}
+
+.film-card.loading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-color: #2c2c2c;
+    border: 1px solid #333;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+    width: 250px;
+    height: 420px;
+    position: relative;
+}
+
+.film-card.loading::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 250px;
+    height: 420px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 15px;
+    z-index: 1;
+}
+
+.film-card.loading .spinner {
+    margin-bottom: 20px;
+}
+
+.film-card.loading .film-card-title {
+    font-size: 1em;
+    color: #f5f5f5;
+    width: 100%;
+    text-align: center;
+    z-index: 2;
+    margin-top: 10px;
+}
+
+/* Media Queries for Mobile Devices */
+@media (max-width: 768px) {
+    .film-card {
+        width: 150px;
+        height: 265px;
+        margin: 10px 0;
+    }
+    .film-card.loading{
+        width: 150px;
+        height: 265px;
+        margin: 10px 0;
+    }
+
+    .film-card-info {
+        padding: 5px;
+    }
+
+    .film-card-title, .film-card-year {
+        font-size: 0.8em;
+        
+    }
+}

frontend/src/components/film/card.js

@@ -0,0 +1,92 @@
+import { useEffect, useState } from "react";
+import { useRouter } from 'next/navigation'; // Use the correct import for Next.js 13
+import apiClient from "@/api/apiClient";
+import './card.css';
+
+// Spinner component
+const Spinner = () => (
+  <div className="spinner">
+    <div className="spinner-bounce1"></div>
+    <div className="spinner-bounce2"></div>
+    <div className="spinner-bounce3"></div>
+  </div>
+);
+
+export default function FilmCard({ title }) {
+  const [metadata, setMetadata] = useState(null);
+  const router = useRouter(); // Use Next.js router
+
+  useEffect(() => {
+    const fetchMetadata = async () => {
+      try {
+        const response = await apiClient.getFilmMetadataByTitle(title);
+        const filmData = response.data; // Adjust based on actual API response
+        console.log(filmData);
+        setMetadata(filmData);
+      } catch (error) {
+        console.error("Failed to fetch metadata:", error);
+        setMetadata({ error: "Failed to load metadata" });
+      }
+    };
+
+    fetchMetadata();
+  }, [title]);
+
+  const handleCardClick = () => {
+    router.push(`/film/${title}`); // Use Next.js router
+  };
+
+  const findEnglishTranslation = (translations) => {
+    if (translations && Array.isArray(translations.nameTranslations)) {
+      const primaryEngTranslation = translations.nameTranslations.find(
+        translation => translation.language === 'eng' && translation.isPrimary
+      );
+
+      if (primaryEngTranslation) {
+        return primaryEngTranslation.name;
+      }
+
+      const engTranslation = translations.nameTranslations.find(
+        translation => translation.language === 'eng'
+      );
+
+      if (engTranslation) {
+        return engTranslation.name;
+      }
+    }
+    return null;
+  };
+
+  const eng_title = metadata?.translations ? 
+    (findEnglishTranslation(metadata.translations) || `${metadata?.name} (${metadata?.year})`) : 
+    `${metadata?.name} (${metadata?.year})` || title;
+  
+  const imageUrl = metadata?.artworks?.find(artwork => artwork.type === 14)?.thumbnail || "";
+  const year = metadata?.year;
+
+  if (metadata === null)
+    return (
+      <div className="film-card loading">
+        <Spinner />
+        <div className="film-card-title">Loading...</div>
+      </div>
+    );
+
+  if (metadata.error)
+    return (
+      <div className="film-card error">
+        <p className="film-card-title">Error loading metadata</p>
+      </div>
+    );
+
+  return (
+    <div className="film-card" onClick={handleCardClick}>
+      <img src={imageUrl} alt={eng_title} className="film-card-image" />
+      <div className="film-card-overlay"></div>
+      <div className="film-card-info">
+        <p className="film-card-title">{eng_title}</p>
+        <p className="film-card-year">{year}</p>
+      </div>
+    </div>
+  );
+}

frontend/src/context/FilmContext.js

@@ -0,0 +1,17 @@
+'use client';
+
+import { createContext, useState, useContext } from 'react';
+
+const FilmContext = createContext();
+
+export const useFilmContext = () => useContext(FilmContext);
+
+export const FilmProvider = ({ children }) => {
+    const [films, setFilms] = useState([]);
+
+    return (
+        <FilmContext.Provider value={{ films, setFilms }}>
+            {children}
+        </FilmContext.Provider>
+    );
+};

frontend/src/context/TvshowContext.js

@@ -0,0 +1,18 @@
+'use client';
+import React, { createContext, useContext, useState } from 'react';
+
+const TvShowsContext = createContext();
+
+export const TvShowsProvider = ({ children }) => {
+    const [tvshows, setTvshows] = useState([]);
+
+    return (
+        <TvShowsContext.Provider value={{ tvshows, setTvshows }}>
+            {children}
+        </TvShowsContext.Provider>
+    );
+};
+
+export const useTvShowsContext = () => {
+    return useContext(TvShowsContext);
+};

frontend/src/lib/LoadBalancer.js

@@ -0,0 +1,120 @@
+class LoadBalancerAPI {
+    constructor(baseURL) {
+      this.baseURL = baseURL;
+      this.filmCache = null; // Cache for film store
+      this.tvCache = null;   // Cache for TV store
+    }
+  
+    async getInstances() {
+      return this._getRequest('/api/get/instances');
+    }
+  
+    async getInstancesHealth() {
+      return this._getRequest('/api/get/instances/health');
+    }
+  
+    async getMovieByTitle(title) {
+      return this._getRequest(`/api/get/film/${encodeURIComponent(title)}`);
+    }
+  
+    async getTVEpisode(title, season, episode) {
+      return this._getRequest(`/api/get/tv/${encodeURIComponent(title)}/${season}/${episode}`);
+    }
+  
+    async getTVStore() {
+      const response = await this._getRequest('/api/get/tv/store');
+      
+      if (response && Object.keys(response).length > 0) {
+        this.tvCache = response; // Update cache if response is not empty
+      }
+      
+      return this.tvCache || {}; // Return cache if response is empty
+    }
+  
+    async getFilmStore() {
+      const response = await this._getRequest('/api/get/film/store');
+      
+      if (response && Object.keys(response).length > 0) {
+        this.filmCache = response; // Update cache if response is not empty
+      }
+      
+      return this.filmCache || {}; // Return cache if response is empty
+    }
+  
+    async getFilmMetadataByTitle(title) {
+      return this._getRequest(`/api/get/film/metadata/${encodeURIComponent(title)}`);
+    }
+  
+    async getTVMetadataByTitle(title) {
+      return this._getRequest(`/api/get/tv/metadata/${encodeURIComponent(title)}`);
+    }
+
+    async getSeasonMetadataBySeriesId(seires_id, season) {
+        return this._getRequest(`/api/get/tv/metadata/${seires_id}/${season}`);
+      }
+  
+    async getAllFilms() {
+      return this._getRequest('/api/get/film/all');
+    }
+  
+    async getAllTVShows() {
+      return this._getRequest('/api/get/tv/all');
+    }
+  
+    async getDownloadProgress(url) {
+      return this._getRequestNoBase(url);
+    }
+  
+    // Helper methods for GET and POST requests
+    async _getRequest(endpoint) {
+      try {
+        const response = await fetch(`${this.baseURL}${endpoint}`, {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        });
+        console.log(`api endpoint: ${this.baseURL}${endpoint}`);
+        return await this._handleResponse(response);
+      } catch (error) {
+        console.error(`Error during GET request to ${endpoint}:`, error);
+        throw error;
+      }
+    }
+  
+    async _postRequest(endpoint, body) {
+      try {
+        const response = await fetch(`${this.baseURL}${endpoint}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        });
+        return await this._handleResponse(response);
+      } catch (error) {
+        console.error(`Error during POST request to ${endpoint}:`, error);
+        throw error;
+      }
+    }
+  
+    async _handleResponse(response) {
+      if (!response.ok) {
+        const errorDetails = await response.text();
+        throw new Error(`HTTP error! status: ${response.status}, details: ${errorDetails}`);
+      }
+      return response.json();
+    }
+  
+    async _getRequestNoBase(url) {
+      try {
+        const response = await fetch(`${url}`, {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        });
+        console.log(`api endpoint: ${url}`);
+        return await this._handleResponse(response);
+      } catch (error) {
+        console.error(`Error during GET request to ${url}:`, error);
+        throw error;
+      }
+    }
+  }
+  
+  export { LoadBalancerAPI };

frontend/src/lib/config.js

@@ -0,0 +1,7 @@
+const config = {
+    apiBaseUrl: 'https://hans-den-load-balancer.hf.space',
+    searchUrl: 'https://unicone-studio-search.hf.space/api/search',
+    version: "0.0.0.1 Alpha",
+  };
+  
+export default config;