NFT Degenerator

NFT Degenerator is a platform that empowers artists & creators to submit their NFTs to the blockchain. They can either upload their creations or mint a short video randomly generated for them to experience the power of the Degenerator. On the left hand side of the web application, user will interact with the blockchain with just a few easy button clicks. The app is connected to their Web3 wallets and the user can connect using Polygon (mainnet), Polygon (Mumbai testnet) and Ethereum (Rinkeby testnet). DEMO: https://youtu.be/dnZlceCVmSw IPFS Images, videos and data are initially saved to IPFS. All the metadata is sent to IPFS via piñata and the user gets an URI back before minting their NFT. Since storage on the blockchain is expensive, the NFT payload, such as name, attributes, and artwork is stored in another location and called NFT metadata. The smart contract provides a reference to the storage location. Metadata can be stored on IPFS to decentralize an NFT. Doing so prevents centralized control over it. If metadata IPFS files are pinned at least somewhere on an online computer they cannot get lost.

MINTING USING POLYGON Once this is completed, the user is then asked to MINT their NFT. All smooth and easy. A link pops up to ask for a payment and the NFT is then automatically put up for sale at OpenSea.

We've used Vue 3's latest and greatest to build the frontend with Typescript, Vue 3's composition API, Pinia Store and ethers.js. We're using the Covalent API to efficiently get NFT metadata like compressed IPFS images, IPFS metadata, historical transactions, etc. We've developed a custom frontend caching system using Pinia Store, Axios and the LocalStorage HTML 5 API. An interesting part of the way we've implemented the Covalant API is the way we mix it with on chain data (RPC nodes). Together it created a seamless user experience. Given the limited time we had to develop the App we were able to quickly prototype most of the UI using the fantastic TailwindCSS - a utility first CSS library. The frontend keeps track of chainId changes and responds accordingly by switching the app to the newly selected chain (for example: in MetaMask) and also responds to important blockchain events. Every time a user mints an NFT or transfers an NFT the UI updates and the user can view the last transactions in the account pop-up window.