An NFT is a "token" that a person can own that links to some piece of "data"

Last update: Jul 1, 2022

Make EpicNFT

In our last repo we build a very simple wave portal where we built its frontend and then added the other functionalities to make sure that the user is not supposed to refresh every single time ti get the updated data. In this repo we will build a portal to allow the users mint their own NFTs.

Right now we have just added the run.js and deploy.js that will locally deploy contract, deploy it on Rinkeby testnet respectively and the contract contains the solidity file that mints the NFT.

What in tarnation is an NFT

An NFT is a "token" that a person can own that links to some piece of "data" (ex. a link to a piece of digital art, a video, an image, etc). The trick with NFTs is that each "token" has a unique identifier that lets the owner prove that it's one of a kind.

Get the local environment up

The bigger picture here is:

1 -- We're going to write a smart contract. That contract has all the logic around our NFTs.

2 -- Our smart contract will be deployed to the blockchain. This way, anyone in the world will be able to access and run our smart contract โ€” and we'll let them mint NFTs!

3 -- We're going to build a client website that will let people easily mint NFTs from our collection.

Next, let's head to the terminal. Go ahead and cd to the directory you want to work in. Once you're there run these commands:

mkdir epic-nfts
cd epic-nfts
npm init -y
npm install --save-dev hardhat

Cool, now we should have hardhat. Let's get a sample project going.

npx hardhat

Choose the option to create a basic sample project. Say yes to everything.

You'll also want to install something called OpenZeppelin which is another library that's used a lot to develop secure smart contracts. We'll learn more about it later. For now, just install it :).

npm install @openzeppelin/contracts

Then run:

npx hardhat run scripts/sample-script.js

Output:

Boom! If you see this it means your local environment is set up and you also ran/deployed a smart contract to a local blockchain.

This is pretty epic. We'll get into this more but basically what's happening here step-by-step is:

Hardhat compiles your smart contract from solidity to bytecode. Hardhat will spin up a "local blockchain" on your computer. It's like a mini, test version of Ethereum running on your computer to help you quickly test stuff! Hardhat will then "deploy" your compiled contract to your local blockchain. That's that address you see at the end there. It's our deployed contract, on our mini version of Ethereum.

Mint an NFT locally

The NFT standard is known as ERC721 which you can read a bit about here. OpenZeppelin essentially implements the NFT standard for us and then lets us write our own logic on top of it to customize it. That means we don't need to write boiler plate code.

It'd be crazy to write a HTTP server from scratch without using a library, right? Of course, unless you wanted to explore lol. But we just wanna get up and running here.

Similarly โ€” it'd be crazy to just write an NFT contract from complete scratch! You can explore the ERC721 contract we're inheriting from here.

Check the comments in code to understand each line of smart contract

What is tokenURI

The tokenURI is where the actual NFT data lives. And it usually links to a JSON file called the metadata that looks something like this:

{
    "name": "Spongebob Cowboy Pants",
    "description": "A silent hero. A watchful protector.",
    "image": "https://i.imgur.com/v7U019j.png"
}

You can customize this, but, almost every NFT has a name, description, and a link to something like a video, image, etc. It can even have custom attributes on it! Be careful with the structure of your metadata, if your structure does not match the OpenSea Requirements your NFT will appear broken on the website.

This is all part of the ERC721 standards and it allows people to build websites on top of NFT data. For example, OpenSea is a marketplace for NFTs. And, every NFT on OpenSea follows the ERC721 metadata standard which makes it easy for people to buy/sell NFTs. Imagine if everyone followed their own NFT standards and structured their metadata however they wanted, it'd be chaos!

Use this website here to keep your JSON metadata. The metadata that i used for the contract can be found here: https://jsonkeeper.com/b/P1YD If you want to use any image in your metadata use imgur to host the image and then use the link in JSON. The image that i used in the JSON metadata for the contract can be found here: https://i.imgur.com/VF3KMiN.jpg

Mint an NFT locally

Check run.js I have added all the necessary comments Execute the run.js file to mint an NFT locally

npx hardhat run scripts/run.js

Output

Boom! We just minted an NFT w/ id 0 locally to ourselves! So, we know that the code is working and nothing is crashing. Awesome. You always want to use `run.js` to just make sure stuff is working locally and not crashing. It's your own little playground!

Deploy to Rinkeby and see on OpenSea

When we use run.js, it's just us working locally.

The next step is a testnet which you can think of as like a "staging" environment. When we deploy to a testnet we'll actually be able to to view our NFT online and we are a step closer to getting this to real users.

We will be using Alchemy and Rinkeby Testnet.

We're not going to be deploying to the "Ethereum mainnet" for now. Why? Because it costs real money and it's not worth messing up! We're just learning right now. We're going to start with a "testnet" which is a clone of "mainnet" but it uses fake $ so we can test stuff out as much as we want. But, it's important to know that testnets are run by actual miners and mimic real-world scenarios.

This is awesome because we can test our application in a real-world scenario where we're actually going to:

  • Broadcast our transaction

  • Wait for it to be picked up by actual miners

  • Wait for it to be mined

  • Wait for it be broadcasted back to the blockchain telling all the other miners to update their copies

We will now set up a deploy.js file to deploy the contract on testnet, its just same as run.js but its a good practice to keep 2 js files, one for local and other for Rinkeby

Again Check the comments to understand the code

Run this command from the root directory of epic-nfts.

npx hardhat run scripts/deploy.js --network rinkeby

It takes like 20-40 seconds to deploy usually. We're not only deploying! We're also minting NFTs in deploy.js so that'll take some time as well. We actually need to wait for the transaction to be mined + picked up by miners. Pretty epic :). That one command does all that!

Output:

We can make sure it all worked properly using Rinkeby Etherscan where you can paste the contract address and see what's up with it! My deployed contract on Rinkeby Testnet: https://rinkeby.etherscan.io/address/0x046ccd1738241Ae36FecD2B8d08575a2aaCb37c8

View on OpenSea

Believe it or not. The NFTs you just minted will be on OpenSea's TestNet site.

Head to testnets.opensea.io. Search for your contract address which is the address we deployed to that you can find in your terminal, Don't click enter, click the collection itself when it comes up in the search.

Here's my NFT on OpenSea: https://testnets.opensea.io/collection/dakshnft

What's next?

Blockchain is all about decentralization, and trustless network but here we depend on imgur for our images to stay alive and we also depend on json keeper for our json metadata to stay intact. These two are centralized organization, no one would love to lose their image or no dev wants to lose their metadata just becaue these two orgs go down. How to tackle this check here.

GitHub

https://github.com/dakshp07/epic-nft
You might also like...

A Whatsapp Clone which built with reactJS. You can sign in with your Google Account and you can chat in real time.

Whatsapp Clone with ReactJS In this app you can create a simple chat room and send messages to each other using our google accounts in the room. Whats

Nov 24, 2021

A Disney+ Clone that you can sign in with your Google AccountA Disney+ Clone that you can sign in with your Google Account

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Jun 30, 2022

๐Ÿž Jam is your own open source Clubhouse for mini conferences, friends, communities

๐Ÿž Jam is your own open source Clubhouse for mini conferences, friends, communities

Jam ๐Ÿž Jam is an open source alternative to Clubhouse, Twitter Spaces and similar audio spaces. With Jam you can create audio rooms that can be used f

Aug 5, 2022

React Typescript project with react-testing-library, own training, inspired and designed by ArchakovBlog

React Typescript project with react-testing-library, own training, inspired and designed by ArchakovBlog

Jan 8, 2022

Movie search engine - Clone and use as your own movie search engine

Getting Started with movie_search_engine Step 1 Clone movie_search_engine this r

Feb 28, 2022

A guide to building your own React stack, explaining options and tradeoffs along the way

A guide to building your own React stack, explaining options and tradeoffs along the way

Custom React Stack React has a very rich ecosystem. For anything you want to do, there is probably a library or a framework available for it. That's g

Jul 22, 2022

Roll some six-sided dice for games that ask you to roll too many dice.

Roll some six-sided dice for games that ask you to roll too many dice.

Roll some six-sided dice for games that ask you to roll too many dice.

Oct 26, 2021

This is a complete news application having some awesome AI tool like Alan AI and use advance React concepts.

This is a complete news application having some awesome AI tool like Alan AI and use advance React concepts.

News AI Live_Site Setup to use and run it. You have to install following dependencies npm install npm i @material-ui/core @alan-ai/alan-sdk-web classn

Oct 7, 2021

A react and framer motion app to play some quizzes !

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Jan 7, 2022
Related tags
remix-generate-css-links automatically generates links for your imported .css files
remix-generate-css-links automatically generates links for your imported .css files

remix-generate-css-links remix-generate-css-links automatically generates links for your imported .css files. You get the convenience of importing css

Jul 16, 2022
Auto-AI - An Auto-ML application that runs on your OWN computer instead of some server in the cloud
Auto-AI - An Auto-ML application that runs on your OWN computer instead of some server in the cloud

Thia Auto-ML An Auto-ML application that runs on your OWN computer instead of so

Feb 21, 2022
NFT-Marketplace-React-Dapp: An NFT Marketplace Decentralized app with Polygon blockchain network
NFT-Marketplace-React-Dapp: An NFT Marketplace Decentralized app with Polygon blockchain network

An NFT Marketplace Decentralized app with Polygon blockchain network having basic functionalities such as acquire and mint NFTs โ€ฆ

Jul 20, 2022
NFT DROP React.js (Minting NFT's with thirdweb, Sanity, Next.js, Tailwind, TS)
NFT DROP React.js (Minting NFT's with thirdweb, Sanity, Next.js, Tailwind, TS)

NFT DROP React.js ?? LIVE DEMO PREREQUISITES: Install Node JS in your computer HERE MetaMask HERE Sanity HERE thirdweb HERE This project was bootstrap

Aug 6, 2022
Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk
Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Snow is a social network. Here you can create and share content! You can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Jul 29, 2022
Tesla-Dashboard - A dashboard built with React, Node.js, and Express.js to visualize some data from Tesla's Private API.

Tesla-Dash Welcome to the Tesla Dash repository! This is a starter repository to demonstrate building a full-stack app using the private Tesla API. Yo

Apr 27, 2022
Token prediction frontend with React, Web3.js

Prediciton Frotnend Test This project contains the main features of the token price movement prediction application. If you want to contribute, please

Jul 13, 2021
Kutt is a modern URL shortener with support for custom domains. Shorten URLs, manage your links and view the click rate statistics.
Kutt is a modern URL shortener with support for custom domains. Shorten URLs, manage your links and view the click rate statistics.

Kutt is a modern URL shortener with support for custom domains. Shorten URLs, manage your links and view the click rate statistics.

Aug 5, 2022
Render URL links for Web & Twitter previews
Render URL links for Web & Twitter previews

expo-link-preview Render URL links for Web & Twitter previews Built with react-native using expo.

May 27, 2022
Fireshare - Share your game clips, videos, or other media via unique links
Fireshare - Share your game clips, videos, or other media via unique links

Fireshare Share your game clips, videos, or other media via unique links. Live Demo ยท Report a Bug ยท Buy us a Coffee! Table of Contents About The Proj

Jul 25, 2022