When trying things out or learning a new technology it can be a blocker when you have to also think about the API you need to build.

Why not just use an existing one ?

Here are a few Free APIs to get you going.

Oh did I mentioned no API key required !?

1. Deck of cards API

Deck of cards API is a simple API for building with cards - create a deck, shuffle, assign piles, you name it!

What you can get from it:

Create a new deck of cards
Hand out cards to players (with piles)
Manage the deck of cards (Shuffle, redraw, put back)
And more!

Example (Options):


const getCards = async () => {
  // Create a deck (of cards) 
  const url = new URL('https://deckofcardsapi.com/api/deck/new/shuffle');
  const params = new URLSearchParams();
  params.append('deck_count', 1);
  const response = await fetch(url);

  // Draw from the deck (2 cards)
  // const response = await fetch('https://deckofcardsapi.com/api/deck/<<deck_id>>/draw/?count=2');

  // Shuffle the remaining cards in a deck
  // const response = await fetch('https://deckofcardsapi.com/api/deck/<<deck_id>>/shuffle/?remaining=true');

  // Hand out cards to a pile (ie players)
  // const response = await fetch('https://deckofcardsapi.com/api/deck/<<deck_id>>/pile/<<pile_name>>/add/?cards=AS,2S');
  
  // List cards in a pile (ie "player_1" and "player_2")
  // const response = await fetch('https://deckofcardsapi.com/api/deck/<<deck_id>>/pile/<<pile_name>>/list/');

  return response.json();
}

📝 Reference:

Deck of cards API Documentation

💡 Project Ideas:

Blackjack
Poker
Crazy eights

2. Punk API (Beers)

Punk API is a simple API to get information about beers!

What you can get from it:

Name of the beer
Brewing information (pH, boil volume, ibu, etc)
Ingredients
Food pairing (Foods that go well with it!)
And more!

Example (Options):


const getBeers = async () => {
  const url = new URL('https://api.punkapi.com/v2/beers');
  const params = new URLSearchParams();
  params.append('page', 1);
  params.append('per_page', 3);
  url.search = params;

  // Get Paginated Beer Information
  const response = await fetch(url);


  // Get Single Beer Information
  // const response = await fetch('https://api.punkapi.com/v2/beers');

  // Get All Beer Information
  // const response = await fetch('https://api.punkapi.com/v2/beers');
  
  // Get Random Beer Information
  // const response = await fetch('https://api.punkapi.com/v2/beers/random');

  return response.json();
}

📝 Reference:

Punk API Documentation

💡 Project Ideas:

Beer explorer Site
Beer + Meal Pairing match site

3. REST Country API

API to discover information about a specific country.

What you can get from it ?

Region and subregions
Currencies
Capital
Flag Emoji
Postal Code (regex)
And more!

Example (Options):

const getCountries = async () => {
  // Search country by name
  const response = await fetch(
    'https://restcountries.com/v3.1/capital/tallinn'
  );

  // Search by code 
  // const response = await fetch('https://restcountries.com/v3.1/alpha/co');

  // Get Currency information
  // const response = await fetch('https://restcountries.com/v3.1/currency/usd');
  
  // Search countries by language (or language short code - "de")
  // const response = await fetch('https://restcountries.com/v3.1/lang/french');

  // Search countries by Capital city - Greece
  // const response = await fetch('https://restcountries.com/v3.1/capital/athens');

  return response.json();
}

📝 Reference:

REST Country API Documentation

💡 Project Ideas:

Country Explorer
Country to Language feature
Country to Currency feature

4. Disney Character API

API to discover Disney characters.

What you can get from it ?

Character information
Information about the Film or Movie
Images
Link to Disney Fandom page
And more!

Example (Options):

const getCountries = async () => {

  // Search Character by name - "Mickey Mouse"
  const url = new URL('https://api.disneyapi.dev/character');
  const params = new URLSearchParams();
  params.append('name', 'Mickey Mouse');
  url.search = params;
  const response = await fetch(url);

  // Get Characters (Paginated results)
  // const response = await fetch('https://api.disneyapi.dev/character');

  // Search by code 
  // const response = await fetch('https://restcountries.com/v3.1/alpha/co');

  // Get Currency information
  // const response = await fetch('https://restcountries.com/v3.1/currency/usd');
  
  // Search countries by language (or language short code - "de")
  // const response = await fetch('https://restcountries.com/v3.1/lang/french');

  // Search countries by Capital city - Greece
  // const response = await fetch('https://restcountries.com/v3.1/capital/athens');

  return response.json();
}

📝 Reference:

Disney Character API Documentation

💡 Project Ideas:

Disney Character explorer

5. The Metropolitan Museum of Art API

API to discover the art within MET Museum (over 470,000 artworks in its collection).

What you can get from it ?

Search Art work by Artists (ie "Pablo Picasso")
Art name
Link to Wiki data
The Art medium (ie "Gelatin silver print")
Dimension (ie "24.8 x 19 cm (9 3/4 x 7 1/2 in.)")
Information about the Film or Movie
Image
And more!

Example (Options):

const getArtwork = async () => {

  // Search by Artist name (objectIDs) - "Pablo Picasso"
  const url = new URL('https://collectionapi.metmuseum.org/public/collection/v1/search');
  const params = new URLSearchParams();
  params.append('artistOrCulture', true)
  params.append('q', 'pablo picasso')
  url.search = params;
  const response = await fetch(url);

  // Get Object (or Art Information) 
  const response = await fetch(
    'https://collectionapi.metmuseum.org/public/collection/v1/objects/339116'
  );

  return response.json();
}

📝 Reference:

The Metropolitan Museum of Art Collection API Documentation

💡 Project Ideas:

Virtual Art Gallery
Online Art store
Inspiration board
Artist’s Fan page

6. Teleport API

API discover cities - city information, life quality data, photos and nearest city search.

What you can get from it ?

City information
Life quality data (scores)
City photos
Nearest city search
And more!

Example (Options):

const getCityInfo = async () => {

  // Search city name 
  const url = new URL('https://api.teleport.org/api/cities');
  const params = new URLSearchParams();
  params.append('search', 'vancouver')
  url.search = params;
  const response = await fetch(url);

  // Get City Information 
  /*
  * const response = await fetch(
  *   'https://api.teleport.org/api/cities/geonameid:6173331/'
  * );
  */

  // Get City Quality of living information 
  /*
  * const response = await fetch(
  *   'https://api.teleport.org/api/urban_areas/slug:vancouver/scores'
  * );
  */

  return response.json();
}

📝 Reference:

Teleport API Documentation

💡 Project Ideas:

City Explorer

7. Animal API (dogs, cats, and more)

API to for animals.

What you can get from it ?

Dog photos
Cat Photos
Duck Photos
And more!

Example (Options):

const getCityInfo = async () => {

  // Get random dog - 3 photos
  const response = await fetch(
    'https://dog.ceo/api/breeds/image/random/3'
  );

  // Get random cat (photo)
  /*
  * const response = await fetch(
  *   'https://cataas.com/cat'
  * );
  */

  // Get random cat (gif)
  /*
  * const response = await fetch(
  *   'https://cataas.com/cat/gif'
  * );
  */

  // Get random Duck
  /*
  * const response = await fetch(
  *   'https://random-d.uk/api/v2/quack'
  * );
  */

  // Get random Duck
  /*
  * const response = await fetch(
  *   'https://random-d.uk/api/v2/quack'
  * );
  */
  
  return response.json();
}

📝 Reference:

💡 Project Ideas:

Random Cat, Dog or Duck site

And... that’s it for some of the free APIs you can use in your next side project.

If you found this post helpful then be sure to share it with someone! 👍

Jerry Chang

BYTE-Sized

Digestable Content That Will Take You To The Next Level

Free APIs For Your Next Side Project