Bless API Book

The Movie Database API

Entertainment
Intermediate

Overview

Access information about movies, TV shows, actors, and more

Integration Guide

Step 1: Get API Key

To use The Movie Database API, you need to sign up for an account and request an API key.

  1. Visit TMDB Sign Up to create an account
  2. Verify your email address
  3. Go to your API Settings page
  4. Request an API key for developer use
  5. Fill out the required information about your application
  6. Once approved, you'll receive your API key

Step 2: Set Up Your Project

Create the necessary files for your movie explorer application:

  • index.html - The HTML structure
  • styles.css - CSS for styling
  • movies.js - JavaScript for API integration
  • placeholder.jpg - A fallback image for movies without posters
  • placeholder-person.jpg - A fallback image for actors without profile pictures

Step 3: Implement the Code

Copy the following code into your project files:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Movie Explorer</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>Movie Explorer</h1>
      <div class="search-container">
        <input type="text" id="search-input" placeholder="Search for movies...">
        <button id="search-btn">Search</button>
      </div>
    </header>
    
    <nav class="tabs">
      <button class="tab-btn active" data-tab="popular">Popular</button>
      <button class="tab-btn" data-tab="trending">Trending</button>
      <button class="tab-btn" data-tab="search-results">Search Results</button>
    </nav>
    
    <main>
      <div id="movies-grid" class="movies-grid">
        <!-- Movies will be displayed here -->
        <div class="loading">Loading movies...</div>
      </div>
      
      <div class="pagination" id="pagination">
        <!-- Pagination controls will be displayed here -->
      </div>
    </main>
    
    <!-- Movie Details Modal -->
    <div id="movie-modal" class="modal">
      <div class="modal-content">
        <span class="close-btn">&times;</span>
        <div id="movie-details" class="movie-details">
          <!-- Movie details will be displayed here -->
        </div>
      </div>
    </div>
  </div>
  
  <script src="movies.js"></script>
</body>
</html>

Step 4: Replace the API Key

Replace your_api_key_here in the JavaScript file with your actual API key.

Step 5: Test Your Implementation

Open your HTML file in a browser to test your movie explorer application. You should be able to:

  • Browse popular and trending movies
  • Search for movies by title
  • View detailed information about a movie by clicking on it
  • Watch movie trailers
  • See the cast of each movie
  • Navigate through paginated results

Error Handling

Common Errors

  • 401 Unauthorized: Invalid API key
  • 404 Not Found: The resource you requested could not be found
  • 429 Too Many Requests: Rate limit exceeded

Rate Limiting

The Movie Database API has rate limits to prevent abuse:

  • 40 requests every 10 seconds
  • Approximately 3 requests per second

Image Handling

The Movie Database API provides different image sizes for posters and backdrops. The base URL for images is https://image.tmdb.org/t/p/followed by the size and file path.

Common poster sizes:

  • w92 - Small
  • w185 - Medium
  • w500 - Large
  • original - Original size

Always implement fallback images for cases where movie posters or actor profiles are not available.

API Details

Base URL
https://api.themoviedb.org/3
Authentication
API Key
Documentation
Official Docs

Endpoints

  • GET
    /movie/popular

    Get a list of popular movies

    Parameters
    • api_key*
      string - Your API key
    • language
      string - ISO 639-1 language code (default: en-US)
    • page
      number - Page number (default: 1)
    • region
      string - ISO 3166-1 region code
  • GET
    /movie/{movie_id}

    Get detailed information about a specific movie

    Parameters
    • movie_id*
      number - The ID of the movie
    • api_key*
      string - Your API key
    • language
      string - ISO 639-1 language code (default: en-US)
    • append_to_response
      string - Additional data to include (e.g., videos,images,credits)
  • GET
    /search/movie

    Search for movies by title

    Parameters
    • api_key*
      string - Your API key
    • query*
      string - Text query to search
    • language
      string - ISO 639-1 language code (default: en-US)
    • page
      number - Page number (default: 1)
    • include_adult
      boolean - Include adult content (default: false)
    • region
      string - ISO 3166-1 region code
    • year
      number - Year of release
    • primary_release_year
      number - Primary year of release
  • GET
    /trending/{media_type}/{time_window}

    Get trending movies, TV shows, or people

    Parameters
    • media_type*
      string - Type of media (all, movie, tv, person)
    • time_window*
      string - Time window (day, week)
    • api_key*
      string - Your API key
  • GET
    /movie/{movie_id}/credits

    Get the cast and crew for a movie

    Parameters
    • movie_id*
      number - The ID of the movie
    • api_key*
      string - Your API key
    • language
      string - ISO 639-1 language code (default: en-US)

Bless Network Resources