# Web3 DAPP powered by Netlify - NFT Avatar I am excited to share my recent DAPP project in which I explored working with Netlify. This project's goal is to create an NFT collection of wallets with avatars. These avatars can be used by the users to identify themselves to various web3 platforms. ## Tech Stack I used [NextJs](https://nextjs.org/) to make the DAPP and [Netlify](https://www.netlify.com/) for deployments. Feel free to go through the code in [Github](https://github.com/ximxim/nft-avatar) repo or try out the [DAPP](https://nft-avatar.netlify.app/). ## How to use the DAPP ### Prerequisites - A crypto wallet like Metamask. - Have a small amount of [MATIC](https://coinmarketcap.com/currencies/polygon/) in order to mint your avatar. ### Steps - Open the [DAPP](https://nft-avatar.netlify.app/) in your browser of choice. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645762261337/9z7beVs9v.png) - Click on the `Connect Wallet` button. ![Screen Recording 2022-02-24 at 11.11.54 PM.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1645762360960/HEQx6-hx5.gif) - Select your wallet of choice. ![Screen Recording 2022-02-24 at 11.12.59 PM.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1645762432856/j6sy_Hfdb.gif) - Once the wallet is connected, upload an image and fill out the avatar form. ![Screen Recording 2022-02-24 at 11.17.20 PM.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1645764046347/ObXceq0Or.gif) - Click on the `Create NFT Avatar` button. ![Screen Recording 2022-02-24 at 11.17.20 PM.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1645764107042/qsPoiTj0_.gif) - Confirm the transaction. ![Screen Recording 2022-02-24 at 11.17.20 PM.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1645764159139/NJiqAD_PG.gif) - That's all, you now own a custom NFT avatar. ![Screen Recording 2022-02-24 at 11.43.26 PM.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1645764308265/fSMe6tmVe.gif) ## Why Netlify There are many reasons why you should pick Netlify over other hosting solutions, here are my top three reasons to pick Netlify for this project. I have used Vercel in my previous projects, so a lot of my decision-making will be compared to Vercel. ### 1. Easy to deploy NextJS I built this project without Netlify in mind and when it came time to host the project, I was hesitant to deploy to Netlify over Vercel because I thought there would be a considerable amount of work involved. However, that hesitation was unfounded, all I had to do was add Netlify's npm package `@netlify/plugin-nextjs` and that's it. I was able to start deploying my NextJS app to Netlify. ```shell yarn add @netlify/plugin-nextjs ``` OR ```shell npm install @netlify/plugin-nextjs ``` ### 2. Speedy deploys Netlify deploys are very speedy, initial deployment took a bit longer than I expected. However, the following deployments were very speedy due to Netlify's sophisticated caching mechanism. While waiting you can play a matching game, I love this small yet personal touch. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645800206525/GMgk4i2ok.png) ### 3. Environment variables settings Netlify sensitive environment variable policy is a huge win in my books. I failed to find something similar on the Vercel platform. Some of the environment variables are very sensitive in nature and I always wanted to put them behind role-based access which Netlify allows. Also, what if a team member decides to console log one of these sensitive variables by pushing some code, they can bypass that role-based access. Netlify's sensitive environment variable policy counters these concerns beautifully by allowing project owners to decide whether deploys will need approvals or they just won't use sensitive data. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645800345397/J3mzy08FR.png) ### There is more to love Netlify's project dashboard is like candy land for me. I see all these others options such as Plugins, Identity, Forms, Graph and many more. I want to build more projects using these other features that I didn't get a chance to work with in this project. ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645800811264/X2sMFd5oB.png) ## Conclusion Working with Netlify was very frictionless and I found the [Docs](https://docs.netlify.com/) very useful. They have a great support team.