Building a new DApp: Appreciation portal

How you can use this guide to build your own

Photo by Markus Winkler on Unsplash

Are you trying to build and launch a decentralized application (DApp)? This guide will give you basic step-by-step instructions on how to build and ship it. Happy building.

Idea

Before we go into technical details, I will talk about how I came up with the idea. A lot of you have probably seen LinkedIn Kudos. The way it works is you can give kudos to someone you appreciate or if they helped you in a certain manner. Even though you can see that on your LinkedIn, it is hard to track those and see who gave you kudos and other details. I realized that this problem can be solved by on-chain appreciation where you mint those Kudos as a digital collectible. Since you own the wallet, and the minted NFT - you can check it in your wallet, show it on your profile, etc. That is how the idea was born and is live.

Technology used

I am not married to the tools I use but I have found these useful for developing and deploying a DApp faster. Feel free to use what is best for you

• Coinbase Wallet and Metamask for an in-browser wallet

• Nextjs (Typescript)

• Vercel for deployments

• Foundry for smart contract

• Canva for designing NFT assets

• Pinata for uploading NFT metadata

• Alchemy as Node provider

• web3-onboard for wallet connection

• Yarn package manager

• Tailwind CSS

Also here’s what the general flow of a very basic DApp interaction looks like:

Let’s build it

Create a Smart contract

I used Foundry to create a new smart contract for my use case. You can create a new one based on your requirement or if you want to use any existing ones you can use that.

For my application I created a new smart contract and below is an essential guide that can help you to get started. Once you create and deploy the contract, you should have a smart contract address that can be used to integrate into your application.

Tutorial: Building an ERC1155 SoulBound Token

Create a Nextjs App

yarn create next-app

Follow the prompts to select what works for you. This will create a barebones Nextjs application, which is a great place to start. It creates all the required files to start and run your server. You should be able to run your application using the yarn dev command which you can access on http://localhost:3000 by default.

Add Tailwind CSS to your app

Use this guide to add Tailwind CSS to your application. This is quite easy to add and use. I think Nextjs is also trying to add tailwind directly into the next-app command which will help get rid of this step. But for now, this step works.

Connect Wallet

I am using web3-onboard to connect the wallet with Coinbase Wallet and Metamask as two options. Feel free to add more. Below command can help you add the required libraries. I am using the ethers library to interact with smart contracts.

yarn add @web3-onboard/react @web3-onboard/injected-wallets ethers

Once you have it installed you can take a look at this file to see how I set up the Connect Wallet button. Once you do it, you should be able to see a button to connect to your Web3 wallet. You will need an RPC provider in the front end to connect to the wallet. I am using an environment variable NEXT_PUBLIC_ETHEREUM_MAINNET_URL to specify it. You should use a public provider and not your private one with your API keys since anyone can access your public environment variable. Ankr has a great list of RPC URLs you can use. Once you connect the wallet you can access some basic info like address, ens, etc.

Populating data from NFT Contract

The NFT contract I made as multiple ERC1155 NFTs which I want to display on my UI. I am using Alchemy to fetch that data and display it on my UI. Here’s the code to fetch the NFT metadata from the contract. You can re-use this by just changing the smart contract address. If you change the NFT specification type (ERC721 etc), you might need to change how I am parsing the data after getting the API response from Alchemy.

Interacting with Smart contract

Once you have connected to your wallet, you can interact with smart the contract by calling the smart contract methods. If you have a custom smart contract, you will need the smart contract ABI, which is like a definition of the smart contract. The good thing is foundry creates those when you deploy. You can check your out folder in the smart contract repo to find that. You need to put that JSON file in your front-end app like this. Note that if you update your smart contract method definitions while developing, you need to update this file in your front end too.

Once you have that, you can refer to the mintTo method in my codebase to see how I am interacting with it. There are two main things going on here - first I am getting a provider from my local window.ethereum object to make sure I have my signer initialized and second is the interaction with the smart contract. This will pop up your wallet window and ask for a signature and once you sign it, your transaction will be created. Note that I am using ethers library, but if you are using a different one, your code will be slightly different.

Deployment

If you are using Nextjs, there’s no better place than Vercel to deploy your application. Make sure to link your Github account to your Vercel account and deploy. You will need to copy over your env file and make sure they are properly set up to make the deployment work. Once your deployment is good, Vercel will automatically create a URL for your application and then you are good to share it with the world.

I hope this tutorial was useful and easy to navigate. Here is the full code for frontend and smart contract for reference. If you want to interact with the app I deployed, feel free to use it. It has been deployed to mainnet and here is the link

https://appreciation-app.vercel.app/

Feel free to ask questions in the comment section if there’s something more I can help with.

---

If you enjoyed reading this you may be interested in following me on Twitter and Medium.