start-date: 8/23/2023
Project ScreenShots
Project Overview - the entirety of this project can be broken down into four major facts THE PAGES (3) - home page - movie detail page - movie list page
THE USER INTERFACES
- Header UI
- Sidebar UI
- Movie Banner UI
- Movie Slide UI
- Movie Detail UI
- Movie List UI
- Search Modal UI
THE API ENDPOINTS
- TMDB Movie List Request
- TMDB Popular Movies Request
- TMDB Upcoming Movies Request
- TMDB Weekly Trending Movies Request
- TMDB Movie Detail Request
- TMDB Movie Recommendation Request
- TMDB Genre Based Movie Request
- TMDB Language Based Movie Request
THE FUNCTIONALITIES
- Searching Functionality
- Load More Functionality
- Pages Communication
- Dynamic Rendering
Project Pages:
Project UI Design:
Project API ENDPOINT (TMDB):
TMDB CONFIGURATION REQUEST
https://api.themoviedb.org/3/configuration?api_key={API_KEY}
The data returned here in the configuration endpoint is designed to provide some of the required information you'll need as you integrate our API.
Field Name | Description | Example Values |
---|---|---|
images | Object containing image-related information | See below |
images.base_url | Base URL for retrieving images | http://image.tmdb.org/t/p/ |
images.secure_base_url | Secure base URL for retrieving images | https://image.tmdb.org/t/p/ |
images.backdrop_sizes | List of available backdrop image sizes | ["w300", "w780", "w1280", "original"] |
images.logo_sizes | List of available logo image sizes | ["w45", "w92", "w154", "w185", "w300", "w500", "original"] |
images.poster_sizes | List of available poster image sizes | ["w92", "w154", "w185", "w342", "w500", "w780", "original"] |
images.profile_sizes | List of available profile image sizes | ["w45", "w185", "h632", "original"] |
images.still_sizes | List of available still image sizes | ["w92", "w185", "w300", "original"] |
change_keys | List of keys used for tracking changes in the API responses | See below |
change_keys.[key] | Descriptions of keys used for tracking changes | See below |
Example of images
object:
{
"base_url": "http://image.tmdb.org/t/p/",
"secure_base_url": "https://image.tmdb.org/t/p/",
"backdrop_sizes": ["w300", "w780", "w1280", "original"],
"logo_sizes": ["w45", "w92", "w154", "w185", "w300", "w500", "original"],
"poster_sizes": ["w92", "w154", "w185", "w342", "w500", "w780", "original"],
"profile_sizes": ["w45", "w185", "h632", "original"],
"still_sizes": ["w92", "w185", "w300", "original"]
}
TMDB MOVIE LIST REQUEST
https://api.themoviedb.org/3/{MOVIE-CATEGORY}?api_key={API-KEY}&page=1
This URL is the endpoint for accessing the TMDB (The Movie Database) API. It allows you to make requests to retrieve information about movies based on various categories, such as popular movies, top-rated movies, weekly trending movies, and upcoming movies.
Field | Description | Data Type | Sample Data |
---|---|---|---|
page | The current page of movie results | Number | 1 |
results | An array of movie entries | Array | - (see below for movie entry structure) |
total_pages | The total number of pages of movie results | Number | 40369 |
total_results | The total number of movie results | Number | 807368 |
Each movie entry in the results
array has the following structure:
Field | Description | Data Type | Sample Data |
---|---|---|---|
adult | Indicates if the movie is for adults only | Boolean | false |
backdrop_path | URL to the backdrop image of the movie | String | "/xFYpUmB01nswPgbzi8EOCT1ZYFu.jpg" |
genre_ids | An array of genre IDs associated with the movie | Array | [12, 28, 18] |
id | Unique identifier for the movie | Number | 980489 |
original_language | The original language of the movie | String | "en" |
original_title | The original title of the movie | String | "Gran Turismo" |
overview | A brief overview or synopsis of the movie | String | "The ultimate wish-fulfillment tale..." |
popularity | Popularity score of the movie | Number | 2933.587 |
poster_path | URL to the poster image of the movie | String | "/51tqzRtKMMZEYUpSYkrUE7v9ehm.jpg" |
release_date | The release date of the movie | String | "2023-08-09" |
title | The title of the movie | String | "Gran Turismo" |
video | Indicates if there is a video available for the movie | Boolean | false |
vote_average | Average vote rating for the movie | Number | 8 |
vote_count | The total number of votes for the movie | Number | 806 |
TMDB Movie Detail Request
https://api.themoviedb.org/3/movie/{MOVIE-ID}?api_key={API-KEY}&append_to_response=casts,videos,releases
This URL is used to retrieve detailed information about a specific movie by specifying its unique {MOVIE-ID}. it utilizes the append_to_response parameter to include additional data about the movie, such as its casts, videos, and releases, providing comprehensive information about the movie in a single API request.
Key | Type | Description |
---|---|---|
belongs_to_collection | string | Collection to which the movie belongs (optional) |
budget | number | Budget of the movie (optional) |
genres | Array<{ id: number, name: string }> | List of genres associated with the movie (optional) |
homepage | string | Homepage URL of the movie (optional) |
imdb_id | string | IMDb ID of the movie (optional) |
production_companies | object[] | List of production companies (optional) |
production_countries | object[] | List of production countries (optional) |
revenue | number | Revenue generated by the movie (optional) |
spoken_languages | object[] | List of spoken languages in the movie (optional) |
status | string | Status of the movie (optional) |
tagline | string | Tagline or slogan of the movie (optional) |
certification | string | Certification or rating of the movie |
starring | string | List of starring cast members |
directors | string | List of directors of the movie |
runtime | number | Duration of the movie in minutes |
videos | { results: Array<{ name: string, key: string, site: string, type: string, id: string }> } | Object containing an array of MovieVideoInfo (optional) |
casts | { cast: Array<{ name: string }>, crew: Array<{ name: string, department: string }> } | Object containing arrays of Cast and Crew |
releases | { countries: Array<{ certification: string, release_date: string }> } | Object containing release information (optional) |
TMDB SEARCH MOVIE REQUEST
https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&query=${SEARCH_TEXT}
This URL retrives a list of movies whose name corresponde to the text in the query parameter
TMDB DISCOVER MOVIE REQUEST (BY LANGUAGE & BY GENRE)
DISCOVER MOVIES BY LANGUAGE
https://api.themoviedb.org/3/discover/movie?api_key={API_KEY}&with_genres=28
DISCOVER MOVIES BY GENRE
https://api.themoviedb.org/3/discover/movie?api_key={API_KEY}&with_original_language=ko
This URL retrives a list of movies that corresponde to a certain category.
via the with_original_language={LANGUAGE-INITIAL}
we specify a category based on a language.
via the URL https://api.themoviedb.org/3/configuration/languages?api_key={API_KEY}
we can obtain languages supported by TMDB & their initials.
via the with_genres={GENRE-ID}
we specify a category based on a genre.
via the URL https://api.themoviedb.org/3/genre/movie/list?api_key={API_KEY}
we can obtain genres supported by TMDB & their initials.
TMDB MOVIE RECOMMENDATION REQUEST
https://api.themoviedb.org/3/movie/{MOVIE-ID}/recommendations?api_key={{API_KEY}}
This URL retrives a list of recommended movies based on a particular movie.