How to Build an NFT Auction Site with React, Solidity, and CometChat
Tags: web3, nft, react, solidity
Published: 2022-12-26 07:48:24

What you will be building, see the [**git repo**](https://github.com/Daltonic/dappAuction) here.

![Auctioning NFT Item on Marketplace](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671562000137_DappAuction+Offer+Item.gif)

## Introduction

Welcome to this tutorial on building an NFT auction site using React, Solidity, and CometChat. In this guide, we will walk you through the steps of creating a decentralized marketplace for buying and selling non-fungible tokens. We will use React for the front end, Solidity for the smart contract development, and [**CometChat**](https://try.cometchat.com/oj0s7hrm5v78) for real-time messaging and notifications. By the end of this tutorial, you will have a fully functional NFT auction platform ready to go live on the Ethereum blockchain.


## Prerequisites

To follow this tutorial, you will need to have the items below installed on your local machine. NodeJs is non-negotiable, the rest can be installed following this guide, so make sure you have it installed and running.

- NodeJs
- React
- Solidity
- Tailwind
- CometChat SDK
- Hardhat
- EthersJs
- Metamask
- Yarn


## Installing Dependencies

Clone the starter kit using the command below to your projects folder:


    git clone https://github.com/Daltonic/tailwind_ethers_starter_kit <PROJECT_NAME>
    cd <PROJECT_NAME>

Next, open the project in VS Code or on your preferred code editor. Locate the `package.json` file and update it with the codes below.


{% gist https://gist.github.com/Daltonic/1d8b2334f4979d1b57879411443e1461 %}


To install all the required dependencies as indicated in the `package.json` file, run the command `**yarn install**` in the terminal.


## Configuring CometChat SDK
![CometChat SDK](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671564576725_Screenshot+2022-12-20+at+8.29.28+PM.png)


Follow the steps below to configure the **CometChat SDK**; at the end, you must save your application keys as an environment variable.

**STEP 1:** 
Head to [**CometChat**](https://try.cometchat.com/daltonic?ref=hackernoon.com) Dashboard and create an account.

![Register a new CometChat account if you do not have one](https://hackernoon.com/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--1vLWkScm--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_880%2Fhttps%3A%2F%2Fassets-global.website-files.com%2F5f3c19f18169b62a0d0bf387%2F61700dac76419b7bac2de69d_s_1988D50EEAEE632A7CEA2F32B0824BC13ED61EA41386BA94E99320DDC4403C74_1633934795404_image.png&w=1920&q=75)


**STEP 2:** 
Log in to the [**CometChat**](https://try.cometchat.com/daltonic) dashboard, only after registering.

![Log in to the CometChat Dashboard with your created account](https://hackernoon.com/_next/image?url=https%3A%2F%2Fcdn.hackernoon.com%2Fimages%2FWR1e4ZVUVmPhgjVsEoF2NIXNnyp1-2022-11-24T11%3A56%3A49.358Z-clav0rm8e00160bs6141g6bld&w=1920&q=75)


**STEP 3:** 
From the dashboard, add a new app called **BlueVotes.**

![Create a new CometChat app - Step 1](https://hackernoon.com/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--UbyuK5N3--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_880%2Fhttps%3A%2F%2Fassets-global.website-files.com%2F5f3c19f18169b62a0d0bf387%2F61700dac7e33a881ced79837_s_1988D50EEAEE632A7CEA2F32B0824BC13ED61EA41386BA94E99320DDC4403C74_1633936628018_image.png&w=1920&q=75)

![Create a new CometChat app - Step 2](https://hackernoon.com/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--Eh8m9hoJ--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_880%2Fhttps%3A%2F%2Fassets-global.website-files.com%2F5f3c19f18169b62a0d0bf387%2F618ea496d603ba7ef8cabeb3_s_C05E7B93FFC9B007F6C09747840C5EEC81AFEC86C6C89C570966797151AE7076_1635316586805_VLioyzP2.png&w=1920&q=75)


**STEP 4:** 
Select the app you just created from the list.

![Select your created app](https://hackernoon.com/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--zEUb15p8--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_880%2Fhttps%3A%2F%2Fassets-global.website-files.com%2F5f3c19f18169b62a0d0bf387%2F618ea4969bad618548da9ccd_s_C05E7B93FFC9B007F6C09747840C5EEC81AFEC86C6C89C570966797151AE7076_1635316654035_bSCncNJN.png&w=1920&q=75)


**STEP 5:** 
From the Quick Start copy the `APP_ID`, `REGION`, and `AUTH_KEY`, to your `.env` file. See the image and code snippet.

![Copy the the APP_ID, REGION, and AUTH_KEY](https://hackernoon.com/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fpracticaldev%2Fimage%2Ffetch%2Fs--vnJudkph--%2Fc_limit%252Cf_auto%252Cfl_progressive%252Cq_auto%252Cw_880%2Fhttps%3A%2F%2Fassets-global.website-files.com%2F5f3c19f18169b62a0d0bf387%2F618ea4968574a3c1945af0bd_s_C05E7B93FFC9B007F6C09747840C5EEC81AFEC86C6C89C570966797151AE7076_1635316757752_QHRb0reB.png&w=1920&q=75)


Replace the `REACT_COMET_CHAT` placeholder keys with their appropriate values.


    REACT_APP_COMET_CHAT_REGION=**
    REACT_APP_COMET_CHAT_APP_ID=**************
    REACT_APP_COMET_CHAT_AUTH_KEY=******************************

The `.env` file should be created at the root of your project.

## Configuring the Hardhat script

Open the `hardhat.config.js` file at the root of this project and replace the contents with the following settings.


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


The above script instructs hardhat on these three important rules.


- **Networks**: This block contains the configurations for your choice of networks. On deployment, hardhat will require you to specify a network for shipping your smart contracts.


- **Solidity**: This describes the version of the compiler to be used by hardhat for compiling your smart contract codes into `bytecodes` and `abi`.


- **Paths**: This simply informs hardhat of the location of your smart contracts and also a location to dump the output of the compiler which is the ABI.

Check out this video on how to build a decentralized autonomous organization.

https://www.youtube.com/watch?v=Gm442Ihv1GU&


You can also [**subscribe to the channel**](https://www.youtube.com/@dappmentors?sub_confirmation=1) for more videos like these.


## Developing The Smart Contract

Let's create a smart contract for this project by creating a new folder called **contracts** in the **src** directory of the project. 

Inside the contracts folder, create a file called **'DappAuction.sol'** which will contain the code that defines the behavior of the smart contract. Copy and paste the following code into the **'DappAuction.sol'** file. The complete code is shown below."


{% gist https://gist.github.com/Daltonic/4ac8dfa544485162090639a6ebd80695 %}


Let's go over some of the specifics of what's happening in the smart contract above. The following items are available:

**Contract Imports**
The following are the smart contracts imported from the **openzeppelin** library:


- Counters: For keeping track of all NFTs on the platform.
- ERC721: This is a standard for non-fungible tokens on the Ethereum blockchain. It defines a set of functions and events that a smart contract implementing the ERC721 standard should have. 
- ERC721URIStorage: This is a smart contract that stores the URI (Uniform Resource Identifier) of an ERC721 token.
- ReentrancyGuard: This import keeps our smart contract safe against reentrancy attacks.

**State variables**

- Totalitems: This variable bears records of the number of NFTs available in our smart contract.
- CompanyAcc: This contains a record of the deployer wallet address.
- ListingPrice: This contains the price for creating and listing an NFT on the platform.
- RoyalityFee: This is the percentage of royalty that the seller of an NFT gets on every sale.

**Mappings**

- AuctionedItem: This holds all the NFT data minted on our platform.
- AuctionedItemExist: Used to validate the existence of an NFT.
- ExistingURIs: Holds minted metadata URIs.
- BiddersOf: Bears record of bidders for a particular auction.

**Structs and Events**

- BidderStruct: Describes the information about a particular bidder.
- AuctionStruct: Describes the information about a particular NFT item.
- AuctionItemCreated: An event that logs information about the just-created NFT.

**Functions**

- Constructor(): This initializes the smart contract with the company’s account, stipulated royalty fee, and token name and symbol.
- GetListingPrice(): Returns the price set for creating an NFT on the platform.
- SetListingPrice(): Used for updating the minting price for creating an NFT.
- ChangePrice(): Used for modifying the cost for a specific NFT.
- MintToken(): Used for Creating a new token.
- CreateAuction(): Used for Creating a new auction using a minted token Id.
- OfferAuction(): Used for placing an NFT item on the market.
- PlaceBid(): Used for bidding in an auction.
- ClaimPrize(): Used to transfer an NFT to the highest bidders.
- PerformRefund(): Used to refund bidders who didn’t emerge as winners for each auction.
- BuyAuctionedItem(): Used to purchase NFTs sold outrightly.
- GetAuction(): Returns an auction by token Id.
- GetAllAuctions(): Returns all available auctions from the contract.
- GetUnsoldAuction() Returns all unsold auctions.
- GetSoldAuction(): Returns all sold auctions.
- GetMyAuctions(): Returns all auctions belonging to the function caller.
- GetLiveAuctions(): Returns all auctions listed on the market.
- GetBidders(): Returns bidders of a specific auction by specifying the token Id.
- GetTimestamp(): Returns a timestamp for a specific date.
- PayTo(): Sends ethers to a specific account.


## Configuring the Deployment Script

Navigate to the scripts folder and then to your `deploy.js` file and paste the code below into it. If you can't find a script folder, make one, create a **deploy.js** file, and paste the following code into it.


{% gist https://gist.github.com/Daltonic/8db9d3f2d20c60ec3c802aab2bb4b516 %}


When run as a Hardhat command, the above script will deploy the `Auction.sol` smart contract to your local blockchain network.

Following the above instructions, open a terminal pointing to this project and run the commands listed below separately on two terminals. You can do this directly from your editor in VS Code.
Look at the command below.


    yarn hardhat node # Terminal 1
    yarn hardhat run scripts/deploy.js # Terminal 2

If the preceding commands were successfully executed, you should see the following activity on your terminal. Please see the image below.

![Step One](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671700851001_Screenshot+2022-12-22+at+10.20.38+AM.png)

![Step Two](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671700885492_Screenshot+2022-12-22+at+10.21.18+AM.png)

## Configuring Infuria App

**STEP 1:** Head to [**Infuria**](https://infura.io/login), and create an account.

![Login to your infuria account](https://res.cloudinary.com/practicaldev/image/fetch/s--gVm10h9K--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://paper-attachments.dropboxusercontent.com/s_9E8F3773E2C82153C7799BA2EBF2003A00F1060D3D03339D1C8009A6D5882B0F_1655136978524_screenshoteasy%2B58.png)


**STEP 2:** From the dashboard create a new project.

![Create a new project step 1](https://cdn.hackernoon.com/images/WR1e4ZVUVmPhgjVsEoF2NIXNnyp1-2022-08-25T17:47:26.685Z-cl79c802l000s0bs64z1xayur)

![Create a new project step 2](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671692222948_Screenshot+2022-12-22+at+7.56.55+AM.png)


**STEP 3:** Copy the project **Id** and your **API** secret to your `.env` file in the format below and save.

![Copy the project Id and your API secret](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671692453855_Screenshot+2022-12-22+at+7.58.22+AM.png)


**Env File**


    INFURIA_PID=***************************
    INFURIA_API=**********************
    
    REACT_APP_COMET_CHAT_REGION=**
    REACT_APP_COMET_CHAT_APP_ID=**************
    REACT_APP_COMET_CHAT_AUTH_KEY=******************************


## Developing an Image Processing API

We need a way to generate metadata out of an Image we intend to make an NFT. The problem is that JavaScript on the browser cannot get us the result we intend. It will take a NodeJs script to help us process the images, generate metadata, deploy to IPFS, and return the token URI as an API response. No need for much talking, let me show you how to implement this API.

First, you will need the following libraries, which are already installed on this project courtesy of the `yarn install` command you executed previously.


- Express(): Enables server creation and resource sharing.
- Express-Fileupload(): Enables file upload such as uploading an image.
- Cors(): Enables cross-origin request sharing.
- Fs(): Enables access to the file system of our local machine.
- Dotenv(): Enable the management of environment variables.
- Sharp(): Enables the processing of images to different dimensions and extensions.
- Faker(): Enables the generation of random and fake data.
- IpfsClient(): Enables the upload of files to the IPFS.

Let us now write some essential script functions that will assist us in converting images, as well as other information such as their names, descriptions, prices, Ids, and so on, to their metadata equivalent.

Create a folder called **"api"** at the root of your project, then create a new file called **metadata.js** within it and paste the code below inside.

**Metadata.js File**

{% gist https://gist.github.com/Daltonic/6da56ee0e1571fd08c69111fc36f2315 %}


Now let’s utilize these functions in the main NodeJs file below.

**App.js File**
Create another script called app.js within this API folder and paste the codes below; this is where the API's controlling logic will reside.


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


The IPFS library uses the Infuria Gateway for uploading files to the IPFS which we have already set up in the `.env` file.

Now, run `node api/app.js`  on the terminal to start up the API service as can be seen in the image below.


![API receiving Image and Metadata Info from the Frontend](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671698740098_Screenshot+2022-12-22+at+9.45.32+AM.png)

## Importing Private Keys to Metamask

To use Metamask with your Hardhat local network which is represented as **Localhost:8545**, use the following steps to set it up.

Run `yarn hardhat node` on your terminal to spin up your local blockchain server. You should see a similar image to the one below on the terminal.


![Hardhat Node Started](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671693238864_Screenshot+2022-12-22+at+8.13.53+AM.png)


Copy the private key of the **account at zero(0)** and import it on your Metamask, see the image below.


![Step 1: Click on the Import account Option](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671693503175_Screenshot+2022-12-22+at+8.16.55+AM.png)

![Step 2: Enter the private key from the Hardhat Server](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671693528043_Screenshot+2022-12-22+at+8.17.26+AM.png)

![Step 3: Result](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671693558551_Screenshot+2022-12-22+at+8.19.13+AM.png)


Now, you can repeat the above steps and import up to three or four accounts depending on your need.

All of the processes needed to develop a production-ready smart contract are already packaged inside [this book](https://www.buymeacoffee.com/web3classes/e/103755), in an easy-to-understand manner.

![Capturing Smart Contract Development](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671699371878_tier+1.png)


[Grab a copy of my book titled, “capturing smart contract development](https://www.buymeacoffee.com/web3classes/e/103755)” to become an in-demand smart contract developer.

## Developing the Frontend

We will now use React to build the front end of our project, using the smart contract and related information that has been placed on the network and generated as artifacts (including the bytecodes and ABI). We will do this by following a step-by-step process.


## Components

In the src directory, create a new folder called `**components**` to house all of the React components below.

**Header Component**

![Header Component](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671622556265_Screenshot+2022-12-21+at+12.35.21+PM.png)


Now, create a component in the components folder called Header.jsx and paste the following codes below. The designs of all these components were achieved using the Tailwind CSS framework.


{% gist https://gist.github.com/Daltonic/4f143aab448cab8a10ef1769c61f8f1f %}


**Hero Component**

![Hero Component](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671629757462_Screenshot+2022-12-21+at+2.35.41+PM.png)


Next, create another component in the components folder called **Hero.jsx** and paste the following codes below.


{% gist https://gist.github.com/Daltonic/52f1c090e473bd594ae67093a7dbb841 %}


**Artworks Component**

![Artworks Component](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671630268351_Screenshot+2022-12-21+at+2.44.21+PM.png)


Again, create a component in the components folder called **Artworks.jsx** and paste the following codes below.


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


**Footer Component**

![Footer Component](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671638018552_Screenshot+2022-12-21+at+4.53.33+PM.png)


Next, create a component in the components folder called **Footer.jsx** and paste the following codes below.


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

## Other Component

The following are components supporting the full functionality of the rest of this application.

**Countdown Component**
This component is responsible for rendering a countdown timer on all the NFTs, see the codes below.


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


**The Empty Component**

![The Empty Component](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671638591128_Screenshot+2022-12-21+at+5.03.05+PM.png)


This component is responsible for displaying a small text informing the users of no NFTs in the platform. See the example code below for implementation.


{% gist https://gist.github.com/Daltonic/8c378676b0f354614998a6f2dd2bd260 %}


**Creating an NFT**

![Creating an NFT](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671642975520_DappAuction+Createing+NFT.gif)


To write a Create NFT component, use the following codes. This will be a modal that accepts an image, a title, a description, and a price before submitting it to the blockchain. 

Before being stored on the blockchain, data collected from a form is sent to a NodeJs API, which converts it into metadata and deploys it to IPFS.

Next, in the components folder, create a new file called "CreateNFT.jsx" and paste the following code into it.


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


**Offering NFTs on the Market**

![Offering an NFT Item](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671646021794_DappAuction+Offer+Item.gif)


This component is responsible for offering new items live on the market. Using a form, it accepts a duration for which you intend to have your NFT live on the market. Once this timeline expires, the live NFT will disappear from the market. See the codes below.


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


**Placing Bids**

![Placing Bids](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671646582141_DappAuction+Placing+Bids.gif)


This component allows a user to place a bid and participate in an NFT auction. This is accomplished through the use of a modal that receives the price a user intends to bid if it is within the time limit for bidding. See the codes listed below.


{% gist https://gist.github.com/Daltonic/4e0c245af9cfbf872eb79a3d65def8a4 %}


**Changing an NFT price**

![Changing NFT Price](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671647081006_DappAuction+Changing+Price.gif)


This component allows an NFT owner to change the price of an NFT that is not currently trading on the market. Accepting a new price from a form and sending it to the blockchain accomplishes this. Look at the codes below.


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


**The Chat Component**

![Live Chat with CometChat SDK](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671647445562_DappAuction+Chat.gif)


Finally, for the components, there is a chat component that is controlled by the CometChat SDK. See the codes below.


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



## The Pages

This application has about three views or pages; let's organize all of the above components into their respective views using the steps below. First, create a folder called **views** in the **src** directory and create the soon-to-be-discussed pages.

**Home View**

![The Home View](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671648038433_Screenshot+2022-12-21+at+7.40.32+PM.png)


The Home view combines two major components: the Hero and Artworks components. See the codes below.


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


**Collections View**

![The Collection View](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671648406046_Screenshot+2022-12-21+at+7.46.40+PM.png)


This view displays all of the NFTs owned by a specific user. It empowers a user to manage an NFT, such as whether or not to offer it on the market or change its price. See the codes shown below.


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


**The NFT View**

![NFT View](https://paper-attachments.dropboxusercontent.com/s_1EFFD390642114DC728164B3948A3C8FD66D56982DF906F4F025AA6ED38BE4E5_1671649012539_Screenshot+2022-12-21+at+7.56.46+PM.png)


Lastly, this view contains the chat component as well as other important components, as shown in the code below.


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



## Updating The App.jsx File

Update the App file with the codes below in other to bundle up all the components and pages together.


{% gist https://gist.github.com/Daltonic/82df77d262d1360895bf27952bd61b6c %}



## Updating the Index.jsx and CSS files

Use the codes below to update the **index.jsx** and **index.css** files respectively.


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



## Adding the App Services

In this application, we have two services: chat and blockchain, as shown in the codes below. Simply create a new folder called services in the src directory and place the following files in it using the codes below.

**Chat Services**

{% gist https://gist.github.com/Daltonic/99e7726f25e27e17f4c4e56ab6ac0c6b %}


**Blockchain Service**

{% gist https://gist.github.com/Daltonic/5916387e5d24dde94779a9fe9f9e9e19 %}

## The Store

The store is a state management service included in this application. This is where all of the data extracted from the blockchain is kept. To replicate, create a store folder within the src directory. Next, within this folder, create a file called index.jsx and paste the codes below into it.


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


Now start up the application by running `**yarn start**` on another terminal to see the result on the terminal. If you experience any trouble replicating this project you can drop a question on our [discord channel](https://discord.gg/PgFDUVT6n9).

You can also see this video to learn more about how to build an NFT marketplace from design to deployment.


https://www.youtube.com/watch?v=fJIiqeevqoU&


Congratulations, that is how you build an NFT Marketplace using React, Solidity, and CometChat.

## Conclusion

In conclusion, building an NFT auction site with React, Solidity, and CometChat requires a combination of front-end and back-end development skills. 

By using these tools together, it is possible to create a fully functional NFT auction site that is secure, scalable, and user-friendly.

If you're ready to dive deeper into web3 development, [**schedule your private web3 classes with me**](https://www.buymeacoffee.com/web3classes/e/74614) to accelerate your web3 learning.

That said, I'll see you next time, and have a great day!


## About the Author

Gospel Darlington is a full-stack blockchain developer with `6+` years of experience in the software development industry.

By combining Software Development, writing, and teaching, he demonstrates how to build decentralized applications on EVM-compatible blockchain networks.
His stacks include `JavaScript`, `React`, `Vue`, `Angular`, `Node`, `React Native`, `NextJs`, `Solidity`, and more.

For more information about him, kindly visit and follow his page on [Twitter](https://twitter.com/idaltonic), [Github](https://github.com/Daltonic), [LinkedIn](https://www.linkedin.com/in/darlington-gospel-aa626b125), or his [website](https://daltonic.github.io/).