How to build an NFT marketplace on NEAR?

With a rise in climate change crisis, there is a subsequent increase in demand for eco-friendly blockchain networks. In regards to this, several blockchain networks play a huge role in sustainable carbon emissions in today’s environment. Minting and trading NFTs on a blockchain network consumes a large amount of power, emitting approximately 100 kgCO2 footprints. This amount is equivalent to the number of carbon footprints emitted by a one-hour flight.

To successfully address the concern of carbon footprints emitted from NFT or block minting, NEAR Protocol’s computational mechanism is based on Proof-of-Stake (PoS) consensus. There are no miners in the PoS consensus mechanism; instead, the validators have the authority to stake a given token amount for their participation in the voting mechanism. Proof-of-Stake consensus mechanism thus helps blockchain communities to validate blocks and gather block awards.

NEAR’s Proof-of-Stake consensus is known as the Nightshade. Other than Nightshade, Sharding is another mechanism that helps the network attain scalability and security in an ecological and carbon-neutral way. Nightshade and sharding function simultaneously to allow every transaction to be energy efficient by splitting the network’s data computational load. This results in a final reduction of energy consumption, thus producing a minimum amount of carbon footprints.

NEAR, therefore, has one of the most sustainable ecosystems for minting and trading NFTs. This article is a step-by-step guide on building an NFT marketplace on NEAR.

• About NEAR blockchain
• What are the benefits of building on NEAR?
• What are the basic development components of NEAR?
• How to build an NFT marketplace on NEAR?
• What NEAR development services does LeewayHertz provide?

About NEAR blockchain

NEAR is a decentralized and carbon-neutral blockchain platform based on sharding and Nightstand mechanisms. It is a smart contract-capable blockchain protocol crafted to ensure the development of highly scalable dApps. NEAR blockchain has the efficiency of processing approximately 100,000 transactions per second. It has a community-operated cloud infrastructure for deploying and running the dApps on the network.

NEAR combines the distributed database features with a server-less database computing platform. NEAR token powers the NEAR dApps to connect with each other in different ways. NEAR blockchain helps the developers to build censorship-free backends for smart contract functioning to manage high-stake data like digital assets, identities and money.

NEAR blockchain functions in a similar way to a centralized data storage ecosystem. For example, Amazon Web Services (AWS) functions as a base layer on which the applications are built. The main difference between AWS and the NEAR platform is that- NEAR is a decentralized network of computers and is not controlled by a single authority. It allows the development of the dApp & NFT marketplace architecture around the network.

Some of the fundamental components of the NEAR platform are as the following:

• Mintbase
• NEAR Token
• NFT Minting Platform
• Flux Protocol

Let us now look at some of the benefits of developing on the NEAR blockchain in the next section.

What are the benefits of building on NEAR?

NEAR blockchain has a progressive User Experience (UX) for its dApp users in DeFi. Based on the sharding mechanism, NEAR Protocol helps network data retrieval and scales the dApps on DeFi platforms.

Along with sharding, it also uses a PoS election mechanism known as the Threshold Proof-of-Stake (TPoS). This mechanism paves a predetermined way for creating a large number of participants to manage the blockchain network. TPoS helps increase the level of decentralization and security of the blockchain network. NEAR Protocol uses TPoS to create a reward distribution system for dApp users.

Let us now explore the benefits that make NEAR Protocol a fit for blockchain-based application development:

Sustainability

NEAR Protocol has an efficient PoS network that ensures network sustainability and carbon neutrality. This powers the users to run various dApps and process blockchain transactions efficiently.

Cost-effective

NEAR Protocol has 1000 times lower transaction fees for its users and developers, comparatively less than most third-generation blockchains. It charges 30 percent of the transaction fees for participating in the network’s growth.

User-friendly

NEAR Protocol can produce a human-readable account address based on scoped DNS pattern. With the human-readable address, NEAR becomes a user-friendly blockchain that lets people with zero technical knowledge access the network.

Secure

With a robust network of active validators, NEAR maintains its credibility and high security throughout the network.

Interoperability

NEAR components like the EVM and cross-chain Rainbow bridge support NEAR to facilitate cross-chain transactions and exchanges among various independent blockchain platforms.

Pragmatic

NEAR smart contracts are written in expressive community-supported coding languages: Rust and AssemblyScript.

Now that we are familiar with the benefits let us look at the development suite of NEAR in the next section.

What are the basic development components of NEAR?

NEAR blockchain is built to be used independently in a permissionless way but with a set of tools and implementations. NEAR development suite consists of the following components:

NEAR SDKs

Users on NEAR Protocol utilize the JavaScript, Rust and AssemblyScript coding languages to write their smart contracts. NEAR has a complete SDK, standard data structures and testing tools for its smart contract languages.

Gitpod for NEAR

NEAR uses the existing Gitpod technology to provide a zero-time onboarding experience to the developers. This technology has an online ‘Integrated Development Environment (IDE). Using the IDE, developers can efficiently write, test and deploy NEAR smart contracts from the browser.

NEAR also has other templates that can be deployed with one click, making the development process easy for new and old developers.

NEAR wallet

NEAR wallet has built-in functionality to help, holders participate in the staking and governance processes on the NEAR platform. It powers the developers and end-users to store the digital assets on the NEAR network.

NEAR explorer

NEAR’s explorer helps the users understand the performance of the NEAR network, as well as facilitates debugging of the contracts. It provides real-time network data in an easily understandable web-based graphical format.

NEAR command-line tools

NEAR owns command-line tools that allow developers to create, test, and deploy the applications from their local environments.

In the next section, let us now understand the step-by-step process of developing an NFT marketplace on the NEAR platform.

How to build an NFT marketplace on NEAR?

Prerequisites

• Nodejs is a JavaScript runtime ecosystem developed on the Chrome V8 engine.
• NEAR wallet account is a secure account and wallet manager for NEAR users’ accounts. A NEAR wallet account will allow the user to connect with various decentralized applications on NEAR. It also stores the NEAR tokens and NFTs securely. This section will use a testnet wallet to develop an NFT marketplace on NEAR.
• Rust Toolchain is a specific version of a group of programs required to compile a Rust application.
• NEAR-CLI is a NodeJS CLI that uses the near-api-js to interact and connect with the NEAR network.

The NEAR NFT marketplace development is divided into two parts:

• Part 1- Setting up the NFT contract
• Part 2- Setting up the marketplace

Part 1

To set up smart contracts for the NEAR NFT marketplace, follow these steps:

Step 1

Clone

Clone the smart contract development application by using the command line interface:

git clone https://github.com/kels-orien/nft-marketplace-part-1.git

Step 2

Account creation

Open the wallet testnet account from the nft-contract folder by using the command CLI and then log in to the NEAR wallet account by inserting the following code:

near login

Then build the contract from the nft-contract directory by using the CLI; there are two different CLIs as given below:

For the Windows user:

/build.bat

For the Mac and Linux users:

/build.sh

Step 3

Subaccount creation

Use the following CLI to create a sub-account from the nft-contract directory:

near create-account nft-contract.youraccountname.testnet --masterAccount youraccountname.testnet

Step 4

Contract deployment

Deploy the smart contract using the following command:

near deploy --accountId nft-contract.youraccountname.testnet --wasmFile res/nft_contract.wasm

Then edit the contract name by changing the youraccountName section of the contractName component in the config.js file to a preferred ant name.

Then install all the packages for the frontend; go to the root of the directory nft-marketplace-part-1 by using the CLI given below:

cd ..
npm install

Lastly, launch the frontend by running the below mentioned CLI:

npm start

Step 1

Getting started

Begin the NEAR NFT marketplace development with a rust contract template. Create a directory named nft-marketplace-part-1 from the CLI. Then, enter the project root directory as:

cd nft-marketplace-part-1

After this, clone the following rust template in the nft-marketplace-part-1 root directory:

git clone https://github.com/near-examples/rust-template.git

The alter and rename the rust-template file to nft-contract. Then, update the Cargo.toml file by entering the following command:

[package]
- name = " rust-template"
+ name = "nft-contract"
version = "0.1.0"
- authors = ["Near Inc <hello@near.org>"]
+ authors = ["Your name<youraddress@mail.com>"]
edition = "2021"

[lib]   
- crate-type = ["cdylib"]
+ crate-type = ["cdylib", "rlib"]

[dependencies]
near-sdk = "4.0.0-pre.4"
+ serde_json = "1.0"

[profile.release]
codegen-units = 1
# Tell `rustc` to optimize for small code size.
opt-level = "z"
lto = true
debug = false
panic = "abort"
overflow-checks = true</youraddress@mail.com></hello@near.org>

Modify the name, run the build script and change the compiled wasm file’s name.

Windows users will use build.bat and the Linux users will use build.sh. Now copy the src directory of the nft-contract file in the new nft-contract folder. It should look like this:

nft-contract

     |___ build.sh
     |____build.bat
     |___ Cargo.lock
     |___ Cargo.toml
     |___ README.md
     |___ test.sh
     |____src
           |____ approval.rs
           |____ enumeration.rs
           |____ events.rs
           |____ internals.rs
           |____ lib.rs
           |____ metadata.rs
           |____ mint.rs
           |____ nft_core.rs
           |____ royalty.rs

• approval .rs has the functions to control the access and transactions of NFTs
• enumeration.rs lists the NFT tokens and their respective owners.
• Lib.rs stores all the smart contract initialization functions.
• metadata.rs explains the metadata structure and the token.
• mint.rs explains the token minting logic
• nft_core.rs contains the core logic that allows the NEAR users to transfer NFTs.
• royalty.rs has the functions related to the payout on the NFT marketplace.

Step 2

Login to the NEAR account

Login to the near account from the CLI:

near login

This will open the NEAR wallet, in which the user will confirm the creation of a full-access key. then follow the instructions from the login CLI to create a key on the user hard drive. This key will be stored in the users’ operating system’s home directory in a near-credentials file.

Step 3

Build the contract

Build the contract from the nft-contract directory through the CLI:

For Windows users:

./build.bat

For Linux and Mac users:

./build.sh

Step 4

Subaccount creation

Create a subaccount and then deploy the smart contract to this subaccount by using the following CLI:

near create-account nft-contract.youraccountname.testnet --masterAccount youraccountname.testnet

Step 5

Deploy the contract

Use the following CLI to deploy the contract:

near deploy --accountId nft-contract.youraccountname.testnet --wasmFile res/nft_contract.wasm

Step 6

Initialize the contract

Initialize the contract from CLI,

For Mac and Linux users:

near call nft-contract.youraccountname.testnet new_default_meta '{"owner_id": "nft-contract.youraccountname.testnet"}' --accountId nft-contract.youraccountname.testnet

For the Windows users:

near view nft-contract.youraccountname.testnet nft_metadata

After initializing, see the metadata through the CLI by using the following command:

near call nft-contract.youraccountname.testnet new_default_meta '{\"owner_id\": \"nft-contract.youraccountname.testnet\"}' --accountId nft-contract.youraccountname.testnet

Step 7

Minting token

Mint NEAR NFT tokens using the following commands,

For Windows users:

near call nft-contract.youraccountname.testnet nft_mint '{\"token_id": "token-1\", "metadata": {\"title": \"My Cat Fungible Meme Token\", \"description\": \" Grumpy Cat:(\", \"media\": \"https://res.cloudinary.com/dofiasjpi/image/upload/v1649353927/near-tutorial-nfts/OIP.jpg\"}, \"receiver_id\": \"youraccountname.testnet\"}' --accountId youraccountname.testnet --amount 0.1

For Mac and Linux users:

near call nft-contract.youraccountname.testnet nft_mint '{"token_id": "token-1", "metadata": {"title": "My Non Fungible Team Token", "description": "The Team Most Certainly Goes :)", "media": "https://bafybeiftczwrtyr3k7a2k4vutd3amkwsmaqyhrdzlhvpt33dyjivufqusq.ipfs.dweb.link/goteam-gif.gif"}, "receiver_id": "youraccountname.testnet"}' --accountId youraccountname.testnet --amount 0.1

Check all the collectibles section of the testnet wallet for the recently minted NFTs.

Step 8

View NFT data via CLI

For Mac and Linux users:

near view nft-contract.youraccountname.testnet nft_token '{"token_id": "token-1"}'

For Windows users:

near view nft-contract.youraccountname.testnet nft_token '{\"token_id\": \"token-1\"}'

Step 9

Transfer NFTs

To transfer the NFTs, create another testnet wallet account and transfer the NFT by running the command through CLI:

near call nft-contract.youraccountname.testnet nft_transfer '{"receiver_id": "yoursecondaccountname.testnet, "token_id": "token-1", "memo": "Go Team :)"}' --accountId youraccountname.testnet --depositYocto 1

Step 10

Creating frontend

Add the react with the parcel-bundler on the nft-marketplace-part-1/src directory. Then create an src folder in the nft-marketplace-part-1 and shift the index.html and intex.js in the same folder.

npm install near-api-js regenerator-runtime react-scripts

Then, update the script sections of the package.json by running the following command:

"scripts": {
    "start": "parcel src/index.html",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

Step 11

Entry point
Update the src/index.js folder with the following code:

import React from 'react';import ReactDOM from 'react-dom';import App from './App';import getConfig from './config.js';import * as nearAPI from 'near-api-js'import 'regenerator-runtime'
async function initContract() {  const nearConfig = getConfig(process.env.NEAR_ENV || 'testnet');  const keyStore = new nearAPI.keyStores.BrowserLocalStorageKeyStore()  const near =  await nearAPI.connect({keyStore, ...nearConfig})  const walletConnection = new nearAPI.WalletConnection(near)    let currentUser;
  if (walletConnection.getAccountId()) {      currentUser = walletConnection.getAccountId()  }
  return { currentUser, nearConfig, walletConnection}}

initContract().then(({ currentUser, nearConfig, walletConnection})=> {  ReactDOM.render(,       document.getElementById('root'));})

Then the initContract method is called, and all the data is passed to the App.js Component using the following codes:

import React, { useEffect, useState } from "react";import "./App.css";import useModal from "./useModal";import Modal from "./Modal";import nearLogo from "./assets/near-logo.svg";
const initialValues = {  assetTitle: "",  assetDescription: "",  assetUrl: "",};
const App = ({ currentUser, nearConfig, walletConnection }) => {  const [showLoader, setShowLoader] = useState(false);  const [values, setValues] = useState(initialValues);  const { isVisible, toggleModal } = useModal();  const [nftResults, setNftResults] = useState([]);
  const signIn = () => {    walletConnection.requestSignIn(      nearConfig.contractName,      "", // title. Optional, by the way      "", // successUrl. Optional, by the way      "" // failureUrl. Optional, by the way    );    sendMeta()  };
  useEffect(() => {    if (!showLoader) {      displayAllNFT();    }  }, [showLoader]);
  const handleInputChange = (e) => {    const { name, value } = e.target;    setValues({      ...values,      [name]: value,    });  };
  const sendMeta = async () => {    let functionCallResult = await walletConnection.account().functionCall({      contractId: nearConfig.contractName,      methodName: "new_default_meta",      args: {        owner_id: nearConfig.contractName,      },      attachedDeposit: 0,      walletMeta: "",      wallerCallbackUrl: "",    });
    if (functionCallResult) {      console.log("new meta data created: ");    } else {      console.log("meta data not created");    }  };
  const mintAssetToNft = async () => {    toggleModal()    let functionCallResult = await walletConnection.account().functionCall({      contractId: nearConfig.contractName,      methodName: "nft_mint",      args: {        token_id: `${values.assetTitle}`,        metadata: {          title: `${values.assetTitle}`,          description: `${values.assetDescription}`,          media: `${values.assetUrl}`,        },        receiver_id:currentUser      },      attachedDeposit: "589700000000000000000000",    });
    if (functionCallResult) {      console.log("nft meta sent: ");    } else {      console.log("nft meta not sent");    }  };  const displayAllNFT = async () => {    let result = await walletConnection      .account()      .viewFunction(nearConfig.contractName, "nft_tokens_for_owner", {        account_id: currentUser,        from_index: "0",        limit: 64,      });    setNftResults(result);    setShowLoader(true);    return result;  };
  const signOut = () => {    walletConnection.signOut();    window.location.replace(window.location.origin + window.location.pathname);  };
  return (    < div>      < header className="top-header">        < div className="menu">          < div className="navbar-left">            < h3> NFT MARKET< /h3>          </ div>          < nav className="navbar">            < ul className="navbar-ul">              < li className="navbar-li pt-3 pr-2">                {currentUser ? (                  < button href="#" className="log-link" onClick={signOut}>                    Log Out                  < /button>                ) : (                  < button href="#" className="log-link" onClick={signIn}>                    Log In                  < /button>                )}              < /li>              < li className="navbar-li">                {currentUser ? (                  < button className="btn" onClick={toggleModal}>                  Create NFT                < /button>                ) : (                  ""                )}                             < /li>            < /ul>          < /nav>        < /div>      < /header>      < main className="main-wrapper">        < div className="wrapper">          {currentUser ? (            < div className="welcome-wrapper">              < span className="welcome-text">Welcome! < /span>              {currentUser}            < /div>          ) : (            "user not logged in"          )}        < /div>      < /main>
      < div className="gallery-wrapper">        {nftResults          ? nftResults.map((nft, index) => (              < div className="outter-wrapper" key={index}>                < article className="card-wrapper">                  < a className="asset-anchor" href="#">                    < div className="asset-anchor-wrapper">                      < div className="asset-anchor-wrapper-inner">                        < div className="asset-anchor-wrapper-inner-2">                          < img src={nft.metadata.media} className="img-wrapper" alt="NFT Token" />                        < /div>                      < /div>                    < /div>                    < div className="details-wrapper">                      < div className="details-title-wrapper">                        < div className="details-title-left-wrapper">                          < div className="details-title-left-wrapper-inner-1">                            {nft.metadata.title}                          < /div>                          < div className="details-title-left-wrapper-inner-2">                            {nft.owner_id}                          < /div>                        < /div>                         < div className="details-title-right-wrapper">                          < div className="details-assets-right-wrapper-inner-1">                            < span className="span-price">Price< /span>                            < div className="price-wrapper">                              < div className="near-symbol">                                < img                                  className="near-logo"                                  src={nearLogo}                                  alt="near logo"                                />                              < /div>
< div>4.4< /div> < /div> < /div> < /div> < /div> < /div> < /a> < /article> < /div> )) : "NFTs not found"} < /div> < div className="outform-wrapper"> < div className="form-wrapper"> < form onSubmit={(e) => { e.preventDefault(); mintAssetToNft(); }} > < div className="form-in-wrapper"> < h3 className="text-center pb-1">MINT NFT< /h3> < div className="box-wrapper"> < div className="box-in-wrapper"> < div className="input-wrapper"> < input className="input-box" placeholder="Asset Title" name="assetTitle" type="text" value={values.assetTitle} onChange={handleInputChange} /> < /div> < /div> < /div> < div className="box-wrapper"> < div className="box-in-wrapper"> < div className="input-wrapper"> < input className="input-box" placeholder="Asset Description" name="assetDescription" type="text" value={values.assetDescription} onChange={handleInputChange} /> < /div> < /div> < /div> < div className="box-wrapper"> < div className="box-in-wrapper"> < div className="input-wrapper"> < input className="input-box" placeholder="Asset Url" name="assetUrl" type="text" value={values.assetUrl} onChange={handleInputChange} /> < /div> < /div> < /div> < div className="form-btn-wrapper"> < button className="form-btn">Mint NFT< /button> < /div> < /div> < /form> < /div> < /div> < /div> );}; export default App;< /div>

Create all the file names config.js, Modal.js, useModal.js Close.js and App.css in the nft-marketplace-part-1/src directory using the following code:
Config.js

const CONTRACT_NAME = process.env.CONTRACT_NAME || 'nft-contract.youraccountname.testnet';
function getConfig(env) {  switch(env) {    case 'production':    case 'mainnet':      return {        networkId: 'mainnet',        nodeUrl: 'https://rpc.mainnet.near.org',        contractName: CONTRACT_NAME,        walletUrl: 'https://wallet.near.org',        helperUrl: 'https://helper.mainnet.near.org'      };    case 'development':    case 'testnet':      return {        networkId: 'testnet',        nodeUrl: 'https://rpc.testnet.near.org',        contractName: CONTRACT_NAME,        walletUrl: 'https://wallet.testnet.near.org',        helperUrl: 'https://helper.testnet.near.org',      };    case 'betanet':      return {        networkId: 'betanet',        nodeUrl: 'https://rpc.betanet.near.org',        contractName: CONTRACT_NAME,        walletUrl: 'https://wallet.betanet.near.org',        helperUrl: 'https://helper.betanet.near.org'      };    case 'local':      return {        networkId: 'local',        nodeUrl: 'http://localhost:3030',        keyPath: `${process.env.HOME}/.near/validator_key.json`,        walletUrl: 'http://localhost:4000/wallet',        contractName: CONTRACT_NAME      };    case 'test':    case 'ci':      return {        networkId: 'shared-test',        nodeUrl: 'https://rpc.ci-testnet.near.org',        contractName: CONTRACT_NAME,        masterAccount: 'test.near'      };    case 'ci-betanet':      return {        networkId: 'shared-test-staging',        nodeUrl: 'https://rpc.ci-betanet.near.org',        contractName: CONTRACT_NAME,        masterAccount: 'test.near'      };    default:      throw Error(`Unconfigured environment '${env}'. Can be configured in src/config.js.`);  }}
module.exports = getConfig

useModal.js

import { useState } from "react";const useModal = () => {  const [isVisible, setIsVisible] = useState(false);
  function toggleModal() {    setIsVisible(!isVisible);  }  return {    isVisible,    toggleModal,  };};export default useModal;

Modal.js

import * as React from "react";import { createPortal } from "react-dom";import { CloseIcon } from "./Close";const Modal = ({ isVisible, hideModal, children }) => {  return isVisible    ? createPortal(                  < div className="modal-overlay">            < div className="close-wrapper">              < button className="sbutton" aria-label="Close dialog" onClick={hideModal}>< /button>            < /div>            {children}          < /div>          ,        ,
        document.body      )    : null;};
export default Modal

Close.js

import React from 'react'
export const CloseIcon = () => (    < svg      viewBox="0 0 24 24"      width="28"      height="28"      stroke="currentColor"      strokeWidth="1.5"      strokeLinecap="round"      strokeLinejoin="round"      fill="none"      shapeRendering="geometricPrecision"    >                < /svg>  )

App.css

html, body, #root, .x-wrapper{    width: 100%;    height: 100%;    margin: 0px;    display: contents;}
h1 {    margin-bottom: 1em;}.modal-overlay {    height: 100vh;    left: 0;    position: fixed;    width: 100vw;    z-index: 500;    top: 0;    background-color: rgba(0,0,0,.35);}.sbutton {  border-style: none;  color: white;  cursor: pointer;  font-weight: bold;  padding: 0.9375rem;  justify-content: right;  transition-duration: .15s;  transition-timing-function: cubic-bezier(.4,0,.2,1);  background-color: transparent;  background-image: none;}.close-wrapper{    display: flex;    justify-content: right ;}.modal-wrapper {  display: flex;  justify-content: center;  left: 0;  outline: 0;  overflow-x: hidden;  overflow-y: auto;  position: fixed;  top: 25%;  width: 100%;  z-index: 1000;}
.s-modal {  display: flex;  justify-content: center;  left: 0;  outline: 0;  overflow-x: hidden;  overflow-y: auto;  position: fixed;  top: 25%;  width: 100%;  z-index: 1000;}
.gallery-wrapper {    width: 100%;    display: flex;    justify-content: center;    flex-flow: wrap;}
.outter-wrapper {    padding: .5rem  2rem;}

.card-wrapper {    display: flex;      flex-direction: column;    background-color: rgb(255, 255, 255);    border: 1px solid rgb(229, 232, 235);    border-radius: 10px;    position: relative;    z-index: 2;}.asset-anchor {    display: flex;    flex-direction: column;    height: 100%;    overflow: hidden;}
.asset-anchor-wrapper {    height: 322px;    width: 322px;}
.asset-anchor-wrapper-inner {    min-height: inherit;    border-radius: inherit;    height: 100%;    width: 100%;    align-items: center;}
.asset-anchor-wrapper-inner-2 {    align-items: center;    display: flex;    justify-content: center;    max-height: 100%;    max-width: 100%;    overflow: hidden;    position: relative;    border-radius: 10px;    }
.img-wrapper {    width: auto;    height: auto;    max-width: 100%;    max-height: 100%;}
.details-wrapper {    display: flex;    flex-direction: column;    height: 126px;    width: 100%;    overflow: hidden;    justify-content: space-between;    cursor: pointer;}
.details-title-wrapper {    padding: 12px;    justify-content: space-between;    display: flex;}
.detail-title-left-wrapper {    margin-right: 12px;    min-width: 0px;    width: 60%;}
.details-title-right-wrapper {    width: 40%;    align-items: flex-end;    display: flex;    flex-direction: column;}.details-title-left-wrapper-inner-1 {    display: flex;    align-items: center;    color: rgb(112, 122, 131);    font-weight: 500;    font-size: 12px;}
.details-title-left-wrapper-inner-2 {    width: 100%;    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    white-space: normal;    color: rgb(53, 56, 64);    font-size: 12px;    letter-spacing: 0.1px;    font-weight: 600;    text-align: left;}.details-assets-right-wrapper-inner-1 {    flex: 1 0 0%;    align-items: flex-end;    flex-direction: column;    display: flex;}
.span-price {    font-weight: 400;    font-size: 12px;    color: rgb(112, 122, 131);}
.price-wrapper {    font-size: 14px;    height: initial;    justify-content: flex-end;    max-width: 13ch;    -webkit-box-align: center;    align-items: center;    display: flex;    font-weight: 600;    color: rgb(53, 56, 64);    width: fit-content;}

.near-symbol {    align-items: center;    display: flex;    font-weight: 600;    color: rgb(53, 56, 64);    width: fit-content;    max-width: 100%;}.near-logo {    height: 14px;    width: 16px;}.price {    margin-left: 0.3em;    width: 100%;    width: 100%;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}.s-header {  align-items: center;  display: flex;  flex-direction: column;  padding: 1.875rem 0.9375rem 1.875rem 0.9375rem;}
.s-title {    margin-bottom: 0.3125rem;}
.s-description {  color: #C1C1C1;  text-align: center;}
.text-center {    text-align: center;}
.pb-1 {    padding-bottom: 1rem;}.top-header {    width: 100%;    box-shadow: rgb(4 17 29 / 25%) 0px 0px 8px 0px;    max-width: 100vw;    height: 72px;    top: 0px;    position: sticky;    z-index: 110;    transition: top 0.5s ease 0s;    background-color: rgb(255, 255, 255);}

.menu {    display: flex;    justify-content: space-between;    flex-direction: row;    padding: 1rem;}.nav {
}.navbar{
}
h3 {    display: block;    font-size: 1.17em;    margin-block-start: 0em;    margin-block-end: 0em;    margin-inline-start: 0px;    margin-inline-end: 0px;    font-weight: bold;}
.username {    padding: .2rem;}

.navbar-ul{    display: flex}
 .wrapper {     width: auto;     padding: 1rem; }.welcome-wrapper {    display: block;}.welcome-text {    font-size: 1.2rem;    font-weight: 500;}.main-wrapper {    margin: 0 auto;    text-align: center;}.navbar-li{    padding: 0rem;}
ul {    list-style-type: none;    list-style: none;    margin-block-start: 0em;    margin-block-end: 0em;    margin-inline-start: 0px;    margin-inline-end: 0px;    padding-inline-start: 0px;}
.btn {    display: inline-block;    background-color: #ff424d;    border-radius: 9999px;    color: #fff;    font-weight: 500;    border: 2px solid transparent;    line-height: 1.9;    padding: .46875rem 1rem;    font-size: .875rem!important;    cursor: pointer;}

.navbar-left {    width: auto;}.navbar-right {
}.outform-wrapper {    box-sizing: border-box;    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;    padding: 0rem;    margin: 0rem;}
.form-wrapper {    border-width: 1px;    border-style: solid;    border-color: rgb(229, 227, 221);    border-radius: 4px;    box-shadow: none;    background-color: rgb(255, 255, 255);    overflow: hidden;    box-sizing: border-box;    margin: 0px auto;    max-width: 32rem;    width: 100%;}
.box-wrapper {    box-sizing: border-box;    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;    padding-bottom: .3rem;    margin: 0rem;}.box-in-wrapper {    position: relative;}
.label{    box-sizing: border-box;    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;    padding: 0rem;    margin: 0rem;}.form-in-wrapper {    box-sizing: border-box;    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;    padding: 1.5rem;    margin: 0rem;}.input-wrapper{    align-items: center;    display: flex;    margin-bottom: 0.5rem;    position: relative;    margin-top: 0.5rem;}.input-box {    resize: none;    min-width: 0px;    width: 100%;    font-weight: normal;    appearance: none;    background: rgb(245, 244, 242);    border: 1px solid rgb(229, 227, 221);    box-shadow: none;    box-sizing: border-box;    color: rgb(36, 30, 18);    height: 3rem;    outline: none;    padding: 0.75rem 1rem;    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;    border-radius: 4px;    font-size: 1rem !important;}.mint-text {    color: rgb(36, 30, 18);    font-family: Walsheim, sans-serif;    position: relative;    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;    text-align: center;    font-weight: 400 !important;    margin: 1em 0px !important;    font-size: 1.3125rem !important;    line-height: 1.25 !important}.form-btn {    align-items: center;    backface-visibility: hidden;    background-color: rgb(255, 66, 77);    border-radius: 9999px;    border: 1px solid rgb(255, 66, 77);    box-sizing: border-box;    cursor: pointer;    display: flex;    font-weight: 500;    height: unset;    -webkit-box-pack: center;    justify-content: center;    padding: 0.78125rem 1.5rem;    position: relative;    pointer-events: unset;    text-align: center;    text-decoration: none;    text-transform: none;    transition: all 300ms cubic-bezier(0.19, 1, 0.22, 1) 0s;    user-select: none;    white-space: unset;    width: 100%;    color: rgb(255, 255, 255);    font-size: 1rem !important;}.btn:hover  {    color: #ff424d;    border-color: #ff424d;    background-color: #fff;}
.form-btn:hover {    color: #ff424d;    border-color: #ff424d;    background-color: #fff;}



.form-btn-wrapper {    margin: 1rem 0rem}.nav-items {
}
.container {    margin: 0 auto;}
.flex {    display: flex;}.nav-button {
}
.pl {    padding-left:.2rem}
.pr {    padding-right:.2rem}.pr-2 {    padding-right: .5rem;}.pt {    padding-top: 0.7rem;}
.pt-3 {    padding-top: 0.2rem;}
@font-face {    font-family: 'Inter';    src:  url('./fonts/static/Inter-Regular.ttf') format('ttf'),    url('./fonts/static/Inter-Medium.ttf') format('ttf');}
body {    margin: 0;    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',    sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}
code {    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',    monospace;}
span.important {    font-size: 1.9rem;    color: #FF585D;}


a {    text-decoration: none;}

.log-link {    background-color: white;    color: rgb(36, 30, 18);    margin: 0em;    border-style: none;    border-color: white;    padding: .65rem 1.5rem;    cursor: pointer;    font-size: 1rem;    border: 1px solid #FF585D;    border-radius: 9999px;    cursor: pointer;}

.log-link:hover {    color: #fff;    border-color: #fff;    background-color: #ff424d;}

Step 12

Run React

Lastly, run the React application from the CLI from nft-marketplace-part-1 using the following command:

npm start

Now that we are familiar with NFT marketplace development on NEAR let us look at its development services provided by LeewayHertz in the next section.

What NEAR development services does LeewayHertz provide?

Scalable dApps

Leveraging the advantage of infinite scalability provided by Near Protocol, we build advanced, secure, and scalable dApps on the Near protocol. We also analyze your project’s technical aspects to accentuate your dApp’s utility.

NFT marketplaces

Our blockchain experts analyze and innovate feature-rich NFT marketplaces on Near Protocol, providing you with the most curated NFT trading platform. With the intrinsic features of Near blockchain, we tailor your marketplace precisely to best suit your business use case.

Smart contracts

We provide smart contract development services to regulate your business processes on Near protocol. We cover every angle of contract development, from smart contract architecture to design, auditing, and optimization.

Exchange Bridges

We help enterprises leverage interoperability with cross-chain bridge launch on the Near Protocol, permitting their users to seamlessly exchange tokens, arbitrary data and resources across multiple independent blockchains.

Node and wallets

We help you develop and run a node on Near Protocol based on your project-specific requirements. Our developers build and integrate wallets into your dApp and decentralized exchange to support dApps and associated transactions.

DAO Integration

We provide DAO creation and integration services, keeping various aspects of your project in focus. DAO helps you build trust among the users by permitting them to propose changes to the protocol and take major decisions.

Maintenance & upgrade

We also offer our clients consistent support and maintenance services to ensure their dApps are optimized and running with negligible downtime.

Conclusion

NEAR blockchain is one of the distinctive blockchains with an environment-friendly and carbon-neutral protocol that emits minimal carbon footprints. It is a highly scalable network based on the Nightshade and sharding consensus mechanisms.

Along with scalability, it has unique features like interoperability and human-readable account names instead of cryptographically-coded wallet addresses to its credibility. This makes it easier for the users to access the wallets and dApps. NEAR blockchain is; thus, one of the most compatible blockchains meeting the dApp development needs of various businesses and startups.

If you are looking to develop an NFT marketplace for your businesses on the NEAR protocol, contact our blockchain experts for further in-depth guidance.