How To Build A Classic Web3 NFT Minting Dapp with React and Solidity: Part 2
Tags: solidity, web3, blockchain, react
Published: 2022-04-03 16:52:00

What you will be building, see the [live demo](https://adulam-nft.web.app/) and [GitHub repo](https://github.com/Daltonic/adulamNFT) for more info, don’t forget to star the project.

![Adulam](https://paper-attachments.dropbox.com/s_B943DEA2D9DE04F4E6769C58A5163AA00E6F7443D4974DFEA284EED252598331_1648809570346_adulam-nft.gif)

![Minted NFTs](https://paper-attachments.dropbox.com/s_8E197D2D714870E6ED2BCA6C473448C482929357D9D9DB52CAC7EA4335601E6E_1648984819417_screenshoteasy+25.png)

## Introduction

In [PART ONE](https://dev.to/daltonic/how-to-build-a-classic-web3-nft-minting-dapp-with-react-and-solidity-part-1-4ag) of this tutorial, we coded the smart contract part of this application with Solidity, now it's time we merge it up with ReactJs.

If you haven’t checked [PART ONE](https://dev.to/daltonic/how-to-build-a-classic-web3-nft-minting-dapp-with-react-and-solidity-part-1-4ag) of this tutorial, I recommend that you do that first before continuing with this second part.

If you’re getting value out of this tutorial and you want to go all-in with blockchain development then [**You can also contact me for lessons…**](https://daltonic.github.io/#mh-pricing)

Let’s jump in and start coding…

[Check out my YouTube channel for FREE web3 tutorials now](https://www.youtube.com/channel/UCQteXYZ5mC-cuTxplzM4Hlw?sub_confirmation=1).

## Prerequisites

You must have completed [PART ONE](https://dev.to/daltonic/how-to-build-a-classic-web3-nft-minting-dapp-with-react-and-solidity-part-1-4ag) of this article in other to fully benefit from this part. If you haven’t, please quickly check [PART ONE](https://dev.to/daltonic/how-to-build-a-classic-web3-nft-minting-dapp-with-react-and-solidity-part-1-4ag), blockchain development is no child’s play.

## Building the Components

Let’s start with building out the components one step at a time, make sure you follow the steps accurately…

**The Header Component**
Like always, we’ll start with the header component, this is the normal flow of any website or application.

![Header Component](https://paper-attachments.dropbox.com/s_8E197D2D714870E6ED2BCA6C473448C482929357D9D9DB52CAC7EA4335601E6E_1648985847212_screenshoteasy.png)


This was beautifully crafted with tailwind CSS using the gradients styling. It simply enables a user to connect a wallet address for minting. In the project, go to your components folder and create a new file called Header.jsx. Afterward, paste the codes below inside of it.


{% gist https://gist.github.com/Daltonic/5796e709731f2906e912527b9986c72a %}


That will be it for the header, let’s work on the Hero component.

**The Hero Component**

![The Hero Component](https://paper-attachments.dropbox.com/s_8E197D2D714870E6ED2BCA6C473448C482929357D9D9DB52CAC7EA4335601E6E_1648987583248_screenshoteasy+1.png)


This component is responsible for initiating the minting process as you can see with the mint button. Also, it takes a record of the total number of NFTs minted against the ones remaining.

Here is the code snippet responsible for this operation…


{% gist https://gist.github.com/Daltonic/d7d7b360b7bc2c8fff1c3598c61b975e %}


Next on our list is the artworks component…

**The Artworks Component**

![The Artwork Component](https://paper-attachments.dropbox.com/s_8E197D2D714870E6ED2BCA6C473448C482929357D9D9DB52CAC7EA4335601E6E_1648987938146_screenshoteasy+3.png)


This component is saddled with the responsibility of rendering the artworks one after the other. The tailwind CSS came through here for helping us design a stunning interface.

Let’s take a look at the codes responsible for these components’ behavior…


{% gist https://gist.github.com/Daltonic/eeb6464188f0f7987b0b637af7049bc1 %}


Let’s move on to adding the Footer component…

**The Footer Component**

![The Footer Component](https://paper-attachments.dropbox.com/s_8E197D2D714870E6ED2BCA6C473448C482929357D9D9DB52CAC7EA4335601E6E_1648988243249_screenshoteasy+4.png)


If you appreciate good work, you will love this design. Tailwind CSS has enabled me to build beautiful components such as this. Hey, if you are interested, I could take you on a private teaching session on blockchain development, [**kindly see my offers here**](https://daltonic.github.io/#mh-pricing).

Coming back to this build, this current component lightly features a signature display of site brand and logo, nothing much to this component, however, I needed to include it in this tutorial.

Below is the code for it…


{% gist https://gist.github.com/Daltonic/38c7a290e0acea9f3f07321446fe0b18 %}


Fantastic, we are almost done with these components, let’s add up the last two…

**The Alert Component**

![The Alert Component](https://paper-attachments.dropbox.com/s_8E197D2D714870E6ED2BCA6C473448C482929357D9D9DB52CAC7EA4335601E6E_1648988704605_screenshoteasy+24.png)


This component, as intuitive as it sounds is responsible for notifying us when our minting process is done. Again, it was handcrafted by the use of Tailwind CSS and some react Icons. 

Let’s take a look at the codes exhibiting its behavior…


{% gist https://gist.github.com/Daltonic/b9f6e1b409d11a67e61cf2ac2b5a6d90 %}


Nice, let's complete these components by adding the Loader component into the mix.

**The Loader Component**

![The Loader Component](https://paper-attachments.dropbox.com/s_8E197D2D714870E6ED2BCA6C473448C482929357D9D9DB52CAC7EA4335601E6E_1648988939445_screenshoteasy+23.png)


This component simply displays a spinner that also shows the current progress of the NFT as it is being minted.

The state management library react-global-hooks manages the activities that occur under the hood here; more on this later.

Here is the code for this component...


{% gist https://gist.github.com/Daltonic/7bbb270f7c82431eebfbedcda8f584f4 %}


Awesome, now that we’re done with coding the components, let’s dive into **App.jsx** and couple them together.


## The App Component

This component is responsible for connecting all other components to be used in this project, let’s look at how it is coded.


{% gist https://gist.github.com/Daltonic/947177f2e63646dac00fb4e48b8ad4b7 %}


We are not quite done yet, let’s include other essential configurations. 


## The Index Files

Please make sure that your index.jsx and index.css are having the configurations as seen in the code snippet below.


{% gist https://gist.github.com/Daltonic/c04685b5ed75b180924f5c23c79808d4 %}


Fantastic, are there two more important files you must be aware of, let’s look at them…


## The Adulam Blockchain Interface

For you to interact with our deployed smart contract, you need to access it via functions. The codes below enable us to interact with our smart contract which is now running on a live blockchain network. Create a file named Adulam.jsx in the src folder of this project and paste the following codes into it.


{% gist https://gist.github.com/Daltonic/a1f809ece27eaa6b85184747796ac353 %}


This is such a handy function structure that you should consider using in your subsequent blockchain project. It keeps all the blockchain-related functions together and helps us keep our sanity.

Next, let’s discuss how our little but not so little state management library is coordinating these entire activities behind the scene.

## The Statement Management Library
![Photo by Pixabay from Pexels](https://images.pexels.com/photos/270373/pexels-photo-270373.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)


We’re using the react-global-hook package for our state management. Setting up redux for a small project like this can be cumbersome, and why should you when you have an implementation so simple as the one below?

Create a folder inside the **src** directory called the store and also create a file named **index.jsx** within it, now paste the codes below in the file and save.


{% gist https://gist.github.com/Daltonic/6479969b6ebdf50b1057416959566338 %}


We are almost done here…


## The ABIs folder and files
![The ABI Files](https://paper-attachments.dropbox.com/s_8E197D2D714870E6ED2BCA6C473448C482929357D9D9DB52CAC7EA4335601E6E_1648990565057_screenshoteasy+5.png)


Let me direct your attention to this folder which should not be empty by now…
During [PART ONE](https://dev.to/daltonic/how-to-build-a-classic-web3-nft-minting-dapp-with-react-and-solidity-part-1-4ag) of this article, we specified in **truffle-config.js** to create these files in this folder whenever we compile a smart contract, that’s why we’re having that folder available to us.


## The Assets Files
![The Assets Folder](https://paper-attachments.dropbox.com/s_8E197D2D714870E6ED2BCA6C473448C482929357D9D9DB52CAC7EA4335601E6E_1648990769308_screenshoteasy+6.png)


I must say that we’re just about done, except that we haven’t included the assets folder and files. Let’s quickly do that…

Create a folder in the **src** directory called **assets**, next, download and move the file below inside of it.

[**Use this link**](http://) to the git repo to download the images.

Now that we are done with all the builds, let’s start up the server to go live by running the command below on the terminal to do this!


    yarn start #starts the server on localhost:3000

Congratulations, you are officially done with this build…

[Watch my FREE web3 tutorials on YouTube now](https://www.youtube.com/channel/UCQteXYZ5mC-cuTxplzM4Hlw?sub_confirmation=1).


## Conclusion

You have seen another classic example of how to build a web3 application. I firmly believe that if you've been coding along with me, you are one of the blockchain armies the decentralized internet is looking for.

I’m currently teaching blockchain development online, if you want to go deeper with this skill, [**You can reach me on my website.**](https://daltonic.github.io/)

Till next time, all the best!


## About the Author

Gospel Darlington kick-started his journey as a software engineer in 2016. Over the years, he has grown full-blown skills in JavaScript stacks such as React, ReactNative, VueJs, and now blockchain.

He is currently freelancing, building apps for clients, and writing technical tutorials teaching others how to do what he does.

Gospel Darlington is open and available to hear from you. You can reach him on [LinkedIn](https://www.linkedin.com/in/darlington-gospel-aa626b125/), [Facebook](https://www.facebook.com/darlington.gospel01), [Github](https://github.com/Daltonic), or on his [website](https://daltonic.github.io/).