The Film Finder

I love movies. Always have. Always will.

But I do not love the nightly ritual of endless scrolling until I finally find something to watch.

Enter The Film Finder, my first single-page application.

It asks you to enter five films that you have seen and enjoyed. From those five, it will recommend ten films for you to watch.

The application utilizes The Movie Database's API, which includes a recommendation method for every film in its wide collection. The Film Finder pulls the top two recommendations for each of the five films entered by the user.

While building the SPA, I wanted to make the experience of the site more personal than simply seeing titles on the page. For example, reading the title "Star Wars" doesn't evoke the same feeling as seeing the poster for "Star Wars". As an audience, we have a connection to the movies we watch, and The Film Finder taps into that by representing every film on the site by its respective poster.

One anticipated issue was navigating myriad similar titles to efficiently ensure the user's input renders the correct poster. As the user types, results appear in real time beneath the search bar in the form of posters. When the correct poster appears, the user clicks on it to add that film to their list of five.

Another anticipated issue was duplicate recommendations. If the user enters five films from the same franchise, for instance, they would receive duplicate recommendations, perhaps even be recommended a film they have already entered. To avoid this, every film input by the user is pushed into an array called "arrayAgainst", and each possible recommendation is checked against that array before it is rendered. If that specific film already exists in the array, the algorithm moves to the next result, checking for its individuality. If it is indeed original, then the result will be rendered as a recommendation.

function renderUnique (films, container) {
    let i = 0;
    let x = 0;

    while (x < 2) {

        if (arrayAgainst.includes(films[i]["id"])) {
            i++
        } else {
            renderPosters(films[i], container)
            arrayAgainst.push(films[i]["id"])
            x++
            i++
        }
    }
}

Now, for the fun.

Enter five films and see which ten await!