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
export async function GET(req: Request) {

15
frontend/app/globals.css
View File

@@ -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;
}

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>;
return (
<div className="mt-10 mb-10 bg-background max-w-4xl mx-auto rounded-lg shadow-md">
<div className="flex gap-11">
<div className="mt-10 mb-10 bg-background max-w-10xl mx-auto rounded-lg shadow-md">
<div className="flex gap-9">
{movie.poster && (
<img
src={movie.poster}
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">
<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]">
<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-highlight hover:border-background 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]">
<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}
</span>
</div>
@@ -38,14 +38,14 @@ export default async function page({params}: {params: any}) {
{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]">
<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-highlight hover:border-background 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]">
<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-highlight hover:border-background hover:scale-[1.01]">
Featuring: {movie.cast}
</span>
</div>
@@ -53,12 +53,12 @@ export default async function page({params}: {params: any}) {
</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 className="flex gap-6 flex-wrap justify-center mt-5">
<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-45 h-65 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-45 h-65 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>

120
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 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;
@@ -13,21 +13,35 @@ 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 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!)
e.preventDefault(); // prevent default form submission (page reloading)
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)
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 (
<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">
<div className="relative">
<input
type="text"
placeholder="Search for a movie..."
value={search}
onChange={(e) => {
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">
</input>
<button type = "submit" className="px-4 py-2 bg-button text-text-light border rounded hover:cursor-pointer hover:bg-[var(--button-dark)]">
className="px-4 py-2 border rounded bg-box w-230"
/>
{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
</button>
</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>
</div>
);

1
scripts/convert_to_JSON.js
View File

@@ -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