Film Finder

Film Finder is a web app I designed and built as part of Codecademy’s Front-End Engineer Path.

The app displays a random movie based on the user's chosen genre and pulls data from The Movie Database API.

The scaffolding of the program was provided by Codecademy, and the main task was to complete the build of the app then extend the project with additional features.

I re-designed the UI of the app with an aim towards modernizing the look and feel and making it my own.

I also added several additional features:

• A random movie is selected from a random page of the chosen genre, instead of just the first page
• The movie release year is appended to the title
• The movie tagline is included below the title
• The movie runtime, budget and revenue are included below the overview
• The additional movie info above only displays if the data from the API is not blank
• The API key is fully hidden and secured through the use of an environment variable and Netlify functions

The biggest challenge of this project was figuring out how to secure the API key. I had no prior experience creating a frontend app, hiding an API key, creating environment variables or using Netlify.

To overcome this challenge, I utilized the Netlify documentation, read a few blog articles, watched a YouTube tutorial and combed through the Netlify forums. Eventually, I was able to set up serverless Netlify functions and tweak the program until it was working, and the API key was fully secure and hidden from the source code and browser dev tools.

You can check out the live Film Finder web app and view the source code on GitHub.