For educational purposes

Prerequisites

1. Some programming knowledge of React, Typescript, Solidity, and hardhat smart contract development framework

2. Knowledge of how to generate your NFT images, and metadata and deploy it to the IPFS. If you don't know you can look into a Youtube tutorial or look up art-hashlip generator tutorial.

Getting Started

1. Clone Repo

2. Run yarn install

3. Once you have ran yarn install, install nvm and run the command nvm use to make sure you are using the version of node I have specified in the package.json and .nvmrc file

4. If you don't already have TSLint Plugin, install the TSLint plugin in vscode. That should work with the TS settings I have configured in the tsconfig.json file

5. Next you will need to check out the .env.example file at the root directory of the project replicate that file into your own .env file

6. Take a look at the tailwind.config.js file and customize your primary and secondary colors for your theming.

7. Be sure to checkout all the @TODO's around the app to become aware of important things you will likely need to adjust or change to fit your project.

8. You should be all set. I encourage you to purge/remove all unused icons and components you do not intend on using to decrease the overall build size. The reason I have so many icons and UI components is b/c this repo is intended to be a very good starting template.

Starting up the Project

1. First you will need to navigate to the project's root directory and run npx hardhat clean (this wont matter the first time but is a good habit to ensure no old contract artifacts effect your contract behavior) , npx hardhat compile (this will compile all contracts in the /contracts directory), npx hardhat node (will start the development hardhat environment on http://127.0.0.1:8545/) and then npx hardhat run scripts/deploy-nft.ts --network localhost to deploy the NFT contract to your local blockchain.

2. When you are ready to deploy your contract to the mainnet or a testnet you can run npx hardhat run scripts/deploy-nft.ts --network <network name> If the Network you wish to deploy to is not in the hardhat.config.js file you will need to update that variable and variables on the FE to make sure your application matches where you wish to deploy.

3. In another terminal tab runyarn start will start up the FE application.

4. IMPORTANT NOTE: You should deploy your contract before starting up the Front End Application. By running the deploy script, a .json file using your NFT's SYMBOL as its name (ex: 0xWF.json) will be written to the /src directory of your NFT project so the FE application can read in the contract.

5. This project has been successfully deployed and hosted on the web via Fleek.io (pl7yg-5aaaa-aaaad-qbwiq-cai.ic.fleek.co) but you can deploy this site via other methods if you want

Using Hardhat Locally

• You can add hardhat to metamask and import the accounts generated by hardhat node.

• To add the hardhat network locally click "Add Network" in metamask and use http://127.0.0.1:8545/ as the RPC URL, 31337 as the ChainId, Hardhat Local as the Network Name and GO as the Currency.

• Next import one of the hardhat accounts that are listed when you ran npx hardhat node via the private key generated in the terminal. It is important TO NEVER USE THIS ACCOUNT ON THE MAINNET. All Funds sent here WILL BE LOST. Name the account something relevant to ensure you never accidentally use it. I named mine Hardhat Account #0 since that is the primary key that I imported.

Hardhat Account #0 private key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

Deployment

• When deploying your application you will want to make sure that the application is pointed to the blockchain you are trying to use. In the ConnectWalletModal.tsx file you will want to make sure that connector.activate is pointed towards the chain of choice. In our project that will be Polygon, and the var you should see is CHAIN_ID which is managed in the consts.ts file. Update the consts.ts file with the address and abi of your test and production contract values.

• There are three different REACT_APP_NODE_ENV options. development, test and production. These determine which smart contract your local FE points to. Development will point to your local hardhat smart contract that is automatically generated when you run the deploy script against the local network. Test will run the FE with the test network smart contract you defined in consts.ts and production will run the app against the production contract you declared.

• Opensea will automatically index your NFT project if done correctly but if you face any issues you can go to the following link to get your contract indexed by them. https://testnets.opensea.io/get-listed or https://opensea.io/get-listed

• Your project is also automatically indexed on Rareible https://testnet.rarible.com/collection/polygon/0xe665b21fe7adc6e96c59fb96bf3c3a82ce14c060/items

Deploying Mainnet Production

1. First you will need to make sure all of your environment variables are correct then you will need to deploy your smart contract to mainnet by running npx hardhat clean & npx hardhat compile & npx hardhat run scripts/deploy-nft.ts --network matic at the root directory level of the project. Note that mint cost is calculated in wei. In order to do deploy to mainnet you will need the private key of a "hot wallet" to hold necessary funds to deploy the contract and cover the gas fees.

2. Once deployed, grab the contract address and abi that is created in your json file and paste that into the production variables in your consts.ts file.

3. Now deploy your app with the correct production environment variables so that your hosted project is pointed to the correct smart contract on the mainnet.

4. Make sure your smart contract is verified on the mainnet by running the following command npx hardhat verify --network matic --constructor-args contract-arguments.js <Your contract address>

5. Mint an NFT and make sure it is indexed on opensea. You can typically search open sea by the contract address and customize the collection as long as you are using the owner wallet that deployed the contract.

6. Withdraw funds from smart contract collected via minting. You should not keep your funds in the smart contract or hot wallet as that possesses the most risk.

Additional Scripts

yarn storybook will run the storybook UI library so you can have a playground for the components in the components/UI directory. Customize your UI components as you see fit.

Any additional questions you can reach out to me via twitter @0xD4V1NC1

License

MIT ©