Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/falconandrea/azuki-nft-list
Azuki NFT List is a React app built with Next.js that fetches and displays all NFTs from the Azuki collection using the Chainstack Subgraph.
https://github.com/falconandrea/azuki-nft-list
azuki-nft-collection chainstack graphql-client nextjs web3
Last synced: about 2 months ago
JSON representation
Azuki NFT List is a React app built with Next.js that fetches and displays all NFTs from the Azuki collection using the Chainstack Subgraph.
- Host: GitHub
- URL: https://github.com/falconandrea/azuki-nft-list
- Owner: falconandrea
- Created: 2023-07-26T15:52:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-15T17:54:59.000Z (over 1 year ago)
- Last Synced: 2024-10-18T15:36:52.672Z (3 months ago)
- Topics: azuki-nft-collection, chainstack, graphql-client, nextjs, web3
- Language: TypeScript
- Homepage:
- Size: 2.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Azuki NFT List
Azuki NFT List is a React app built with Next.js that fetches and displays all NFTs from the Azuki collection using the Chainstack Subgraph.
## I created this project to participate to a bounty on LearnWeb3DAO.
[Here](https://docs.google.com/document/d/1LIHFx-nWDYPYWfENwjRBcYxB2oBNUyQW5WG4QWL_IFw/edit?usp=sharing) you can find the info about the bounty. 🥇🥇 ***I won with this project.*** 🥇🥇
-----
You can watch a video about how it works [here](https://drive.google.com/file/d/18V8Y4z7Dd0aRA5cq7fltMdWSujamU6nI/view?usp=sharing).
Here all the steps that I did to create this project.
## Create an Account on Chainstack and a Subgraph
1. Go to the Chainstack website: [https://chainstack.com/](https://chainstack.com/)
2. Sign up for a new account or log in if you already have one.
3. Once you are logged in, navigate to the Subgraph section.
4. Create a Project and a Subgraph.
## Configure and Deploy your Subgraph
To do this I used the [Online Documentation](https://docs.chainstack.com/docs/subgraphs-tutorial-a-beginners-guide-to-getting-started-with-the-graph).
1. Install the Graph CLI globally on your system:
```bash
npm install -g @graphprotocol/graph-cli
```
2. Initialize your project with the Graph CLI inside the folder AZUKI:
```bash
graph init
```
3. Edit files `schema.graphql` and `subgraph.yaml`.
4. Generate classes with the command:
```bash
graph codegen
```
5. Go to `src/azuki.ts` and update all code using the code inside the documentation.
6. Compile the subgraph and make it ready to be deployed:
```bash
graph build
```
7. Deploy with the command `Deployment command` that you find inside your Subgraph in your Chainstack Project:
```bash
graph deploy --node https://api.graph-eu.p2pify.com/YOUR_CODE/deploy --ipfs https://api.graph-eu.p2pify.com/YOUR_CODE/ipfs NAME_OF_YOUR_SUBGRAPH
```
8. Now you have to wait the Subgraph update on the Chainstack website.
## Configuration of @graphprotocol/client-cli for the Frontend
To do this I used the documentation on the [Github project](https://github.com/graphprotocol/graph-client).
To fetch and interact with data from the Chainstack subgraph in your frontend app, you'll need to configure the `@graphprotocol/client-cli`.
Open your terminal and inside the frontend directory run the following command to install the `@graphprotocol/client-cli` package as a development dependency in your NextJS app:
```bash
npm install @graphprotocol/client-cli --save-dev
```
After that you have to update the file `.graphclientrc.yml` inside the frontend directory with the endpoint that you can find inside your Subgraph project on Chainstack website.
And launch the command to create a runtime artifact:
```bash
npx graphclient build --fileType json
```
## Create the React APP
After all the configurations specified above, I created this simple page with all Azuki's NFTS where you can filter based on collection traits.