Use Dribbble’s API with React and Next.js

May 21, 2019

Using React has been fun, but also very challenging. Over the weekend, I struggled to figure out how to use Dribbble’s API (v2) to feed my shots into my personal site. Here’s the directions to get you started.

I’ve been using Next.js, a React framework created by the wonderful folks at @zeithq, for over a year and if you’re looking to get started with React, it’s the best.


Registering Your Dribbble Application

You need to register an application with Dribbble to be able access content via the API, this process hasn’t changed with the update to v2.

  1. Login to your dribbble.com account page
  2. Select Applications from the side menu
  3. in the Developers section, select Register a New Application
  4. Fill in the form, use your website URL in the Callback URL field (you will need that later)
  5. Read the Terms, and Register

You will be redirected to a screen that shows your successfully registered app details, note the Client ID and Client Secret numbers at the bottom of the page.

Generating your Access Token

Using Postman was the easiest way I found to do this, so download and install that first.

Authorizing

  1. Open a browser window and log into your Dribbble account
  2. In a new window, go to the following url: https://dribbble.com/oauth/authorize?client_id=CLIENT_ID (Replace CLIENT_ID with the long Client ID number provided when you registered your application)
  3. An Authorization Screen will appear with the name of the application you registered, choose to Authorize your application