NFT Analytics Dashboard

The NFT Dashboard combines three topics, analytics, creating and displaying. One part of the dashboard could be used to find interesting nfts and get an overview about their statistics, e.g. floor price or amount of transactions. The creating part is for easily creating custom nfts. So the user doesn't have to write a single line of code to deploy their own ERC721 smart contract. And the last part is about displaying your nft collection. So the user can connect with their wallet and watch all of his owned nfts. Currently there is overall only basic functionality implemented, but there could be more statistic or the possibility to add more specific metadata to the nfts.

This project uses Vue.js 3 as the frontend framework. It uses typescript and pinia, which is a new alternative implementation of vuex and I used it as a data store. Then i used axios to create calls to get nft data from the covalent api. Also I used the Vue router to tie all the components in the frontend together. The router does also check when the user want to navigate to specific pages where he need to signed in with his wallet, if he is. Otherwise we will be requested to do so and then redirected to the page he wanted to get to. The interesting part of this project was the backend. It has only one endpoint yet, but this one is very complex. So the endpoint is for taking metadata input for a smart contract and then the smart contract will be generated, compiled and then sended back. So the idea was to write a smart contract template which uses the mustache syntax to create placesholders for variables. The the mustache render engine just replaces the variables and generates and ready to compile smart contract. Now the smart contract is given as input to solc, the solidity compiler (or specific the js bindings for it), and will be compiled. Now the compiled smart contract is converted to json, which is used for the response of the endpoint. This was the most impressive thing, which I didn't expect to get so interesting!