NFT Marketplace built with Meteor

It is finally here! An NFT marketplace app built with Meteor. This app is for demonstration purposes only and is based on Nader Dabit’s tutorial about creating an NFT marketplace. The idea was to replicate his final app using Meteor instead of Next.js as the framework while adding new functionalities. We added a details page for each item and sort/filter options for the items list. We wanted to develop something that will help new developers looking to learn Meteor in a fun way, building something cool along the way.

Overview

The application allows you to put NFTs for sale, buy, and even resell if you want to. We are doing this using Polygon, which is built on top of Ethereum. Still, it is faster and cheaper for users to interact with it. It also helps devs build apps that otherwise would be more complex if built directly on Ethereum.

Besides, this is everything we used to build the app:

• Web application framework — Meteor (of course)
• Solidity development environment — Hardhat
• File Storage — IPFS
• Ethereum Web Client Library — Ethers.js

What you will find in the app

If you want to check it out live, you should first make sure you have the Metamask browser extension installed and that you have made a Metamask account. Then you can go to https://meteor-nft-marketplace.meteorapp.com and play with it. Or, if you like to see it in action locally, you can clone the project from https://github.com/meteor/examples. For both options, there are instructions in the README.md file in the application’s root folder.

The first screen you see when entering the app is the list of all the NFTs for sale. For example, you can also sort the items by price or date added.

The home page

The connection to the app is made with Metamask when you go to the Connect screen.

Connect to the app with your Metamask wallet

You can also create an item to sell if you want. The create screen is where you add the image, price, and other info on the item you’re selling. We use IPFS to upload and save images.

Create new item

We created a Details page, where you can check all the info on the item you select. For this to work, we had to add a small function that was not in the original Marketplace contract called fetchMarketItem .

Details page

The user also has his own page, where you can filter by items owned or for sale, along with the sort option like on the home page. For this page to work, we also had to add minor tweaks to the original contract, creating a function to fetch all the items from a user.

The user account page

Conclusion

Please take some time to look at the code and play with it. Make your own version of the marketplace, customize the contract, and add more functionalities, as this was made for you guys entering the web3 world. And don’t forget to check the original tutorial from Nader Dabit using this link. We hope you like this app and can’t wait to see what you make with Meteor + web3 in the future.