Frontend changes

I still need to change the path of the excel in convert_to_JSON.js to be the updated data xlsx lmao

frontend/app/api/search/route.ts

@@ -0,0 +1,14 @@
+import movies from "../../../../movies.json";                             // import JSON dataset containing all movies 
+
+export async function GET(req: Request) {
+  const {searchParams} = new URL(req.url);                                // gets request URL w/ query parameters
+  const query = searchParams.get("q")?.toLowerCase() || "";
+
+  const results = movies                                                  // only return movies that include search term in their title
+    .filter((m) => m.title.toLowerCase().includes(query))                 // filter searches dataset for titles containing query
+    .slice(0, 10);                                                        // limit to top 10 results
+
+  return new Response(JSON.stringify(results), {
+    headers: {"Content-Type": "application/json"},                        // returns JSON array of movie objects
+  });
+}

frontend/app/globals.css

@@ -1,26 +1,27 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
+  --background: #0A1F44;
-  --foreground: #171717;
+  --text-dark: #000000;
+  --text-light: #f9fafb;
+  --box: #D9D9D9;
+  --button: #A71D31;
+  --button-dark: #850e25;
 }
 
 @theme inline {
   --color-background: var(--background);
-  --color-foreground: var(--foreground);
+  --color-text-dark: var(--text-dark);
-  --font-sans: var(--font-geist-sans);
+  --color-text-light: var(--text-light);
-  --font-mono: var(--font-geist-mono);
+  --color-box: var(--box);
-}
+  --color-button: var(--button);
+  --color-button-dark: var(--button-dark)
 
-@media (prefers-color-scheme: dark) {
+  --font-sans: var(--font-geist-sans); 
-  :root {
+  --font-mono: var(--font-geist-mono);
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
 }
 
 body {
   background: var(--background);
-  color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }

frontend/app/movie/[slug]/page.tsx

@@ -0,0 +1,66 @@
+import movies from "../../../../movies.json";                             // import JSON dataset containing all movies 
+export const dynamicParams = true;                                        // allow dynamic parameters, allows pages to be generated for any slug
+
+export default async function page({params}: {params: any}) {
+  const { slug } = await params;                                          // extract movie slug from URL
+  const movie = movies.find((m) => m.slug?.trim() === slug?.trim());      // search movies array for movie whose slug matches 
+
+  if (!movie) return <p>Movie not found</p>;
+
+  return (
+    <div className="mt-10 mb-10 bg-background max-w-4xl mx-auto rounded-lg shadow-md">
+      <div className="flex gap-11">
+        {movie.poster && (
+        <img
+          src={movie.poster}
+          alt={movie.title}
+          className="w-40 h-60 object-cover rounded-md bg-box/95"
+        />
+      )}
+      
+      <div className="max-w-2xl flex bg-box/95 border rounded-lg px-5 py-5">
+        <div className="flex flex-col">
+          
+          <h1 className="text-3xl font-bold mb-3">
+            {movie.title}
+          </h1>
+
+          <div className="text-sm text-text-dark mb-2 flex flex-wrap gap-3 items-center">
+            <span className="bg-box border border-gray-400 rounded-full px-2 py-0.5 text-xs backdrop-blur-sm hover:bg-blue-500/20 hover:border-blue-400 hover:scale-[1.02]">
+              {movie.genre}
+            </span>
+            <span className="bg-box border border-gray-400 rounded-full px-2 py-0.5 text-xs backdrop-blur-sm hover:bg-blue-500/20 hover:border-blue-400 hover:scale-[1.02]">
+              {movie.releaseDate}
+            </span>
+          </div>
+
+          <p className="text-sm leading-relaxed line-clamp-3">
+            {movie.plot}
+          </p>
+
+          <div className="text-sm text-text-dark mt-2 flex flex-wrap gap-3 items-center">
+            <span className="bg-box border border-gray-400 rounded-full px-2 py-0.5 text-xs backdrop-blur-sm hover:bg-blue-500/20 hover:border-blue-400 hover:scale-[1.02]">
+              Directed By: {movie.director}
+            </span>
+          </div>
+
+          <div className="text-sm text-text-dark mt-2 flex flex-wrap gap-3 items-center">
+            <span className="bg-box border border-gray-400 rounded-full px-2 py-0.5 text-xs backdrop-blur-sm hover:bg-blue-500/20 hover:border-blue-400 hover:scale-[1.01]">
+              Featuring: {movie.cast}
+            </span>
+          </div>
+        </div>
+      </div>
+      </div>
+
+      <div className="flex gap-5 flex-wrap justify-center mt-5">
+        <div className="w-40 h-60 bg-box/95 border rounded-md shadow transition-transform duration-300 hover:scale-102 hover:cursor-pointer"></div>
+        <div className="w-40 h-60 bg-box/95 border rounded-md shadow transition-transform duration-300 hover:scale-102 hover:cursor-pointer"></div>
+        <div className="w-40 h-60 bg-box/95 border rounded-md shadow transition-transform duration-300 hover:scale-102 hover:cursor-pointer"></div>
+        <div className="w-40 h-60 bg-box/95 border rounded-md shadow transition-transform duration-300 hover:scale-102 hover:cursor-pointer"></div>
+        <div className="w-40 h-60 bg-box/95 border rounded-md shadow transition-transform duration-300 hover:scale-102 hover:cursor-pointer"></div>
+      </div>
+
+    </div>
+  );
+}

frontend/app/page.tsx

@@ -1,65 +1,60 @@
-import Image from "next/image";
+"use client";                                       // needed for client-specific features like interactivity, state, event handlers 
+
+import {useState} from "react";
+import {useRouter} from "next/navigation";
+// import movies from "../../movies.json";          // import JSON dataset containing all movies 
+
+type movie = {                                      // define TypeScript type for a movie
+  title: string;
+  slug?: string;
+  poster?: string | null;
+};
 
 export default function Home() {
+  const [search, setSearch] = useState("");         
+  const [error, setError] = useState("");         
+  const router = useRouter();                       // router object for navigating to other pages        
+
+  const userSearch = async (e: any) => {            // must be async for await to work (await = pauses until JSON parsing is complete!)
+    e.preventDefault();                             // prevent default form submission (page reloading)
+
+    if (!search.trim()) return;
+
+      try {
+        const res = await fetch(`/api/search?q=${encodeURIComponent(search)}`);
+        const movies: movie[] = await res.json();   // convert HTTP response from JSON into JS array of movie objects
+
+        if (movies.length > 0 && movies[0].slug)    // if at least one movie is returned from API and first movie has a slug defined
+          router.push(`/movie/${movies[0].slug}`);  // then navigate user to movie detail page using slug of first movie in results
+        else
+          setError("Movie not found");              // if no movies were returned or first movie has no slug, show error message
+      }
+      catch (err) 
+      {
+        setError("Error fetching movies");
+        console.error(err);
+      }
+  };
+
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <div className="flex flex-col flex-1 items-center justify-center bg-background font-sans">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 sm:items-start">
-        <Image
+        <form onSubmit={userSearch} className="flex gap-2">
-          className="dark:invert"
+          <input
-          src="/next.svg"
+            type="text"
-          alt="Next.js logo"
+            placeholder="Search for a movie..."
-          width={100}
+            value={search}
-          height={20}
+            onChange={(e) => {
-          priority
+              setSearch(e.target.value);            // update search text as user types
-        />
+              setError("");                         // clear error when user starts typing 
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+            }}
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            className="px-4 py-2 border rounded bg-box w-180">
-            To get started, edit the page.tsx file.
+          </input>
-          </h1>
+          <button type = "submit" className="px-4 py-2 bg-button text-text-light border rounded hover:cursor-pointer hover:bg-[var(--button-dark)]"> 
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Search
-            Looking for a starting point or more instructions? Head over to{" "}
+          </button>
-            <a
+        </form>
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
       </main>
     </div>
   );
-}
+}

scripts/convert_to_JSON.js

@@ -0,0 +1,29 @@
+// convert excel dataset to JSON for easier parsing & easier deployment
+const XLSX = require("xlsx");
+const fs = require("fs");
+const path = require("path");
+
+const filePath = path.join(__dirname, "../preprocessed_data.xlsx")          // path to excel file -- change this path to be spreadsheets\updated_datav2.xlsx
+const workbook = XLSX.readFile(filePath);                                   // read excel workbook
+
+const sheetName = workbook.SheetNames[0];                                   // get first sheet 
+const sheet = workbook.Sheets[sheetName];
+
+const rawData = XLSX.utils.sheet_to_json(sheet);                            // convert to JSON
+
+const cleanedData = rawData.map((movie) => ({                               // transform data 
+    title: movie.Title,
+    director: movie.Director || "",
+    cast: movie.Cast || "",
+    genre: movie.Genre || "",
+    plot: movie.Plot || "",
+    releaseDate: movie["Release Date"] || "",
+    slug: movie.Slug || "",
+    poster: movie["Poster Filename"]
+        ? `/posters/${movie["Poster Filename"]}`
+        : null,
+}));
+
+fs.writeFileSync(path.join(__dirname, "../movies.json"), JSON.stringify(cleanedData, null, 2));
+
+// to run: node scripts/convertExcelToJson.js