DEV Community


Posted on

Movie Loft - A Movie DB API Client

Hello DEVs,
Check out this react app I made as a begginer. To put it simply, this app is a client of TMDB's API.

It displays a list of Popular, Now playing, and Top Rated movies/tv_shows on the homepage, as well as a search bar.

App screenshot

It obviously has a search result page that displays the entire search result array from the API response.

And a separate page rendered for each movie/tv_show when the resulting card from the search result or homepage list is clicked.

Have a look on this live site: Movie Loft

If this project intrigues you, you can find the source code here: Github

If you're unfamiliar with APIs, here's how I set one up,

Setup API

  1. Sign up on TMDB website
  2. On mainpage, go to top right avatar icon>settings>API or follow this link
  3. Request for API_KEY
  4. Once you've obtained your key, assign it as the default Authorization header of axios requests,

    axios.defaults.headers.common["Authorization"] = 
        `Bearer ${<API_KEY>}`;

    (Axios is a Javascript library used to make HTTP requests)

  5. Now, follow the Developer docs to start making requests.

In addition, to save time on UI development, I've used Material UI.

Thank you for your time. Have a wonderful day <3

Top comments (0)