Movie List

Oct 10, 2015

Since my junior year as a film major in college I've been tracking every new movie I've watched. What started out as a list on a Movable Type blog became a custom plugin on a Drupal site, and when I shut down my Drupal site in favor of something lighter-weight and not quite so subject to continual security breaches, I decided to make my own custom web application for storing my movie viewing history.

It also served as an opportunity to learn the basics of Angular.js and play around with UI guidelines less strict than the ones I had to operate within at work.

The Problem

The previous version of this tool used an API with a less robust database, and required that you search for movies by their exact title as they were stored in that database. This made looking up movies, especially obscure or foreign ones, a tricky and frustrating proposition.

The old version also didn't store any information about the movies other than their title, year, and poster, so I knew that if I ever wanted to pull any interesting insights out of the data I would have to do a lot more work.

My old Drupal site was responsive, but it wasn't exactly lightweight. The process for adding movies to the old tool was actually to log into the site as an admin and create a new post with a type of "movie." This made the process of adding a new movie on a phone or tablet especially laborious.

Default view for displaying the list of movies in the database

The Design

After browsing through some free movie APIs, I ended up settling on The Movie Database's, which was modern and robust. I decided to store the entirety of the JSON returned for a given movie in my own local JSON file in the event that I'd want to use anything in it later. In addition, when a movie was saved to my file, I added the date I watched it and my rating on a 5-star scale.

My exploration into the basics of Angular.js also revealed that I could add free-text filtering functionality quickly and easily, so in addition to a field for looking up a new movie to add, I included one for searching the database.

The movie search and adding workflow

Making this tool mobile-friendly was also a high priority. I went with a simple list-and-detail structure with generously-sized tap targets.

The mobile UI

Future Ideas

Right now the default detail view for the site (if you're on a large enough screen to see it) simply shows the list of movies and a pane with the number of movies watched since the oldest one added. Eventually I'm interested in replacing the detail view with a simple dashboard that will take advantage of all the movie data I'm storing to pull out a few interesting insights, such as:

  • My average number of movies watched per month or year
  • How my MPM (movies per month) has trended over time
  • Genre breakdown
  • Average movie length
  • Number of G/PG/PG-13/R movies
  • Favorite actors, directors, and screenwriters

The movie search and adding workflow