TIL Blog - Mini Project

For my mini project I decided to take my love of movies and build a movie search app. I was already familiar with TMDB (The Movie Database). The site itself has so much information on movies and tv shows. They also offer an API for free. You just have to create an account and you can request a key. The rate limits are very generous and are roughly 50 requests/sec!

Documentation

TMDB has very well written and organized API documentation that makes it very easy to get the data you need. They even show you how to request data using 20 different programming languages. For Ruby they recommend using the URI gem and the Net/HTTP gem. This is what the code for getting the details for a specific movie looks like using Ruby.

require 'uri'
require 'net/http'

url = URI("https://api.themoviedb.org/3/movie/movie_id?language=en-US")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Get.new(url)
request["accept"] = 'application/json'
request["Authorization"] = 'Bearer #{API_ACCESS_TOKEN}'

response = http.request(request)
puts response.read_body

If we plug in movie_id 872585 for Oppenheimer we get back this response:

{
  "adult": false,
  "backdrop_path": "/fm6KqXpk3M2HVveHwCrBSSBaO0V.jpg",
  "belongs_to_collection": null,
  "budget": 100000000,
  "genres": [
    {
      "id": 18,
      "name": "Drama"
    },
    {
      "id": 36,
      "name": "History"
    }
  ],
  "homepage": "http://www.oppenheimermovie.com",
  "id": 872585,
  "imdb_id": "tt15398776",
  "original_language": "en",
  "original_title": "Oppenheimer",
  "overview": "The story of J. Robert Oppenheimer’s role in the development of the atomic bomb during World War II.",
  "popularity": 980.538,
  "poster_path": "/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg",
  "production_companies": [
    {
      "id": 9996,
      "logo_path": "/3tvBqYsBhxWeHlu62SIJ1el93O7.png",
      "name": "Syncopy",
      "origin_country": "GB"
    },
    {
      "id": 33,
      "logo_path": "/8lvHyhjr8oUKOOy2dKXoALWKdp0.png",
      "name": "Universal Pictures",
      "origin_country": "US"
    },
    {
      "id": 507,
      "logo_path": "/aRmHe6GWxYMRCQljF75rn2B9Gv8.png",
      "name": "Atlas Entertainment",
      "origin_country": "US"
    }
  ],
  "production_countries": [
    {
      "iso_3166_1": "GB",
      "name": "United Kingdom"
    },
    {
      "iso_3166_1": "US",
      "name": "United States of America"
    }
  ],
  "release_date": "2023-07-19",
  "revenue": 552000000,
  "runtime": 181,
  "spoken_languages": [
    {
      "english_name": "German",
      "iso_639_1": "de",
      "name": "Deutsch"
    },
    {
      "english_name": "English",
      "iso_639_1": "en",
      "name": "English"
    }
  ],
  "status": "Released",
  "tagline": "The world forever changes.",
  "title": "Oppenheimer",
  "video": false,
  "vote_average": 8.299,
  "vote_count": 1599
}

This database provides so much information! They have different endpoints that can provide different info such as:

• Credits
• Images
• Recommendations
• Reviews
• Videos

and so much more.

My Flix

I decided to name my app 'My Flix' and gave it dark mode look.
I mainly worked on making the site mobile friendly. In the future I would like to add 2 more break points for tablet and desktop views.

Homepage

The homepage is very simple and has 3 clickable links in the header. Clicking the My Flix name will always bring you back to the homepage. The other 2 links I will get to in the next section. Below the header is a simple form with 2 buttons. After you type in a movie title you have the option to select 1 of 2 buttons. The 'Find my movie' button will take you to a new page with the 5 closest titles that match your search. From there you can select the movie you want information on. The "I'm Feeling Lucky!" button will instantly take you to the top result for your search query.

Movie Details

Once you select the movie you want info on, you are presented with some details. The details page provides the following movie info:

• title
• poster
• tagline
• overview
• release date
• runtime
• average rating

At the bottom of the details page you have a button that allows you to add the movie to your watchlist.

Trending

The trending link in the header will take you to a separate page that shows the top 5 trending movies (theaters and home release) of the week. You can click on the details button to get more info.

Watchlist

Finally, the watchlist link will show you a list of any movies that you have added. It will show the title, poster and details button for every movie on your list.

Overall I love how much I learned while building this site. It was great to take everything we have learned over the last few weeks and put it to use. I am a big fan of Sinatra and how easy it makes building sites with different routes. I definitely want to keep adding to the site and making it better. A few things I can add in the future are:

• database storage of watchlist instead of cookies
• more info on the movie details page such as reviews, trailers and even your own rating of the movie
• tablet and desktop views
• possibly add an option to search TV shows as well

I am very pleased with how my mini project came out!

Comments

[Samuel Lubliner]

It's cool that My Flix is mobile friendly! I would like to do the same with mine