DEV Community

Cover image for πŸ”“ 10 Free APIs to Power Your Next Project: Unlocking Potential for Developers πŸš€
Sivasubramaniyam
Sivasubramaniyam

Posted on

πŸ”“ 10 Free APIs to Power Your Next Project: Unlocking Potential for Developers πŸš€

APIs to Power Your Next Project

1. OpenWeatherMap API

The OpenWeatherMap API provides weather data for any location in the world, including current weather, forecasts, and historical data. This API is ideal for building weather widgets, dashboards, or travel apps.

Link: OpenWeatherMap API

     import React, { useState, useEffect } from 'react';

     function Weather() {
       const [weather, setWeather] = useState(null);

       useEffect(() => {
         fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY')
           .then(response => response.json())
           .then(data => setWeather(data));
       }, []);

       return (
         <div>
           {weather ? (
             <div>
               <h3>{weather.name}</h3>
               <p>{weather.weather[0].description}</p>
               <p>{Math.round(weather.main.temp - 273.15)}Β°C</p>
             </div>
           ) : (
             <p>Loading...</p>
           )}
         </div>
       );
     }

     export default Weather;
Enter fullscreen mode Exit fullscreen mode

2. Unsplash API

The Unsplash API gives you access to thousands of high-resolution photos. It’s perfect for projects that require visually appealing images, such as dynamic backgrounds, galleries, or search features for stock photos.

Link: Unsplash API

     import React, { useState, useEffect } from 'react';

     function RandomPhoto() {
       const [photo, setPhoto] = useState('');

       useEffect(() => {
         fetch('https://api.unsplash.com/photos/random?client_id=YOUR_API_KEY')
           .then(response => response.json())
           .then(data => setPhoto(data.urls.full));
       }, []);

       return (
         <div>
           {photo ? <img src={photo} alt="Random Unsplash" style={{ width: '100%' }} /> : <p>Loading...</p>}
         </div>
       );
     }

     export default RandomPhoto;
Enter fullscreen mode Exit fullscreen mode

3. NewsAPI

NewsAPI provides access to a wide range of news articles from various sources around the world. You can use this API to build news aggregators, trending news sections, or custom news feeds in your application.

Link: NewsAPI

     import React, { useState, useEffect } from 'react';

     function News() {
       const [articles, setArticles] = useState([]);

       useEffect(() => {
         fetch('https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY')
           .then(response => response.json())
           .then(data => setArticles(data.articles));
       }, []);

       return (
         <div>
           {articles.map((article, index) => (
             <div key={index}>
               <h3>{article.title}</h3>
               <p>{article.description}</p>
               <a href={article.url} target="_blank" rel="noopener noreferrer">Read more</a>
             </div>
           ))}
         </div>
       );
     }

     export default News;
Enter fullscreen mode Exit fullscreen mode

4. The Cat API

The Cat API is a fun and simple API that provides random images of cats. It’s great for adding a playful element to your app, such as a "random cat picture" feature or a pet adoption site.

Link: The Cat API

     import React, { useState, useEffect } from 'react';

     function RandomCat() {
       const [catImage, setCatImage] = useState('');

       useEffect(() => {
         fetch('https://api.thecatapi.com/v1/images/search?api_key=YOUR_API_KEY')
           .then(response => response.json())
           .then(data => setCatImage(data[0].url));
       }, []);

       return (
         <div>
           {catImage ? <img src={catImage} alt="Random Cat" style={{ width: '100%' }} /> : <p>Loading...</p>}
         </div>
       );
     }

     export default RandomCat;
Enter fullscreen mode Exit fullscreen mode

5. Currency Exchange API (Exchangerate API)

This API provides real-time currency exchange rates. It’s useful for financial applications, e-commerce platforms, or any project that requires currency conversion.

Link: Exchangerate API

     import React, { useState, useEffect } from 'react';

     function ExchangeRates() {
       const [rates, setRates] = useState({});

       useEffect(() => {
         fetch('https://api.exchangerate-api.com/v4/latest/USD')
           .then(response => response.json())
           .then(data => setRates(data.rates));
       }, []);

       return (
         <div>
           <h3>Exchange Rates (USD)</h3>
           {Object.keys(rates).length > 0 ? (
             <ul>
               {Object.entries(rates).map(([currency, rate]) => (
                 <li key={currency}>{currency}: {rate}</li>
               ))}
             </ul>
           ) : (
             <p>Loading...</p>
           )}
         </div>
       );
     }

     export default ExchangeRates;
Enter fullscreen mode Exit fullscreen mode

6. OpenAI GPT-3 API (Limited Free Tier)

The GPT-3 API from OpenAI offers powerful natural language processing capabilities. Use it to generate text, answer questions, create chatbots, or build smart content tools. Note that it has a limited free tier.

Link: OpenAI GPT-3 API

     import React, { useState } from 'react';

     function GPT3Example() {
       const [responseText, setResponseText] = useState('');

       const fetchGPT3Response = () => {
         fetch('https://api.openai.com/v1/completions', {
           method: 'POST',
           headers: {
             'Authorization': `Bearer YOUR_API_KEY`,
             'Content-Type': 'application/json'
           },
           body: JSON.stringify({
             model: 'text-davinci-003',
             prompt: 'Write a tagline for a tech company',
             max_tokens: 10
           })
         })
           .then(response => response.json())
           .then(data => setResponseText(data.choices[0].text.trim()));
       };

       return (
         <div>
           <button onClick={fetchGPT3Response}>Get Tagline</button>
           <p>{responseText}</p>
         </div>
       );
     }

     export default GPT3Example;
Enter fullscreen mode Exit fullscreen mode

7. JSONPlaceholder

JSONPlaceholder is a free online REST API that you can use for testing and prototyping. It provides fake data for posts, comments, users, and more. It’s especially useful when building and testing front-end applications.

Link: JSONPlaceholder

     import React, { useState, useEffect } from 'react';

     function Posts() {
       const [posts, setPosts] = useState([]);

       useEffect(() => {
         fetch('https://jsonplaceholder.typicode.com/posts')
           .then(response => response.json())
           .then(data => setPosts(data));
       }, []);

       return (
         <div>
           <h3>Posts</h3>
           {posts.map(post => (
             <div key={post.id}>
               <h4>{post.title}</h4>
               <p>{post.body}</p>
             </div>
           ))}
         </div>
       );
     }

     export default Posts;
Enter fullscreen mode Exit fullscreen mode

8. PokeAPI

PokeAPI offers a vast amount of data on PokΓ©mon, including details on PokΓ©mon species, moves, abilities, and more. It’s perfect for building PokΓ©mon-related games or informational apps for fans.

Link: PokeAPI

     import React, { useState, useEffect } from 'react';

     function Pokemon() {
       const [pokemon, setPokemon] = useState(null);

       useEffect(() => {
         fetch('https://pokeapi.co/api/v2/pokemon/pikachu')
           .then(response => response.json())
           .then(data => setPokemon(data));
       }, []);

       return (
         <div>
           {pokemon ? (
             <div>
               <h3>{pokemon.name}</h3>
               <img src={pokemon.sprites.front_default} alt={pokemon.name} />
             </div>
           ) : (
             <p>Loading...</p>
           )}
         </div>
       );
     }

     export default Pokemon;
Enter fullscreen mode Exit fullscreen mode

9. JokeAPI

JokeAPI delivers random jokes in various categories, including programming and general humor

. It includes filters for safe-for-work (SFW) and not-safe-for-work (NSFW) content, making it ideal for adding humor to your app.

Link: JokeAPI

     import React, { useState, useEffect } from 'react';

     function RandomJoke() {
       const [joke, setJoke] = useState('');

       useEffect(() => {
         fetch('https://v2.jokeapi.dev/joke/Programming')
           .then(response => response.json())
           .then(data => setJoke(data.joke || `${data.setup} - ${data.delivery}`));
       }, []);

       return (
         <div>
           <h3>Random Joke</h3>
           <p>{joke}</p>
         </div>
       );
     }

     export default RandomJoke;
Enter fullscreen mode Exit fullscreen mode

10. OpenLibrary API

OpenLibrary provides access to data on millions of books, authors, and subjects. You can use it to build a book recommendation system, a digital library, or a literary research tool.

Link: OpenLibrary API

     import React, { useState, useEffect } from 'react';

     function BookInfo() {
       const [book, setBook] = useState(null);

       useEffect(() => {
         fetch('https://openlibrary.org/api/books?bibkeys=ISBN:0451526538&format=json')
           .then(response => response.json())
           .then(data => setBook(data['ISBN:0451526538']));
       }, []);

       return (
         <div>
           {book ? (
             <div>
               <h3>{book.details.title}</h3>
               <p>Author: {book.details.authors[0].name}</p>
             </div>
           ) : (
             <p>Loading...</p>
           )}
         </div>
       );
     }

     export default BookInfo;
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
ramk777stack profile image
Ramkumar.barani

Great share !!