From d4777b5e72c67a42dd7b3920b61e12cff6d4788b Mon Sep 17 00:00:00 2001 From: "Vadella, Anna" Date: Wed, 1 Apr 2026 13:02:29 -0400 Subject: [PATCH] Updated page.tsx Updated home page, still using preprocessed_data.xlsx because using updated_datav2.xlsx basically crashes the frontend rn lol :p --- frontend/app/api/search/route.ts | 1 + frontend/app/globals.css | 15 +++- frontend/app/movie/[slug]/page.tsx | 34 ++++---- frontend/app/page.tsx | 122 ++++++++++++++++++++++++----- scripts/convert_to_JSON.js | 1 + 5 files changed, 135 insertions(+), 38 deletions(-) diff --git a/frontend/app/api/search/route.ts b/frontend/app/api/search/route.ts index 0338195bc..f5b42f386 100644 --- a/frontend/app/api/search/route.ts +++ b/frontend/app/api/search/route.ts @@ -1,3 +1,4 @@ +// api for routing to movie slug based on user's search import movies from "../../../../movies.json"; // import JSON dataset containing all movies export async function GET(req: Request) { diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 40f3badd2..b47debdb8 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -2,15 +2,16 @@ :root { --background: #0A1F44; + --highlight: #62b6cba6; --text-dark: #000000; --text-light: #f9fafb; - --box: #D9D9D9; - --button: #A71D31; - --button-dark: #850e25; + --box: #DED6D6; + --button: #92140C; } @theme inline { --color-background: var(--background); + --color-highlight: var(--highlight); --color-text-dark: var(--text-dark); --color-text-light: var(--text-light); --color-box: var(--box); @@ -25,3 +26,11 @@ body { background: var(--background); font-family: Arial, Helvetica, sans-serif; } + +.no-scrollbar::-webkit-scrollbar { + display: none; +} +.no-scrollbar { + -ms-overflow-style: none; + scrollbar-width: none; +} \ No newline at end of file diff --git a/frontend/app/movie/[slug]/page.tsx b/frontend/app/movie/[slug]/page.tsx index 08b6643b0..462409b46 100644 --- a/frontend/app/movie/[slug]/page.tsx +++ b/frontend/app/movie/[slug]/page.tsx @@ -8,28 +8,28 @@ export default async function page({params}: {params: any}) { if (!movie) return

Movie not found

; return ( -
-
+
+
{movie.poster && ( {movie.title} )} -
+

{movie.title}

-
- +
+ {movie.genre} - + {movie.releaseDate}
@@ -38,14 +38,14 @@ export default async function page({params}: {params: any}) { {movie.plot}

-
- +
+ Directed By: {movie.director}
-
- +
+ Featuring: {movie.cast}
@@ -53,12 +53,12 @@ export default async function page({params}: {params: any}) {
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 23420b471..a074abec4 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -1,10 +1,10 @@ -"use client"; // needed for client-specific features like interactivity, state, event handlers +"use client"; // needed for client-specific features like interactivity, state, event handlers -import {useState} from "react"; +import {useState, useEffect} from "react"; import {useRouter} from "next/navigation"; -// import movies from "../../movies.json"; // import JSON dataset containing all movies +import { useRef } from "react"; -type movie = { // define TypeScript type for a movie +type movie = { // define TypeScript type for movie title: string; slug?: string; poster?: string | null; @@ -12,22 +12,36 @@ type movie = { // define TypeScript type fo export default function Home() { const [search, setSearch] = useState(""); - const [error, setError] = useState(""); - const router = useRouter(); // router object for navigating to other pages + const [error, setError] = useState(""); + const router = useRouter(); // router object for navigating to other pages + const likesRef = useRef(null); + const recsRef = useRef(null); + + const scroll = ( + ref: React.RefObject, + dir: "left" | "right" + ) => { + if (ref.current) { + ref.current.scrollBy({ + left: dir === "left" ? -700 : 700, + behavior: "smooth", + }); + } + }; - 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) + const userSearch = async (e: any) => { // handles form submission - 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 + 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 + 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 + setError("Movie not found"); // if no movies were returned or first movie has no slug, show error message } catch (err) { @@ -38,22 +52,94 @@ export default function Home() { return (
-
+
+
{ - setSearch(e.target.value); // update search text as user types - setError(""); // clear error when user starts typing + setSearch(e.target.value); // update search text as user types + setError(""); // clear error when user starts typing }} - className="px-4 py-2 border rounded bg-box w-180"> - - + )} +
+
+ +
+

Your Likes

+ +
+
+ Movie 1 +
+
+ Movie 2 +
+
+ Movie 3 +
+
+ Movie 4 +
+
+ Movie 5 +
+
+ Movie 6 +
+
+ +
+ +
+

Your Recommendations

+ +
+
+ Movie 1 +
+
+ Movie 2 +
+
+ Movie 3 +
+
+ Movie 4 +
+
+ Movie 5 +
+
+ Movie 6 +
+
+ +
+
); diff --git a/scripts/convert_to_JSON.js b/scripts/convert_to_JSON.js index 4f0914d77..4b182c637 100644 --- a/scripts/convert_to_JSON.js +++ b/scripts/convert_to_JSON.js @@ -4,6 +4,7 @@ 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 filePath = path.join(__dirname, "../spreadsheets/updated_datav2.xlsx") // path to excel file const workbook = XLSX.readFile(filePath); // read excel workbook const sheetName = workbook.SheetNames[0]; // get first sheet