api fix

frontend/next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        domains: ['artworks.thetvdb.com'],
+      },
+};
 
 export default nextConfig;

frontend/src/app/films/filmsPage.css

@@ -1,78 +0,0 @@
-.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: #21264a;
-    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: #202a75; 
-    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

@@ -1,87 +0,0 @@
-'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='#3f5fd2'
-                        bounce={isPrevButtonEnabled}
-                    />
-                </button>
-                <span className="page-info">
-                    {currentPage} - {totalPages} 
-                </span>
-                <button 
-                    onClick={handleNextPage} 
-                    disabled={!isNextButtonEnabled}
-                    className="pagination-button"
-                >
-                    <FontAwesomeIcon 
-                        icon={faCaretRight}
-                        size="2xl"
-                        color='#3f5fd2'
-                        bounce={isNextButtonEnabled} 
-                    />
-                </button>
-            </div>
-            <div className="films-page">
-                {currentFilms.map(title => (
-                    <FilmCard key={title} title={title} />
-                ))}
-            </div>
-        </div>
-    );
-}

frontend/src/app/movies/filmsPage.css

@@ -0,0 +1,93 @@
+/* Global Styles */
+body {
+  background-color: #121212;
+  color: #e0e0e0;
+  font-family: Arial, sans-serif;
+}
+
+/* Films Page Container */
+.films-page-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Films Grid */
+.films-page {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 30px;
+  width: 100%;
+  justify-content: center;
+}
+
+/* Media Queries for Responsiveness */
+@media (max-width: 768px) {
+  .films-page {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .films-page {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+}
+
+/* Pagination Controls */
+.pagination-controls {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+
+/* Pagination Button */
+.pagination-button {
+  background-color: #3f0071;
+  color: #ffffff;
+  border: none;
+  border-radius: 50%;
+  padding: 10px;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+}
+
+.pagination-button.enabled:hover {
+  background-color: #5c0097;
+  transform: scale(1.1);
+}
+
+.pagination-button.disabled {
+  background-color: #333;
+  cursor: not-allowed;
+}
+
+/* Page Info */
+.page-info {
+  font-size: 1.2em;
+  margin: 0 15px;
+  color: #e0e0e0;
+}
+
+/* Handle Animations on Page Load */
+@keyframes pageLoad {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.films-page-container {
+  animation: pageLoad 1s ease;
+}

frontend/src/app/movies/page.js

@@ -0,0 +1,78 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import apiClient from '@/api/apiClient';
+import MovieCard from '@/components/MovieCard';
+import { useFilmContext } from '@/context/FilmContext';
+import './filmsPage.css';
+
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+
+const FILMS_PER_PAGE = 10;
+
+export default function FilmsPage() {
+  const { films, setFilms } = useFilmContext();
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    if (films.length === 0) {
+      apiClient.getAllMovies()
+        .then(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));
+  };
+
+  const totalPages = Math.ceil(films.length / FILMS_PER_PAGE);
+  const isPrevButtonEnabled = currentPage > 1;
+  const isNextButtonEnabled = currentPage < totalPages;
+
+  return (
+    <div className="films-page-container">
+      <div className="films-page">
+        {currentFilms.map(title => (
+          <MovieCard key={title} title={title} />
+        ))}
+      </div>
+      <div className="pagination-controls">
+        <button 
+          onClick={handlePrevPage} 
+          disabled={!isPrevButtonEnabled}
+          className={`pagination-button ${isPrevButtonEnabled ? 'enabled' : 'disabled'}`}
+        >
+          <FontAwesomeIcon 
+            icon={faChevronLeft}
+            size="2xl"
+          />
+        </button>
+        <span className="page-info">
+          {currentPage} of {totalPages}
+        </span>
+        <button 
+          onClick={handleNextPage} 
+          disabled={!isNextButtonEnabled}
+          className={`pagination-button ${isNextButtonEnabled ? 'enabled' : 'disabled'}`}
+        >
+          <FontAwesomeIcon 
+            icon={faChevronRight}
+            size="2xl"
+          />
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/MovieCard.css

@@ -0,0 +1,76 @@
+/* styles/MovieCard.css */
+
+.movie-card {
+    position: relative;
+    width: 150px;
+    height: 300px;
+    margin: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: #202232;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    transition: transform 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    animation: fadeIn 0.5s forwards;
+  }
+  
+  .image-container {
+    position: relative;
+    width: 100%;
+    height: 78%;
+  }
+  
+  .poster {
+    object-fit: cover;
+    border-radius: 8px 8px 0 0;
+    width: 100%;
+    height: 100%;
+  }
+  
+  .movie-info {
+    position: relative;
+    width: 100%;
+    height: 22%;
+    padding: 10px;
+    background: #202232;
+    color: #fff;
+    text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .movie-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .movie-year {
+    margin: 5px 0 0;
+    font-size: 14px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .error {
+    color: #e74c3c;
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  

frontend/src/components/MovieCard.js

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import apiClient from '@/api/apiClient';
+import SkeletonLoader from '@/skeletons/movieCard';
+import './MovieCard.css';
+
+const MovieCard = ({ title }) => {
+  const [movieData, setMovieData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchMovieData = async () => {
+      try {
+        const data = await apiClient.getMovieCard(title);
+        setMovieData(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMovieData();
+  }, [title]);
+
+  if (loading) {
+    return <SkeletonLoader />;
+  }
+
+  if (error) {
+    return <div className="error">Error: {error}</div>;
+  }
+
+  return (
+    <div className="movie-card">
+      <div className="image-container">
+        <Image
+          src={movieData.image}
+          alt={`${movieData.title} poster`}
+          fill
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          priority
+          className="poster"
+        />
+      </div>
+      <div className="movie-info">
+        <h3 className="movie-title">{movieData.title}</h3>
+        <p className="movie-year">{movieData.year}</p>
+      </div>
+    </div>
+  );
+};
+
+export default MovieCard;

frontend/src/components/Sidebar.js

@@ -65,9 +65,9 @@ const Sidebar = () => {
               <SidebarItem icon={faHome} text="Home" />
             </Link>
             <Link
-              href="/films"
+              href="/movies"
               className={`sidebar-link ${
-                pathname === "/films" ? "active" : ""
+                pathname === "/movies" ? "active" : ""
               }`}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}

frontend/src/components/film/card.css

@@ -1,193 +0,0 @@
-.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

@@ -1,92 +0,0 @@
-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/lib/LoadBalancer.js

@@ -1,124 +1,137 @@
 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/movie/${encodeURIComponent(title)}`);
-    }
-  
-    async getSeriesEpisode(title, season, episode) {
-      return this._getRequest(`/api/get/series/${encodeURIComponent(title)}/${season}/${episode}`);
-    }
-  
-    async getSeriesStore() {
-      const response = await this._getRequest('/api/get/series/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 getMovieStore() {
-      const response = await this._getRequest('/api/get/movie/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 getMovieMetadataByTitle(title) {
-      return this._getRequest(`/api/get/movie/metadata/${encodeURIComponent(title)}`);
-    }
-  
-    async getSeriesMetadataByTitle(title) {
-      return this._getRequest(`/api/get/series/metadata/${encodeURIComponent(title)}`);
-    }
+  constructor(baseURL) {
+    this.baseURL = baseURL;
+    this.filmCache = null; // Cache for film store
+    this.tvCache = null;   // Cache for TV store
+  }
 
-    async getSeasonMetadataBySeriesId(seires_id, season) {
-        return this._getRequest(`/api/get/series/metadata/${seires_id}/${season}`);
-      }
-  
-    async getAllMovies() {
-      return this._getRequest('/api/get/film/all');
-    }
-  
-    async getAllSeriesShows() {
-      return this._getRequest('/api/get/series/all');
-    }
+  async getInstances() {
+    return this._getRequest('/api/get/instances');
+  }
 
-    async getRecent() {
-      return this._getRequest('/api/get/recent');
-    }
+  async getInstancesHealth() {
+    return this._getRequest('/api/get/instances/health');
+  }
 
-    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 getMovieByTitle(title) {
+    return this._getRequest(`/api/get/movie/${encodeURIComponent(title)}`);
+  }
+
+  async getSeriesEpisode(title, season, episode) {
+    return this._getRequest(`/api/get/series/${encodeURIComponent(title)}/${season}/${episode}`);
+  }
+
+  async getSeriesStore() {
+    const response = await this._getRequest('/api/get/series/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 getMovieStore() {
+    const response = await this._getRequest('/api/get/movie/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 getMovieMetadataByTitle(title) {
+    return this._getRequest(`/api/get/movie/metadata/${encodeURIComponent(title)}`);
+  }
+
+  async getMovieCard(title) {
+    return this._getRequest(`/api/get/movie/card/${encodeURIComponent(title)}`);
+  }
+
+  async getSeriesMetadataByTitle(title) {
+    return this._getRequest(`/api/get/series/metadata/${encodeURIComponent(title)}`);
+  }
+
+  async getSeriesCard(title) {
+    return this._getRequest(`/api/get/series/card/${encodeURIComponent(title)}`);
+  }
+
+  async getSeasonMetadataBySeriesId(series_id, season) {
+    return this._getRequest(`/api/get/series/metadata/${series_id}/${season}`);
+  }
+
+  async getAllMovies() {
+    return this._getRequest('/api/get/movie/all');
+  }
+
+  async getAllSeriesShows() {
+    return this._getRequest('/api/get/series/all');
+  }
+
+  async getRecent() {
+    return this._getRequest('/api/get/recent');
+  }
+
+  async getGenreItems(genre, mediaType = null, limit = 5) {
+    const queryParams = new URLSearchParams({ genre, media_type: mediaType, limit });
+    return this._getRequest(`/api/get/genre?${queryParams.toString()}`);
+  }
+
+  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 _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 _handleResponse(response) {
+    if (!response.ok) {
+      const errorDetails = await response.text();
+      throw new Error(`HTTP error! status: ${response.status}, details: ${errorDetails}`);
     }
-  
-    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;
-      }
+    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 };
+}
+
+export { LoadBalancerAPI };

frontend/src/skeletons/movieCard.css

@@ -0,0 +1,63 @@
+.skeleton-loader {
+    position: relative;
+    width: 150px;
+    height: 300px;
+    margin: 10px;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: pulse 1.5s infinite ease-in-out;
+  }
+  
+  .image-container {
+    width: 100%;
+    height: 80%;
+    border-radius: 8px 8px 0 0;
+    animation: pulse 1.5s infinite ease-in-out;
+  }
+  
+  .movie-info {
+    width: 100%;
+    height: 20%;
+    padding: 10px;
+    color: #fff;
+    text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  
+  .skeleton-title, .skeleton-year {
+    border-radius: 4px;
+    margin: 0 auto;
+    animation: pulse 1.5s infinite ease-in-out;
+  }
+  
+  .skeleton-title {
+    height: 20px;
+    width: 80%;
+  }
+  
+  .skeleton-year {
+    height: 16px;
+    width: 60%;
+    margin-top: 5px;
+  }
+  
+  @keyframes pulse {
+    0% {
+      background-color: #202232;
+    }
+    50% {
+      background-color: #323450;
+    }
+    100% {
+      background-color: #202232;
+    }
+  }
+  

frontend/src/skeletons/movieCard.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import '@/skeletons/movieCard.css';
+
+const SkeletonLoader = () => {
+  return (
+    <div className='skeleton-loader'>
+      <div className='image-container'>
+        {/* Placeholder for the image */}
+      </div>
+      <div className='movie-info'>
+        <div className='skeleton-title'></div>
+        <div className='skeleton-year'></div>
+      </div>
+    </div>
+  );
+};
+
+export default SkeletonLoader;