NFT-Fair, a playground of NFTs

NFT-Fair, a playground of NFTs

Created with <3 by Aryan, Cyril and Charles for the thirdweb x hashnode hackathon!

ยท

3 min read

alt text

โญ Introduction

Hello world ๐Ÿ‘‹ ,

Really proud to present before you, NFT-Fair , a place to forget about the complexities of NFTs and just play around with them. Create, buy, sell, earn and even play with the NFTs. This is the one true stop shop for NFTs. Applause for the awesome people at thirdweb, whose product made this project possible.

๐Ÿ’ซ NFT-Fair is so cool, but what is the need for it ?

You must have seen plenty of articles filled with esoteric jargon (thanks for this phrase hashnode team), dedicated websites and even videos explaining what are these NFTs and how can I get one? But there should be a place where you can just go in and get your hands dirty, mint some NFTs, buy or sell your work of art and even play with them.

Simply said, this is just a playground for you to interact with NFTs on a test network (Rinkeby).

โœจ What did we use to build it!

  • React Framework - NextJs
  • Everything Web3 - Thirdweb
  • UI Components - Chakra UI
  • CSS Framework - Tailwind CSS
  • Deployment - Heroku

๐ŸŒŠ The Flow of the app

whimsical.png

Basically what you do is,

  • First, connect your wallet, right now only metamask support has been provided.

LandingNew.png

  • You can create your own pixelated NFT by going into the create tab.

crate.png

  • Give the name, description and price of your very own NFT.
  • As soon as you click on "Proceed", using thirdweb, we mint your NFT and give you the ownership and list the same on the Marketplace.

minting_page.png

confetti.png

  • If you visit the Marketplace tab, you can see our marketplace and buy any NFT that you like.

marketplacepic.png

  • You can also view the NFTs price, description on the specific NFT page.

BuyNFT.png

  • To view the NFTs that you have owned, just click on the tab where you can see your account address.

profile.png

  • You can also view all the pixelated NFTs that our awesome users have made till now.

explore.PNG

  • Now going to our X-Factor feature, you can use your owned NFTs to play games!!

game.png

  • If we think you are good enough (that is if you score 500 points) you can claim a premium reward NFT.

won.png

๐Ÿš“ Code quality

We have used ESLint and prettier to maintain the consistency of the code and follow best practices. The website is completely responsive thus upholding the untold rules of UI/UX.

๐Ÿ”ฅ Thirdweb

Thanks to the people at Thirdweb for their awesome product and constantly helping us, responding to our doubts, throughout the journey of making this app. We were able to utilise a total of 3 modules : Collection, Marketplace and Bundle, and we were totally amazed by the ease at which we were able to do complex stuff such as creating listings, selling NFTs etc.

๐Ÿ’ญ Plans for the future

To make our project even more awesome, we have planned a few features :

  • Right now, we only have 1 game that the user can play with their NFT. We plan to add more variety of games to our app.
  • We are awarding only 1 premium NFT based on the performance in our games. Adding more premium NFTs based on different performances is something we are planning to do.
  • Adding more support to Pixel art maker and also giving the functionality to add images as files which can be minted.
ย