facesNFT

A node.js nft generador

note: The SVG images of this project is for STUDY only and not meant to become an actual NFT, I recommend using your own SVG images to create your own live project.

The project layout:

What the project do

The App consists in 2 parts:

Part 1 - The front end.

• First, we generate random images using a pack of SVG's, where it returns the image, as well its properties.
• We wrap these images on the front end and create the marketplace, so the user can choose an NFT to mint.
• While on the front-end, the application call metamask and check for the wallet.
• When the user goes to the mint page and select minting the app does 3 things :
  • Upload the image to ipfs network and return its hash key
  • Add the rash key with the properties to create the metadata, and upload the metadata to the IPFS, returning a new hash key
  • Use web3 to connect to the smart contract deployed on the network
  • Call the smart contract function to mint, reducing the amount of ETH from the metamask wallet and creating a new NFT.
• Users get their nft recorded onto their wallet account on the network connection.

Part 2 - The smart contract.

• We write a smart contract in solidity.
• We use truffle to compile and migrate 
• The contract is deployed onto the network, in this case, we're using Ganache

Project progress:

• Generate Random images
• Improve front-end
• Upload to IPFS
• Create metadata
• Connect to MetaMask
• Deploy smart contract
• Mint metadata
• Sell on the marketPlace

Quick start

Go to poject directory

cd ./project

Install dependencies

yarn

or

npm install

Run development

yarn dev

or

npm run dev

Project might appear on your localhost : http://localhost:3000

Using Ganache accounts with Metamask

Truffle has a cute Pet Shop Tutorial, but a little extra work has to be done to use Ganache with Metamask.

This assumes you have installed Ganache and Metamask.

Ganache gives you 10 test accounts with 100.0 ETH each. What you’ll want to do is import an account from Ganache into Metamask to get access to one of those test accounts.

Metamask - edit your network

Open Metamask. You may need to either create or edit your network. If you have a local host network, you can edit the dropdown fields. If you don’t have one or want to use a different one, you can create a new one. See below for the values that you need to enter and where to find them.

Create a network name, for example here it is: localhost 8545. (You can change the network name to suit your preference).

Then, type in a url in the “New RPC URL” field. For example, my Ganache RPC server is running on http://127.0.0.1:8545. You can check your RPC server address if you are not sure by opening up the Ganache UI and copying the address you find under “RPC Server.” You also need to enter a chain ID into Metamask. My Ganache UI says my “Network ID” is 1337. This value is what you use for the Metamask “Chain ID.”

Ganache - find your private key

Next, you’ll need to find your private key so you can import your test account into Metamask. For example, if you open up the Ganache UI, you will find a list of your addresses with balances. To the far right of each is a key symbol. Choose an account, and click on the key symbol. It will display your ACCOUNT ADDRESS and PRIVATE KEY. Copy your private key to your clipboard since you will need it for Metamask.

s

Metamask - import private key

Next, open up Metamask. Find the option “Import Account.” Click it and you will be asked for your private key. Paste the private key from the previous step into the field, then click “Import.”

Metamask - check balance

Congratulations! When you’re done, you should have the ETH in your account.

Upload to IPFS (blocked)

Deploy Smart Contract (blocked)