Streamlining Your Contribution: How to Get Your TMDB API Key for LDBflix Contribution
Tags: javascript, opensource, webdev, nextjs
Published: 2024-05-12 14:13:23

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](https://lbdflix.vercel.app/) 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](https://github.com/lambeboluwatife/lbdflix). 

## What is TMDB

[TMDB](https://www.themoviedb.org/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shvj2jv8r8jm8qu7ev5t.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi70jjxnbu0s8yluyirv.png)

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

![3. tmdb account creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74y16614yw0a0okdykbp.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xn7fhraj07kly19j1o5.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/faiz4e2hnuf9wljc3dk4.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzev9gln2n4mi4osvkly.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdy9vzilxl8tku0ch67n.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8butcbl8elzszmhuc9r.gif)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1iz9xhpxm42mohkdjl2.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkc5fdzde7ccofaug36i.png)

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

![11. API Doc reference placement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97vopi31la03cm5od8wr.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/typ2ig31auioeykbr33b.gif)

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](https://github.com/lambeboluwatife/lbdflix) and click the **fork ** button.

![13. Github URL To fork](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3kgifbkr4b7f37dpx4e.png)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi2szs2kel51tw98intf.gif)

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
```

#### Navigate to the cloned directory
```
cd lbdflix
```

#### Install dependencies
```
npm install
```

#### Open the project in your text editor (VSCode)
```
code .
```

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqyrv25wxk8tn5pq7a61.png)

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
```

#### Create a branch 
```
git branch <branch_name>
```

#### Checkout to the created branch
```
git checkout <branch_name>
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bg3p2779b6rybg3ajau.png)

**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
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfs94gbqeic7laa9x01r.png)

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.