X icon
hamburger icon

Film Finder

Web App Design

Web App Development





A preview browser image of a web app called Film Finder. An image of the logo for a web app called 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:

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.