How-to

How to build a Web3 App with Webflow and Wized

This article is a guide on how to connect to a blockchain, build a no-code web3 app, and render Non-Fungible Tokens (NFTs) on a website.

If you want to learn how to:

• connect to a blockchain

• build a no-code web3 app

• Render NFT’s on your site

Then you’re going to love this post.

Let’s get started!

1. Build your project with Webflow

In this case we’re building a simple web app that renders all of the NFT’s of a wallet address on our Webflow website.

If you want to follow along, feel free to clone this project.

Once your Webflow project is ready, head over to Wized, and create a new project.

Add the script to the body of your project, and open the Wized configurator.

Now it’s time to head over to Alchemy.

2. Make a free Alchemy account.

What is Alchemy and why do we need it?

Alchemy is a powerful blockchain development platform. We’re going to use Alchemy’s API to interact with the blockchain.

The first thing you’ll need to do is make a free account on alchemy.com.

To do that, simply go to their homepage, click on the “get started for free” button, and create an account.

Once you have an account, go to the dashboard and click on Create app.

In this case, I choose to deploy my app on Ethereum’s test net Rinkeby, but if you want to deploy your app on the main net or on Polygon, then choose that option.

Once you filled in the details, you’re going to get an API key.

Keep your API key secure, and don’t share it with anyone.

3. Connect Alchemy with Wized

Connecting Alchemy with Wized is super easy if you follow along.

  1. Open Wized and create a new app in the My Apps panel
  2. Choose Rest API and call it Alchemy
  3. Copy the HTTP url from alchemy and add it to your Wized Alchemy app as the base url

That’s it!

Now we can start making any API calls we want.

To see what’s possible, check out the Alchemy docs. There are over a dozen different API’s which you can use.

In this example, we’re going to use the getNFTs endpoint, which you can find under NFT API in the Enhanced APIs section.

4. Making a request

To make a request to this endpoint, all you have to do is:

  1. Create a new Data In request, select Alchemy and add a name to your request
  2. Set the endpoint address to /getNFTs/
  3. Then, select GET under request type
  4. Finally, add a url parameter with a key of owner, and a wallet address as the value.

For now, we will keep the address value hardcoded, but later, we will make this dynamic.

If you don’t have a wallet address, feel free to use this wallet for testing purposes

0xB0FDab646fED59089B263D87aBceB3a8A5c3aE47

‍

That’s it!

If you run this request now, you should get a response from the endpoint that looks like this:

{{ INSERT IMAGE }}

Now that we’ve successfully built a request, it’s time to build our app!

5. Building your web app

Here’s how we want our app to function:

  1. A user can paste in any wallet address, and hit submit.
  2. Clicking the submit button will redirect the user to a new page
  3. This page will render all of the NFTs that belong to that address owner.

There are a number of ways to build this functionality, but in this case, we’ll pass the input value as a query parameter.

So let’s get to it.

Sending the input value as a query parameter

  1. Select the submit button, and add an Action to it, that will trigger on-click.
  2. On click, we want to redirect the user to this page: /nft-collection-page
  3. Finally, we’re going to use logic, to appent the input to the url like so: /nft-collection-page?address={ INPUT VALUE }

That’s it, now let’s head over to the last page and make a request that fetches the data from the NFT API.

Using our query parameter value in the request

Since we already built a request, this step is going to be a walk in the park.

  1. Create a new parameter and call it address
  2. Open the request and replace the hardcoded wallet address with the query parameter value
  3. Set the request to load when the page is loaded.
  4. Hit save

If we add the address query parameter with a value of 0xB0FDab646fED59089B263D87aBceB3a8A5c3aE47 to the address bar, and we hit enter, we should be able to see our request fire.

If your request was successful, it’s time to move to the next step.

Rendering the response on the page

  1. Select the item which you want to use as a template, and add the body.ownedNfts array to the Render list field.
  2. Select the image, and set the source attribute to media url like so { IMAGE }
  3. Add the title, description, and any other meta data that you want to display.

That’s it!

If you want to make the app even cooler, we have a bonus step for you. Although this step involves a little bit of custom code, it’s just a simple copy/paste implementation.

Bonus: Use the Wized Javascript API to connect to Metamask

We are going to make it even easier for the users to get to their NFT portfolio page. Instead of having to paste their wallet address in the input, they can just connect with their wallet, and we will redirect them to the NFT porfolio page!

To do that, we are going to use the Wized API, and Web3js. The code below might look a little bit intimidating, but we added comments to it so that you can read through the functionality.

Let’s get into it.

  1. Create a new variable in Wized, and call it walletAddress
  2. Then go to your Webflow project, and paste this code in the head section of your input page
  3. Paste this code in the body of the page
  4. Go to Wized, and under Access control, we want to redirect the user to this page, as soon as the user connects his/her wallet
  5. Publish your project

That’s it!

Congratulations, you just built and deployed your first web3 application!

Feel free to experiment with other APIs and add more features to this app.

Also, if you created an app, post it in the comments bellow so that others people can look at your project and get inspired