All Projects → jellydn → nft-app

jellydn / nft-app

Licence: other
How to create your own NFT and mint NFT token

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
solidity
1140 projects
HTML
75241 projects
shell
77523 projects
CSS
56736 projects

Projects that are alternatives of or similar to nft-app

dapp-starter
Opinionated Dapp Starter Template
Stars: ✭ 207 (+42.76%)
Mutual labels:  web3, openzeppelin, hardhat, etherjs, dapp-starter
nft-swap-sdk
Ethereum's missing p2p NFT and token swap library for web3 developers. Written in TypeScript. Powered by 0x.
Stars: ✭ 200 (+37.93%)
Mutual labels:  dapp, web3, nft
Artion-Server
Artion API Server
Stars: ✭ 26 (-82.07%)
Mutual labels:  web3, nft, etherjs
NFT-Dapp-Boilerplate
A highly scalable NFT and DEFI boilerplate with pre added web3 and different wallets with a focus on performance and best practices
Stars: ✭ 51 (-64.83%)
Mutual labels:  dapp, web3, nft
nextjs-dapp-starter-ts
A fullstack monorepo template to develop ethereum dapps
Stars: ✭ 228 (+57.24%)
Mutual labels:  dapp, web3, hardhat
typescript-eth-starter
🔌 Ethereum Dapp Basic Typescript Starter
Stars: ✭ 125 (-13.79%)
Mutual labels:  dapp, web3, hardhat
simple-nft-marketplace
This project provides sample codes to build a simple NFT marketplace with Amazon Managed Blockchain.
Stars: ✭ 59 (-59.31%)
Mutual labels:  nft, openzeppelin, hardhat
foodprint
Algorand dApp for blockchain-enabled food transparency and traceability in local food supply chains. For use by smallholder farmers, food co-operatives and consumers.
Stars: ✭ 43 (-70.34%)
Mutual labels:  dapp, web3
Artion-Client
Client app for Artion, a global NFT marketplace on Fantom Opera.
Stars: ✭ 71 (-51.03%)
Mutual labels:  dapp, nft
starter-kit-gsn
An OpenZeppelin starter kit focused on GSN.
Stars: ✭ 39 (-73.1%)
Mutual labels:  dapp, web3
openzeppelin-network.js
An easy to use and reliable library that provides one line access to Web3 API.
Stars: ✭ 45 (-68.97%)
Mutual labels:  dapp, web3
court
The Kleros court user interface.
Stars: ✭ 19 (-86.9%)
Mutual labels:  dapp, web3
vue-web3
🐙 Web3 blockchain bindings for Vue.js (inspired by Vuefire and Drizzle)
Stars: ✭ 63 (-56.55%)
Mutual labels:  dapp, web3
bcdhub
Better Call Dev backend
Stars: ✭ 30 (-79.31%)
Mutual labels:  dapp, nft
eth-commerce
Javascript library to accept ethereum payments on any website
Stars: ✭ 24 (-83.45%)
Mutual labels:  dapp, web3
kleros-api-DEPRECATED
A Javascript library that makes it easy to build relayers and other DApps that use the Kleros protocol. DEPRECATED use https://github.com/kleros/archon for interfacing with standard arbitration contracts.
Stars: ✭ 20 (-86.21%)
Mutual labels:  dapp, web3
ton-client-js
Everscale Javascript SDK
Stars: ✭ 60 (-58.62%)
Mutual labels:  dapp, web3
alice-NFT
Ethereum for Javascript devs
Stars: ✭ 38 (-73.79%)
Mutual labels:  nft, hardhat
defi-dapps-solidity-smart-contracts
This is a Web 3 Smart Contract learning and teaching repo which will be used to teach students all across Pakistan.
Stars: ✭ 241 (+66.21%)
Mutual labels:  dapp, hardhat
colonyDapp
Colony dApp client
Stars: ✭ 52 (-64.14%)
Mutual labels:  dapp, web3

Welcome to nft-app 👋

Version License: MIT Twitter: jellydn

How to create your own NFT token

🏠 Homepage

Blockchain - DApp 101 - Create your own NFT token

Blockchain - DApp 101 - Mint a NFT token

Demo

https://gyazo.com/fccacc5f480839196343bf95728c9b6a.gif

Screenshot

screenshot1.png

screenshot2.png

Features

  • ⚡️ React TypeScript template with Vite 2
  • 📦 Hardhat - Ethereum development environment for professionals
  • 🦾 TypeChain Hardhat plugin - Automatically generate TypeScript bindings for smartcontracts while using Hardhat.
  • 🔥 web3-react - A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps
  • 🎨 daisyUI Tailwind CSS Components - clean HTML with component classes
  • 🎨 OpenZeppelin - standard for secure blockchain applications

Install

yarn install

Usage

Run Web App

# Prepare .env file
# Run web site
cp .env.example .env
npx hardhat compile --network localhost
yarn dev

Run API App

# Prepare .env file
# Run web site
cd server
cp .env.example .env
yarn install
yarn dev

Run tests

yarn test

Deploy NFT to Rinkeby

This example, we will deploy to Rinkeby network. If you do not have hardhat shorthand, then please run

npm i -g hardhat-shorthand
hardhat-completion install

1.Deploy MyAwesomeLogo to Rinkeby

hh run scripts/deploy.ts --network rinkeby

Output:

Generating typings for: 0 artifacts in dir: src/types for target: ethers-v5
Successfully generated 3 typings!
Successfully generated 3 typings for external artifacts!
MyAwesomeLogo deployed to: 0x39a5079afE9F3e3bB4db1B943e2063AC3dc87251
owner 0x096cd10D7BEF8D5923b18b18E9f79CA230ee2285
  1. Mint some NFT tokens
hh run scripts/mint.ts --network rinkeby

Output:

Generating typings for: 0 artifacts in dir: src/types for target: ethers-v5
Successfully generated 3 typings!
Successfully generated 3 typings for external artifacts!
MyAwesomeLogo deployed to: 0x39a5079afE9F3e3bB4db1B943e2063AC3dc87251
Name MyAwesomeLogo
Symbol MAL
Uploaded file to nft storage Token {
  ipnft: 'bafyreib22oziqft7cbakshc374mwctwiprzyj24ufpeogkjff3lroumcru',
  url: 'ipfs://bafyreib22oziqft7cbakshc374mwctwiprzyj24ufpeogkjff3lroumcru/metadata.json'
}
Minted NFT 0x0aad3903cb8d11f095babdc7ba47963ad6235b0a3cd5d32ee42560798816235a
Uploaded file to nft storage Token {
  ipnft: 'bafyreid3gvwkltwkgvpxur3eozuh6dirfg2ohqizhn4rpn764dji272aoe',
  url: 'ipfs://bafyreid3gvwkltwkgvpxur3eozuh6dirfg2ohqizhn4rpn764dji272aoe/metadata.json'
}
Minted NFT 0xe1ed7be02639310cf101b495e55d27421be018cc12cd90d1f46547c627b5132c
Uploaded file to nft storage Token {
  ipnft: 'bafyreieealfw66zppxhkivuti5qkmsuihjxgxgrxdfm2o5p4qna5l347bu',
  url: 'ipfs://bafyreieealfw66zppxhkivuti5qkmsuihjxgxgrxdfm2o5p4qna5l347bu/metadata.json'
}
Minted NFT 0x183af6b95464305aa5f9f0ed97a5b8847bd168bbb28e3f6368d04662a44cb8fc

3.Verify with etherscan.io

hh verify --network rinkeby 0x39a5079afE9F3e3bB4db1B943e2063AC3dc87251

Output:

Nothing to compile
Generating typings for: 0 artifacts in dir: src/types for target: ethers-v5
Successfully generated 3 typings!
Successfully generated 3 typings for external artifacts!
Compiling 1 file with 0.8.4
Successfully submitted source code for contract
contracts/MyAwesomeLogo.sol:MyAwesomeLogo at 0x39a5079afE9F3e3bB4db1B943e2063AC3dc87251
for verification on Etherscan. Waiting for verification result...

Successfully verified contract MyAwesomeLogo on Etherscan.
https://rinkeby.etherscan.io/address/0x39a5079afE9F3e3bB4db1B943e2063AC3dc87251#code

Hardhat guideline

This project demonstrates an advanced Hardhat use case, integrating other tools commonly used alongside Hardhat in the ecosystem.

The project comes with a sample contract, a test for that contract, a sample script that deploys that contract, and an example of a task implementation, which simply lists the available accounts. It also comes with a variety of other tools, preconfigured to work with the project code.

Try running some of the following tasks:

npx hardhat accounts
npx hardhat compile --network localhost
npx hardhat clean
npx hardhat test
npx hardhat node
npx hardhat help
REPORT_GAS=true npx hardhat test
npx hardhat coverage
npx hardhat run scripts/deploy_greeter.js --network localhost
node scripts/deploy.js
npx eslint '**/*.js'
npx eslint '**/*.js' --fix
npx prettier '**/*.{json,sol,md}' --check
npx prettier '**/*.{json,sol,md}' --write
npx solhint 'contracts/**/*.sol'
npx solhint 'contracts/**/*.sol' --fix

Etherscan verification

To try out Etherscan verification, you first need to deploy a contract to an Ethereum network that's supported by Etherscan, such as Ropsten.

In this project, copy the .env.example file to a file named .env, and then edit it to fill in the details. Enter your Etherscan API key, your Ropsten node URL (eg from Alchemy), and the private key of the account which will send the deployment transaction. With a valid .env file in place, first deploy your contract:

npx hardhat run --network ropsten scripts/deploy_greeter.js

Then, copy the deployment address and paste it in to replace DEPLOYED_CONTRACT_ADDRESS in this command:

npx hardhat verify --network ropsten DEPLOYED_CONTRACT_ADDRESS "Hello, Hardhat!"

Contract upgrade

OpenZeppelin provides tooling for deploying and securing upgradeable smart contracts.

Smart contracts deployed using OpenZeppelin Upgrades Plugins can be upgraded to modify their code, while preserving their address, state, and balance. This allows you to iteratively add new features to your project, or fix any bugs you may find in production.

In this project, there are a 2 versions of contract: Box and BoxV2 which is improvement of Box. First deploy your contract:

npx hardhat run --network localhost scripts/deploy_upgradeable_box.js

Then, deploy the upgrade smart contract

npx hardhat run --network localhost scripts/upgrade_box.js

Examples

  • Simple Store App: counter-like smart contract, read/write value and listen to event from smart contract.
  • ICO Token App: How to create An ERC20 token and implement ICO smart contract (CrowdSale).

One click deployment

Deploy on Railway

Author

👤 Dung Huynh

Stargazers 🌟

Stargazers repo roster for jellydn/nft-app

Show your support

Give a ⭐️ if this project helped you!

ko-fi


This README was generated with ❤️ by readme-md-generator

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].