The Movie Decider 4000 - A Next.js Experiment App

During the lockdowns in 2020, our family was watching more movies but we could never decide which movie to watch. I wanted to play around with Next.js so I wrote up a small app that stores a list of movies and randomly picks one. Over time, this project has grown to include the ability to switch DB's (so that we can have a list for grown up movies and one for movies with the kids), integration with OMDB and TMDB API's to pull in data like genre and runtime, and provide a number of extra functions like finding trailers, reviews, ratings, IMDB info, streaming info and more.

Pick Screen

Displays the movie that was selected, including synopis, ratings, streaming source, trailers and more. Movies can be randomly chosen from the entire list or from a smaller set limited by runtime.

Main List

Displays the list of movies we want to watch.

Movie Detail

Movies can be hovered to show the most important information (streaming source, ratings, runtime), and quick actions (edit, mark watched, lock, delete)

Fully Responsive

Between movie nights, we'll often hear about ones we would like to see. It quickly became important to have the ability to pull out my phone and add it to the list on the go.

Watched Movies

A historical view of the movies we have watched.

Set the Date

When a movie is marked as "watched", the date is automatically set to the current day. If I forget to mark it for a day or two, I can adjust the date manually.

Add Movie with OMDB Integration

Adding movies is much simpler now. Just search the name and a list of matching movies is displayed. Clicking the poster will auto-fill all the details for the movie and even check where it is currently streaming. (Note: This UI needs a visual upgrade to be match the rest of the app)