prabhaavp/datamining_881
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated page.tsx

Browse Source 
Updated home page, still using preprocessed_data.xlsx because using updated_datav2.xlsx basically crashes the frontend rn lol :p
This commit is contained in:
Vadella, Anna
2026-04-01 13:02:29 -04:00
parent 90a551c048
commit d4777b5e72
5 changed files with 135 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/api/search/route.ts
View File

@@ -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 import movies from "../../../../movies.json"; // import JSON dataset containing all movies
export async function GET(req: Request) { export async function GET(req: Request) {

15
frontend/app/globals.css
View File

@@ -2,15 +2,16 @@
:root { :root {
--background: #0A1F44; --background: #0A1F44;
--highlight: #62b6cba6;
--text-dark: #000000; --text-dark: #000000;
--text-light: #f9fafb; --text-light: #f9fafb;
--box: #D9D9D9; --box: #DED6D6;
--button: #A71D31; --button: #92140C;
--button-dark: #850e25;
} }
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-highlight: var(--highlight);
--color-text-dark: var(--text-dark); --color-text-dark: var(--text-dark);
--color-text-light: var(--text-light); --color-text-light: var(--text-light);
--color-box: var(--box); --color-box: var(--box);
@@ -25,3 +26,11 @@ body {
background: var(--background); background: var(--background);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

34
frontend/app/movie/[slug]/page.tsx
View File

@@ -8,28 +8,28 @@ export default async function page({params}: {params: any}) {
if (!movie) return <p>Movie not found</p>; if (!movie) return <p>Movie not found</p>;
return ( return (
<div className="mt-10 mb-10 bg-background max-w-4xl mx-auto rounded-lg shadow-md"> <div className="mt-10 mb-10 bg-background max-w-10xl mx-auto rounded-lg shadow-md">
<div className="flex gap-11"> <div className="flex gap-9">
{movie.poster && ( {movie.poster && (
<img <img
src={movie.poster} src={movie.poster}
alt={movie.title} alt={movie.title}
className="w-40 h-60 object-cover rounded-md bg-box/95" className="w-50 h-70 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="max-w-3xl flex bg-box/95 border rounded-lg px-5 py-5">
<div className="flex flex-col"> <div className="flex flex-col">
<h1 className="text-3xl font-bold mb-3"> <h1 className="text-3xl font-bold mb-3">
{movie.title} {movie.title}
</h1> </h1>
<div className="text-sm text-text-dark mb-2 flex flex-wrap gap-3 items-center"> <div className="text-sm text-text-dark mb-2 flex flex-wrap gap-5 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]"> <span className="bg-box border border-gray-400 rounded-full px-2 py-0.5 text-xs backdrop-blur-sm hover:bg-highlight hover:border-background hover:scale-[1.02]">
{movie.genre} {movie.genre}
</span> </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]"> <span className="bg-box border border-gray-400 rounded-full px-2 py-0.5 text-xs backdrop-blur-sm hover:bg-highlight hover:border-background hover:scale-[1.02]">
{movie.releaseDate} {movie.releaseDate}
</span> </span>
</div> </div>
@@ -38,14 +38,14 @@ export default async function page({params}: {params: any}) {
{movie.plot} {movie.plot}
</p> </p>
<div className="text-sm text-text-dark mt-2 flex flex-wrap gap-3 items-center"> <div className="text-sm text-text-dark mt-3 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]"> <span className="bg-box border border-gray-400 rounded-full px-2 py-0.5 text-xs backdrop-blur-sm hover:bg-highlight hover:border-background hover:scale-[1.02]">
Directed By: {movie.director} Directed By: {movie.director}
</span> </span>
</div> </div>
<div className="text-sm text-text-dark mt-2 flex flex-wrap gap-3 items-center"> <div className="text-sm text-text-dark mt-3 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]"> <span className="bg-box border border-gray-400 rounded-full px-2 py-0.5 text-xs backdrop-blur-sm hover:bg-highlight hover:border-background hover:scale-[1.01]">
Featuring: {movie.cast} Featuring: {movie.cast}
</span> </span>
</div> </div>
@@ -53,12 +53,12 @@ export default async function page({params}: {params: any}) {
</div> </div>
</div> </div>
<div className="flex gap-5 flex-wrap justify-center mt-5"> <div className="flex gap-6 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-45 h-65 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-45 h-65 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-45 h-65 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-45 h-65 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-45 h-65 bg-box/95 border rounded-md shadow transition-transform duration-300 hover:scale-102 hover:cursor-pointer"></div>
</div> </div>
</div> </div>

102
frontend/app/page.tsx
View File

@@ -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 {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; title: string;
slug?: string; slug?: string;
poster?: string | null; poster?: string | null;
@@ -14,8 +14,22 @@ export default function Home() {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [error, setError] = useState(""); const [error, setError] = useState("");
const router = useRouter(); // router object for navigating to other pages const router = useRouter(); // router object for navigating to other pages
const likesRef = useRef<HTMLDivElement | null>(null);
const recsRef = useRef<HTMLDivElement | null>(null);
const userSearch = async (e: any) => { // must be async for await to work (await = pauses until JSON parsing is complete!) const scroll = (
ref: React.RefObject<HTMLDivElement | null>,
dir: "left" | "right"
) => {
if (ref.current) {
ref.current.scrollBy({
left: dir === "left" ? -700 : 700,
behavior: "smooth",
});
}
};
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) e.preventDefault(); // prevent default form submission (page reloading)
if (!search.trim()) return; if (!search.trim()) return;
@@ -38,8 +52,9 @@ export default function Home() {
return ( return (
<div className="flex flex-col flex-1 items-center justify-center bg-background font-sans"> <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 sm:items-start"> <main className="flex flex-1 w-full max-w-5xl flex-col items-center justify-between py-12 sm:items-start">
<form onSubmit={userSearch} className="flex gap-2"> <form onSubmit={userSearch} className="flex gap-2">
<div className="relative">
<input <input
type="text" type="text"
placeholder="Search for a movie..." placeholder="Search for a movie..."
@@ -48,12 +63,83 @@ export default function Home() {
setSearch(e.target.value); // update search text as user types setSearch(e.target.value); // update search text as user types
setError(""); // clear error when user starts typing setError(""); // clear error when user starts typing
}} }}
className="px-4 py-2 border rounded bg-box w-180"> className="px-4 py-2 border rounded bg-box w-230"
</input> />
<button type = "submit" className="px-4 py-2 bg-button text-text-light border rounded hover:cursor-pointer hover:bg-[var(--button-dark)]"> {search && ( // clear button
<button type="button" onClick={() => setSearch("")} className="absolute right-2 -top-2 mr-2 h-full flex items-center justify-center text-gray-500 hover:cursor-pointer">
✕
</button>
)}
</div>
<button type="submit" className="px-4 py-2 mb-5 bg-button text-text-light border-button rounded hover:cursor-pointer">
Search Search
</button> </button>
</form> </form>
<div className="flex flex-col gap-1 w-full rounded-lg px-2 py-1 relative">
<h2 className="text-2xl font-bold text-text-light mb-1">Your Likes</h2>
<button onClick={() => scroll(likesRef, "left")}
className="absolute -left-10 top-[60%] -translate-y-1/2 z-10 bg-black/50 text-white px-2 py-1 rounded hover:cursor-pointer">
←
</button>
<div ref={likesRef} className="flex flex-row gap-5 overflow-x-auto scroll-smooth snap-x snap-mandatory no-scrollbar py-2">
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 1
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 2
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 3
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 4
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 5
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 6
</div>
</div>
<button onClick={() => scroll(likesRef, "right")}
className="absolute -right-10 top-[60%] -translate-y-1/2 z-10 bg-black/50 text-white px-2 py-1 rounded hover:cursor-pointer">
→
</button>
</div>
<div className="flex flex-col gap-1 w-full rounded-lg px-2 py-1 relative">
<h2 className="text-2xl font-bold text-text-light mb-1">Your Recommendations</h2>
<button onClick={() => scroll(recsRef, "left")}
className="absolute -left-10 top-[60%] -translate-y-1/2 z-10 bg-black/50 text-white px-2 py-1 rounded hover:cursor-pointer">
←
</button>
<div ref={recsRef} className="flex flex-row gap-5 overflow-x-auto scroll-smooth snap-x snap-mandatory no-scrollbar py-2">
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 1
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 2
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 3
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 4
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 5
</div>
<div className="bg-box border rounded-lg p-4 w-45 h-65 flex-shrink-0 snap-start hover:cursor-pointer hover:scale-[1.02] transition-transform duration-200">
Movie 6
</div>
</div>
<button onClick={() => scroll(recsRef, "right")}
className="absolute -right-10 top-[60%] -translate-y-1/2 z-10 bg-black/50 text-white px-2 py-1 rounded hover:cursor-pointer">
→
</button>
</div>
</main> </main>
</div> </div>
); );

1
scripts/convert_to_JSON.js
View File

@@ -4,6 +4,7 @@ const fs = require("fs");
const path = require("path"); 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, "../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 workbook = XLSX.readFile(filePath); // read excel workbook
const sheetName = workbook.SheetNames[0]; // get first sheet const sheetName = workbook.SheetNames[0]; // get first sheet