Blazor Movie App

 

I came across a fun application that provides a list of current movies, provides an overview of the movie, allows the user to search for a title, and shows a color-coded rating from IMDB.  I thought it would be cool to build in Blazor.  I was right it was cool to build.

HTML

The HTML contains a container div that has a header and main section.  

The header is for the search component.  The main section contains a for loop that spins through a collection of movies and builds out the data.  It has an image element, a div that holds an H3 for the movie title, and a span for the IMDB rating.

That's pretty much all you need.

CSS

The CSS is just as straightforward.  We set the background color,  set the location and sizing of the "movie card" and the movie "data".

We use a transformation on the movie card so when the user hovers over the movie image we see the data details.  This is a nice visual effect.

The one extra styling we do is to color code the IMDB rating.  We use different colors for different ratings.

Blazor Stuff

The first thing that was needed was to find a free API that would give us movie information.  I went with The Movie Database (TMDB) (themoviedb.org).  It has a nice REST API set.  You should review the API documentation to see all the functionality it contains.

I decided to use a redefined query that will return a collection of current movies with their ratings.  I had to create a detailed entity and a collection class to handle the result set.

Details:

            public class MovieDetail

            {

                public bool adult { get; set; }

                public string backdrop_path { get; set; }

                public List<int> genre_ids { get; set; }

                public int id { get; set; }

                public string original_language { get; set; }

                public string original_title { get; set; }

                public string overview { get; set; }

                public double popularity { get; set; }

                public string poster_path { get; set; }

                public string release_date { get; set; }

                public string title { get; set; }

                public bool video { get; set; }

                public double vote_average { get; set; }

                public int vote_count { get; set; }

            }

Collection:

            public class MovieEntity

            {

                public int Page { get; set; }

                public List<MovieDetail> Results { get; set; }

                public int Total_pages { get; set; }

                public int Total_results { get; set; }

            }

On Initialization, we will call the API to get the collection of movies to display.  We use the HTTP client that is injected into our page for this.

There is a check in the HTML for loop to make sure there are movies to display.  Once we have movies,  we call a method to get the movie image.  We are using a different free API for this, Image API.  We do apply a style to the image to make it fit on the movie card.

We also call a method on the span to set the CSS class based on the rating value. It is just a couple of if statements.

For searching, we add an on-click event to the search input element.  Once clicked, we will append the search text to the get movie API query string and call the API.  

        &query="searchValue"

We will then display the results from the search.

Summary

This was a fun application to build and test.   It came out with a very nice user experience.  Working with a 3rd party REST API was a pleasant experience.  If you like movies, this is a great API to learn with,

[piggybacked on Traversy Media]

[source]