After creating the NFT images and posting them on OpenSea, I decided to delve into the coding aspects of NFTs by building my own marketplace specifically for the NFT collection I've created.
If you'd like to explore and visit the website, click on this link. Remember, you need to have Metamask installed on the browser you're using to access the website since it's a Web 3.0 application, and Metamask or a similar wallet is necessary.
Tech Stack Used
Homepage
On the initial page, you'll encounter an image of Saitama, which is the original inspiration for the NFT artworks. Below that, you'll find a button prompting users to connect their wallets.
Click on that button, and your Metamask wallet will open, prompting you to log in. After logging in, you'll be redirected to the marketplace homepage, where the first page of available NFTs is displayed.
If an NFT is already owned by a user, there will be a label at the top right of the NFT stating "OWNED." This doesn't mean you cannot buy it; in this application, an NFT can be owned by multiple users.
To purchase a specific NFT, hover over a card and click the "Buy Now" button. If you prefer to buy a random one, click the button in the top left corner for a random NFT.
My Tokens
An NFT that you've purchased is referred to as a token. To view the tokens you've bought, click on the "My Tokens" tab in the middle of the app. This will redirect you to the "My Token" page where you can see the tokens you've acquired.
Profile
You can set an owned NFT as your profile. If you've purchased a specific NFT and want to set it as your profile, hover over the desired NFT and click the "Set Profile" button.
NFT Details
To see more details about an NFT, hover over it and click the "More Info" button to access additional information. Here, you can view the names of the head, body, and weapon that compose the image. On the top left corner, you can see the addresses of the owners of that specific NFT.
That's the overview of the NFT marketplace application. Although it may not seem like much, a considerable amount of backend work was involved in developing this application, including extensive code writing for testing.