Using icy.tools, GraphQL, and Remix to Build an NFT Dashboard
Published:
This walkthrough demos how to get an API key from icy.tools, write GraphQL queries for common pieces of NFT data, and create a Remix app to display the GraphQL query results.
Episode Summary
In this episode, Dan from icy.tools discusses building and using the Icy.tools GraphQL API and React hooks package for querying NFT data. The hosts demonstrate how to create a Remix app from scratch that connects to the Icy.tools API to display trending NFT collections. They also showcase the new icy.tools React hooks package, which provides pre-built hooks for common NFT data queries. The episode covers setting up API authentication, writing GraphQL queries, creating a basic dashboard UI in Remix, and deploying the app to Vercel. It also explores the open-source icy.tools React hooks package, demonstrating its usage in an example app to display NFT collection data and individual wallet holdings.
Chapters
00:00 - Introduction and Overview
Dan, co-founder of IcyTools, introduces himself and discusses the recent acquisition by QuickNode. He explains his focus on building APIs and developer tools for the NFT space. The hosts discuss the decision to build a GraphQL API, with Dan highlighting its flexibility and suitability for blockchain data. They also touch on the main IcyTools product (the dashboard) versus the API for developers. This chapter sets the stage for the technical demonstration to follow, providing context on the tools and technologies that will be showcased.
02:56 - Setting Up the Development Environment
The hosts begin the practical demonstration by showing how to access the IcyTools API playground. They explain the authentication process using an API key and demonstrate how to make API requests using curl or fetch. The chapter then moves on to creating a boilerplate Remix app from scratch. The hosts walk through setting up the project structure, creating necessary files, and writing a basic GraphQL query to fetch trending NFT collections. This section provides a step-by-step guide for developers to start building with the IcyTools API.
07:05 - Building the Remix App
This chapter focuses on building out the Remix app to display NFT collection data. The hosts explain Remix concepts like the loader function and how to use it to fetch data server-side, keeping the API key secure. They demonstrate how to create a basic UI to display the fetched data, starting with a simple list of collection names and then expanding to a more detailed table with floor prices, volumes, and other metrics. The chapter concludes with a brief demonstration of deploying the app to Vercel, showing how quickly a functional NFT dashboard can be created and published.
17:35 - Exploring the IcyTools React Hooks Package
The final chapter introduces the IcyTools React hooks package, an open-source project that provides pre-built hooks for common NFT data queries. The hosts clone the package repository, set up the example app, and demonstrate its usage. They showcase two main hooks: one for fetching trending collections and another for displaying NFTs owned by a specific wallet. The chapter also discusses the open-source nature of the project, encouraging contributions and feedback from the community. It concludes with a brief exploration of the package’s flexibility, showing how query parameters can be easily adjusted to change the data displayed.