Building a Movie Finder Web App

Disclosure: While the source code for this tiny web app is freely available on github (see here), this post is more about the process of meeting a personal need.

Before we get started, why don't you check out the demo and give it a spin? Then come back to read about the process!

See the Movie Finder in Action!

Why Build a Movie Finder App?

Isn't that what IMDB is? Isn't there software for that? Sure. But I wanted something that better suited my own specific needs: finding a movie's rating and release year quickly.

Over the years, I've managed to build a decent little movie library. Between iTunes purchases and DVD/Bluray backups of my movies, I have a good little thing going that I can stream to my AppleTV from my computer. And while the titles are there, not much more exists in the form of metadata beyond that. Until recently, I had only kept up with giving each one "artwork" in the form of a movie poster.

wall of movies in itunes

With two little girls getting older, I want to be able to both know a movie's rating and also set parental controls based on that information. That's where the app comes in.

My App Requirements

  • It needs to be simple
  • It needs to be fast (I'm adding info over and over for many iTunes movies)
  • It needs to look nice (I am a designer, afterall)
  • It needs to be based on IMDB (largest/best movie directory)

Getting to Work

As I normally do with any project, I started creating the smallest piece of functionality and continued to build up until it did what I wanted. I created my HTML page and container divs for future content. I added some super basic styling to get the page organized. Then I started to look at getting info from IMDB's database.

That's where I hit a road block. (I should've seen this coming.)

IMDB does not have an official API for its database of movies, so I started heading down the path of how I might leverage some screen scraping code (*blech*) to get the information I was looking for. Maybe I could find the pattern for the IMDB search page, append a movie title, and scrape the screen for info? With little luck - and a yucky feeling about the idea of it all - I decided to do a bit more digging and came across an unofficial IMDB API that I thought might work, OMDBAPI!

Success! After, well, a few hours of figuring out how to get the info I needed, I was able to populate the page with matching movie titles.

movie finder screenshot with zoolander search

Under the Hood

To get the API to return what I wanted to the page, I have my script running 2 queries for each movie title. This is not ideal, but I'm at the mercy of the API. The first query does a search of the database for matching movie titles and returns only a title and an IMDB movie ID. To get the release date and rating, I then search database again on the IMDB movie ID that was returned. Despite being several calls to the API (I've also capped the search at 10 results), the app runs impressively fast.

Reflection and Wrapup

As I do with most of my projects, I self-evaluate to see if I hit the goals I set out to achieve. Here they are again with evaluation:

  • It needs to be simple

Though building the app was a little harder than I originally thought it would be, the user experience is extremely simple. Type all or part of a movie name, click search, get results. 

  • It needs to be fast

Again, two queries to the API for EACH movie is a bit much, but it's all I had. Given this, the app still performs incredibly quickly.

  • It needs to look nice

I spent the majority of my time on development for this project, so the design was a bit rough at time of app completion. To make it look a bit nicer, I actually worked on the CSS before writing this article! ;)

  • It needs to be based on IMDB

Despite not having access to an official API, the OMDBAPI is a great unofficial API that helped me achieve this goal.

It remains to be seen if I update this app in the future or let it be what it is. The OMDBAPI does get updated occasionally, so I'll have to keep an eye out for new features. I also may want to optimize the app for mobile devices, though it already works just fine and looks pretty clean on a phone or tablet.

See the Demo Again

Drupal Paradise Ad