HOW TO CREATE AN NFT GALLERY

The purpose of a blockchain is to create a ledger that contains all the transactions that will ever occur on the blockchain.  Transactions can range from swapping tokens or minting NFTS, among other things.  In week 4 of Web3 University, students learn how to efficiently query the blockchain.  This can be arduous when attempting to accomplish a task such as figuring out which NFTs a wallet owns.  However, it is made almost effortless using the Alchemy API.  The Alchemy API has already queried the blockchain with all the data indexed.  Students will be exposed to NextJs and Tailwind CSS, React usestate, and the Alchemy API.

NEXTJS AND TALWINDCSS

JavaScript and CSS are integral components for creating websites.  JavaScript is the programming language of the internet while CSS is the styling tool.  Both JavaScript and CSS have frameworks and libraries available to developers to make design and development an easier process.  A popular library () for JavaScript is React.  NextJS is a react framework.

While JavaScript handles the logic of the development process, CSS handles the visual design.  This project incorporates the CSS framework TailwindCSS which advertises itself  as a way to “rapidly build a modern website without ever leaving HTML”.  Using NextJS and TailwindCSS in tandem allows a developer to apply all aspects of development on a single page.

The following image is an example of a button that when clicked will copy a contract address.  React uses the keyword className to create classes.  Within className are TailwindCSS utilities which apply CSS properties.

REACT USESTATE

An important concept in React is the idea of state.  React uses components to break down a project into individual pieces that ultimately come together to form a final working product.  Each component functions within its own state. One way to implement state is using classes.

As React has evolved, the implementation of classes has changed with the use of Hooks.

The initial code to fetch data from the blockchain is set up through the use of React hooks.

APPLICATION PROGRAMMING INTERFACE

The most important lesson for this week is learning how to interact with APIs (Application programming interfaces).  APIs allow for websites to communicate with each other.  This project uses the Alchemy API to parse data from the Ethereum blockchain.  Inputting a wallet address will use the Alchemy API to retrieve all the NFTs the wallet owns.  Inputting a wallet address and a contract address will return all of the NFTs owned by that wallet for the specified collection.  Inputting a contract address with the ‘Fetch for Collection’ box checked returns the entire collection stored in the specified contract address.

CONCLUSION

As students progress through Alchemy’s Web3 University: Road to Web3, each week provides new challenges for growth.  For new developers that haven’t accumulated experience, week 4 is very challenging.  Students learn NextJS, TailwindCSS, React Hooks, and interacting with APIs.  This lesson teaches students that documentation is a developer’s best friend.  Putting it all together, students create an NFT gallery through a wallet or contract address using the Alchemy API.