Movie Recommender Project

Project date: Fall 2025

Link to the project (Best viewed on a laptop)

Project Overview

My goal was to create a website that recommends a movie. The softwares I used were HTML, Javascript, and CSS. All data was sourced from The Movie Database (TMDB) API.

The Problem

I often find myself wanting to watch a movie, but am overwhelmed with the abundance of options. I created this project so that I (and other people who relate) can easily choose a movie to watch.

The Solution

My first step was to find an API. I came across a few options and ultimately, I decided to use TMDB’s. I found that it was the most straightforward and beginner friendly. I began by watching a YouTube video by Andy’s Tech Tutorials that walked me through the basics of the API. My goal was to have recommendations separated by genre. So, In HTML, I made a dropdown selection with different genre names. I went to TMDB’s API reference and looked to see which identifiers correlated to which genre. From there, I created a JavaScript object for the genres, with the selection value as the key and the genre ID as the value.

My next step was to get the movies to display on the site. For each movie, I wanted to list the title, rating, release date, description, and a picture of the poster. I later decided to add a link that directs to each movie’s respective TMDB page. This allows users can read reviews and find information on where to watch the movie. The movie ratings in the API varied in how many decimal places they contained. I created a new variable in JavaScript, so that all of the ratings would be uniform, with one decimal place. Additionally, in order to link the TMDB pages, I had to create a new variable for the title that replaced whitespace with hyphens, as that is the title format within the links. (ex: “https://www.themoviedb.org/movie/967941-**wicked-for-good**?language=en-US”)

I created buttons, each associated with different functions. The first button displays a list of movies for the selected genre, the second displays one movie, and the third is a reset button the clear the slate.

Screenshot of the homepage that includes the referenced buttons

My final task was to add styling. For me, this was the most difficult, but I like how it turned out. I added an effect so that when the user hovers their mouse over a movie, it turns to pink to match the background.

Before vs after hovering on a movie card

Results

I am very pleased with how my final project. I learned a lot in the process. I was able to increase my knowledge of and comfortability in working with APIs. In the future, I’d like to add a function that also displays the streaming services (if it’s streaming) that each movie is available on.