NFT API › Quickstart guide

Getting Started with the NFT API with React and Node.js

The 'List NFTs' API demo will walk you through on how users can seamlessly retrieve and display a curated selection of non-fungible tokens (NFTs) from a specified collection or platform.

Prerequisites:

Node.js and npm installed.
Basic knowledge of JavaScript, React, and Express.js.

Steps:

1. Setting Up Node Backend

1.1. Create a new directory for the project:


         
         
           Bash
         
 
         
         
           
           
             1
2
           
 
           
           mkdir nft-collection && cd nft-collection

1.2. Initialize a new Node.js project:


         
         
           Bash
         
 
         
         
           
           
             1
2
           
 
           
           npm init -y

1.3. Install Express and Axios:


         
         
           Bash
         
 
         
         
           
           
             1
2
           
 
           
           npm install express axios

1.4. Create a new file api.js and set up a basic Express server:


         
         
           JavaScript
         
 
         
         
           
           
             1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
           
 
           
           const express = require("express");
const axios = require("axios");
const cors = require("cors");
const path = require("path");

const app = express();
const PORT = 5000;
const BASE_URL = "https://api.1inch.com/nft/v2/byaddress";

app.use(cors()); // To handle CORS issues when making requests to the front end

// Serve static files from the React app
app.use(express.static(path.join(__dirname, "nft-collection/build")));

// We will route all other requests to the nft-collection build
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "nft-collection/build", "index.html"));
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

1.5. Add an endpoint to fetch NFTs (replace API_KEY):


         
         
           JavaScript
         
 
         
         
           
           
             1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
           
 
           
           const BASE_URL = "https://api.1inch.com/nft/v2/byaddress";

app.get("/fetchNfts", async (req, res) => {
  const address = req.query.address || "0xd8da6bf26964af9d7eed9e03e53415d37aa96045";
  const limit = req.query.limit || 50;
  const offset = req.query.offset || 0;
  const chainIds = req.query.chainIds || 1;

  try {
    const constructedUrl = `${BASE_URL}?address=${address}&chainIds=${chainIds}&limit=${limit}&offset=${offset}`;

    const response = await axios.get(constructedUrl, {
      headers: {
        Authorization: `Bearer ${process.env.API_KEY}`
      }
    });

    // Send the data from the API back to the client
    res.json(response.data);
  } catch (error) {
    console.error("Axios Error: ", error.response);
    res.status(500).json({ error: "Failed to fetch NFTs" });
  }
});

2. Setting Up React Frontend

2.1. Create a new React app:


         
         
           Bash
         
 
         
         
           
           
             1
2
           
 
           
           npx create-react-app client

2.2. Navigate to the React app directory:

2.3. Install Axios:


         
         
           Bash
         
 
         
         
           
           
             1
2
           
 
           
           npm install axios

2.4. Create a component NFTList.js inside the src directory:


         
         
           JSX
         
 
         
         
           
           
             1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
           
 
           
           import React, { useState, useEffect } from "react";
import { fetchNFTs } from "./api";

const NFTList = ({ address }) => {
  const [nfts, setNfts] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetchNFTs(address);
        setNfts(response.data.assets);
      } catch (error) {
        console.error("Error fetching NFTs:", error);
      }
    };
    fetchData();
  }, [address]);

  return (
    <div className="Nft-list">
      {nfts.map((nft) => (
        <div key={nft.id}>
          <img src={nft.image_url} alt={nft.name} width="150" />
          <h2>{nft.name}</h2>
          <p>{nft.description}</p>
        </div>
      ))}
    </div>
  );
};

export default NFTList;

2.5. Import and use NFTList in src/App.js:


         
         
           JSX
         
 
         
         
           
           
             1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
           
 
           
           import React from "react";
import "./App.css";
import NFTList from "./NFTList";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My NFT Collection</h1>
      </header>
      <NFTList />
    </div>
  );
}

export default App;

3. Running the Project

3.1. Start the Express server:


         
         
           Bash
         
 
         
         
           
           
             1
2
           
 
           
           node api.js

3.2. In a new terminal, navigate to the client directory and start the React app:

Now, you can view your NFT collection visualization at http://localhost:3000.

That's it! This is a basic setup and you can expand upon this by adding more features, error handling, and styling to get to production.