Content Catalog

​

Overview

​

TMDB Service

​

Configuration

import axios from "axios";

const TMDB_API_KEY = process.env.NEXT_PUBLIC_TMDB_API_KEY;
const BASE_URL = "https://api.themoviedb.org/3";

const tmdbClient = axios.create({
  baseURL: BASE_URL,
  params: { api_key: TMDB_API_KEY, language: "es-ES" },
});

​

Data Models

​

TMDB Movie Interface

export interface TmdbMovie {
  id: number;
  title?: string;
  name?: string;
  poster_path: string | null;
  backdrop_path: string | null;
  overview: string;
  vote_average: number;
  release_date?: string;
  first_air_date?: string;
  genre_ids: number[];
  media_type?: string;
}

​

TMDB Response Interface

export interface TmdbResponse {
  results: TmdbMovie[];
}

​

Content Fetching Functions

export async function getTrendingAll(timeWindow: "day" | "week" = "week"): Promise<TmdbMovie[]> {
  const { data } = await tmdbClient.get<TmdbResponse>(`/trending/all/${timeWindow}`);
  return data.results.slice(0, 10);
}

export async function getNowPlayingMovies(): Promise<TmdbMovie[]> {
  const { data } = await tmdbClient.get<TmdbResponse>("/movie/now_playing");
  return data.results.slice(0, 10);
}

export async function getTopRatedSeries(): Promise<TmdbMovie[]> {
  const { data } = await tmdbClient.get<TmdbResponse>("/tv/top_rated");
  return data.results.slice(0, 5);
}

​

Image Handling

​

Poster URL Generation

export function getPosterUrl(path: string | null, size = "w500"): string {
  if (!path) return "/images/placeholder.jpg";
  return `https://image.tmdb.org/t/p/${size}${path}`;
}

• path: The poster_path or backdrop_path from TMDB
• size: Image size (default: “w500”)

• Poster sizes: w92, w154, w185, w342, w500, w780, original
• Backdrop sizes: w300, w780, w1280, original

​

Usage Example

import { getTrendingAll } from '@/infrastructure/external/tmdbService';

// Fetch weekly trending content
const weeklyTrending = await getTrendingAll('week');

// Fetch daily trending content
const dailyTrending = await getTrendingAll('day');

​

Content Display Patterns

const displayTitle = movie.title || movie.name || 'Untitled';

const releaseDate = movie.release_date || movie.first_air_date;
const year = releaseDate ? new Date(releaseDate).getFullYear() : null;

const rating = movie.vote_average.toFixed(1);
const ratingPercentage = (movie.vote_average * 10).toFixed(0);

​

Environment Configuration

NEXT_PUBLIC_TMDB_API_KEY=your_tmdb_api_key_here

​

API Endpoints Used

​

Best Practices

1. Always check for null images - Use the getPosterUrl helper to handle null paths
2. Handle both movies and TV shows - Check both title/name and release_date/first_air_date
3. Limit results - The service already limits to 5-10 items per request
4. Use appropriate image sizes - Choose based on display context to optimize bandwidth
5. Cache responses - Consider caching TMDB responses to reduce API calls
6. Localization - The service is configured for Spanish (es-ES) content
7. Error handling - Implement try-catch blocks when calling these functions

​

Content Categories