NFTinBio

Your one-stop shop for all links and NFT showcases! Users can log in and access a personalized dashboard where and easily visualize all the NFTs in their wallet along with a small preview of what their site looks like. They're also able to rearrange the order of their NFTs, change their background colours, choose from a wide selection of gradients we've listed, edit their profile display names, insert a short bio about themselves, edit their link, and add social media accounts to their page.

The list really goes on as we hope to integrate a bidding feature that allows owners to auction off their tokens! With immediate real-time updates within the preview window, users will get a sense of what end users will see after clicking their NFT in bio! with a custom link to share with friends, fans and family anyone can enjoy their collection of NFTs.

To build this project, we used a mix of web2 and web3 technologies.

The app is mostly built on NextJS and deployed using Vercel. User authentication is done using MetaMask integration. This means that users have register/sign in using their wallet. Once this is done, we use the Rarible Protocol API to query the blockchain and retrieve all of the NFTs on that wallet address.

In addition, we also use Firebase Firestore to store the users profile data, as well as their customized NFT list. This needs to be done because users can modify the order in which their nfts are displayed.

Once a user logs in using MetaMask, they can use the dashboard to reorder their list of nfts, change their profile information, and change their theme. These changes are all pushed to the user’s Firestore document.

The user’s username is the link to their specific page, which is dynamically generated on the server side, so when a user navigates to nftin.bio/**username** it will query Firestore and generate the users customized page on the server side and then send it to the client, creating a customize homepage for anyone’s NFTs.