DEV Community

Cover image for Streamlining Your Contribution: How to Get Your TMDB API Key for LDBflix Contribution
Zechariah Hounwanou
Zechariah Hounwanou

Posted on

Streamlining Your Contribution: How to Get Your TMDB API Key for LDBflix Contribution

Developers wishing to contribute to the LBDflix open-source project might not be able to do so without explicit instructions about how to obtain the API key from The Movie Database (TMDB).

In this article, we will guide developers through the process of obtaining their own TMDB API Key and securely storing it in their project development environment so that they can access and contribute to the data easily.

What is LDBflix

LDBflix is a dynamic movie web application that provides information and trailers for a wide range of movies and television shows. It is a comprehensive movie collection for any movie fan, and it also suggests movies and TV episodes to viewers. It is an open-source project that welcomes developers, designers, writers, and movie enthusiasts to cooperate and learn.

This open-source project provides a user-friendly interface for browsing and discovering a large collection of movies and TV episodes. A third-party API is used to obtain data, ensuring up-to-date information.

The platform is created using NextJS and CSS for styling. Here's the GitHub repository.

What is TMDB

TMDB is a community-built Movie and TV Show database that offers a fantastic Application Programming Interface (API) for accessing available movies and television shows. It also provides details about movies and TV shows, such as titles, synopses, release dates, cast lists, and genres.

Once your API key has been generated, you will be able to interact with the TMDB API and retrieve data.

How to Obtain a TMDB API Key

Step 1: Open your browser and enter the phrase "tmdb", and you should see several results.

1. Search result for tmdb

Step 2: Click on the first result available in the search and it will redirect you to The Movie Database's official home page.

2. the official home page of tmdb

Step 3: You can create an account on TMDB by clicking Join TMDB.

3. tmdb account creation

Step 4: Complete the sign-up form with valid credentials, and then click the Sign Up button.

4. clicking sign up button for account creation

Step 5: After registering for a TMDB account, the next step is to confirm your TMDB account information. The next step is to go to your mailbox. You will receive a Verification required email, and you will need to click the Activate My Account button to complete the process.

5. tmdb email verification reqirement

Step 6: When you click the Activate My Account button in your email, you will be redirected to the TMDB login page with a banner that says Email Verified. You can now log in by entering your valid details and clicking Login.

6. tmdb login after email verification

Step 7: After successfully logging in, you will be taken to the Dashboard page, which displays all of your account information. Next, you need to generate a TMDB API key for your account by clicking the image icon in the top right corner of your dashboard. Next, locate and click on the Settings option in the dropdown menu.

7. tmdb dashboard

Step 8: Now that you're on your account's Settings page, you'll need to generate your own API key. To begin, select the API option from the Settings Menu located in the bottom left corner. Next, click on the Create tab and choose the Developer option to register the API Key as a Developer. Following that, you will be taken to a page where you must enter certain credentials and submit a form.

NOTE: After 24 hours, TMDB will validate your request and generate your API Key. Don't panic after submitting; you'll receive an acceptance notification on your dashboard within 24 hours.

8. tmdb API Key creation

Step 9: Once your API Key creation request has been granted, return to the API option in your Settings Menu. The API Key and API Read Access Token have already been generated, but it is the API Key you should be concerned about first.

9. accessing tmdb API Key

Congratulations, you have successfully generated your own TMDB API key.

How to Access TMDB Documentations

Now that you've received your API Key, let's look through the documentation to see which APIs are available for consumption.

To begin using TMDB Documentation, return to the API option of your Settings Menu and select the link below the Documentation section.

10. documentation section

After that, you should be taken to the Getting Started section of the TMDB API Documentation.

11. API Doc reference placement

Click on the API Reference tab in the top left corner of the Documentation section to access a list of available APIs. In the left sidebar of the page, you can see and scroll through a list of APIs once you have completed that process.

12. List of Available APIs

Voila, you have now explored all the APIs in TMDB. Now, add the API key you created previously to the open-source project so you can contribute to it.

How to Add Your API Key to LDBflix

Step 1: You will need to fork the Github repository where LDBflix is stored. To do so, visit the GitHub repository here and click the *fork * button.

13. Github URL To fork

Step 2: Next, clone the forked repository to your machine so that you can add your API Key and contribute features to the open-source project.

To begin, get the forked repository URL and clone the project to your machine.

14. how to clone the repo

Open the terminal/command prompt on your machine and execute the following commands:

Clone the Repo

git clone git@github.com:<your github username>/lbdflix.git
Enter fullscreen mode Exit fullscreen mode

Navigate to the cloned directory

cd lbdflix
Enter fullscreen mode Exit fullscreen mode

Install dependencies

npm install
Enter fullscreen mode Exit fullscreen mode

Open the project in your text editor (VSCode)

code .
Enter fullscreen mode Exit fullscreen mode

Step 3: After successfully cloning the project to your machine and opening it in your VSCode Text Editor, your project's folder structure should look like this.

15. Cloned project in VScode

Next, let's integrate the API Key we obtained from TMDB into our cloned open-source project. Your first step will be to create a separate branch for your changes, to do so type the following in your terminal.

Initializing the repository

git init
Enter fullscreen mode Exit fullscreen mode

Create a branch

git branch <branch_name>
Enter fullscreen mode Exit fullscreen mode

Checkout to the created branch

git checkout <branch_name>
Enter fullscreen mode Exit fullscreen mode

Your contribution to the project is now possible since the branch has been created. To get started create a .env file in the root directory of your project and include your API Key.

It should look like this MOVIE_API = <Your API Key>

16. how the .env file is placed

Step 4: Your API Key has now been successfully added to the project, so you will need to run it to verify everything is working. To do so, type this command in your terminal:

npm run dev
Enter fullscreen mode Exit fullscreen mode

When the command executes successfully without an error, navigate to http://localhost:3000 in your browser to see the UI of your project.

17. project working fine

Congratulations, you have successfully added your API key to the open-source project LDBflix, and can now easily contribute to the project.

Conclusion

The objective of this tutorial is to demonstrate how to generate a TMDB API key and use it to contribute to the open-source LDBflix project's front end.

We hope to see your PR soon, and here's to many more coding adventures and contributions ahead.

If you have found this helpful, please consider sharing it with others who might benefit.

Top comments (1)

Collapse
 
lambeboluwatife profile image
Lambe Boluwatife

I love this article.
It is very explanatory. Thank you for this