Anime NFT Marketplace

Summary

• About
• Architecture and Client-side Flow
• Demo
• Features
• Built with
• Development Challenges
• Wishlist
• Contribution Guidelines
• Local Depolyment
• Troubleshooting

About Project

This full-stack DApp Anime NFT Marketplace was created as a research project to find out more about how to create smart contracts and use blockchain technology. Made with Vercel, Hardhat, ReactJS, NextJS, NodeJS, and Solidity.

I want to make the nft market accessible and secure for everyone. This project's goal is to develop a open source nft marketplaces rather than running a nft marketplace. Because of this, forking and customising this marketplace makes it simple to develop numerous nft marketplaces. We will benefit from supporting the artists in this way. We must come from many backgrounds and work together if we are to prosper in the world.

Architecture and Client-side Flow

Architecture

Client-side Flow

The user must have the Metamask wallet installed in order to access the app using a web browser. The web3.js package is used by this React.js-created interface to communicate with the smart contracts via Metamask. This indicates that the information displayed on the front-end application is downloaded from the Ethereum blockchain. Each user activity (minting an NFT, making an offer, purchasing an NFT, etc.) generates an Ethereum transaction that must be confirmed by Metamask and incurs a tiny charge. This transaction permanently changes the state of the NFTCollection and NFTMarketplace smart contracts. The user will then add the NFT Metadata to the IPFS and upload it there, generating a permanent hash that will be permanently recorded on the blockchain itself to demonstrate ownership.

Demo

Project_Working.mp4

Features

The user can perform the following actions on this NFT Marketplace:

Mint

The user must input a name, description and upload a file (image) to mint his own NFT. Once minted, a representation of this NFT will be displayed in the marketplace and initially it will be owned by its creator. This is open for everyone, meaning everyone can participate in this NFT creation within this collection.

Make Offer

The user can offer his NFT by specifying its price (in Ether). If someone fulfills this offer, then the ownership is transferred to a new owner.

Cancel Offer

The user can cancel an offer he did in the past if in the end he does not want to sell his NFT or wants to adjust the price.

Buy

A user can buy those NFT which someone else offered. This will require paying the requested price (the Ether will be transferred to the smart contract to be claimed later on).

Built With

This project was developed with the following technologies:

Frontend _{^{React + JavaScript + Next.js}}

• React
• Axios
• Redux
• Web3.js
• Next.js

Backend _^Express

• Express

Blockchain and Smart Contracts _^Solidity

• Solidity
• Hardhat

Development Challenges

• Updating NFT UI Cards after an action was performed
• Addressing [Metamask's accountsChanged event being fired twice on mobile] (MetaMask/metamask-mobile#2162)
• Construction of a Web3 context provider
• Investigating several issues that led to "Estimate gas failed" errors*

* They are typically brought on by inaccurate contract addresses and inaccurate default gas values.

Contribution Guidelines

Is there is anything missing any of your favorite features, which you think you can add to it❓ I invite you to contribute to this project and make it better. To start contributing, follow the below guidelines:

1. Fork this repository.

2. Clone your forked copy of the project.

git clone https://github.com/Nishu0/anime_nft_marketplace.git

3. Navigate to the project directory 📁 .

cd Go-with-flow

4. Add a reference(remote) to the original repository.

git remote add upstream https://github.com/Nishu0/anime_nft_marketplace.git

5. Check the remotes for this repository.

git remote -v

6. Always take a pull from the upstream repository to your master branch to keep it at par with the main project(updated repository).

git pull upstream main

7. Create a new branch.

git checkout -b <your_branch_name>

8. Perfom your desired changes to the code base.

9. Track your changes:heavy_check_mark: .

git add .

10. Commit your changes .

git commit -m "Relevant message"

11. Push the committed changes in your feature branch to your remote repo.

git push -u origin <your_branch_name>

12. To create a pull request, click on compare and pull requests.

13. Add appropriate title and description to your pull request explaining your changes and efforts done.

14. Click on Create Pull Request.

15 Voila ❗ You have made a PR to the nft-marketplace 💥 . Wait for your submission to be accepted and your PR to be merged.

How to run

• Copy .env.local.example to .env.local and fill it with environment variables
• Run npm run node to start a local EVM blockchain testnet
• Run npm run setup to deploy NFT and Marketplace contracts and perform some initial actions to the local blockchain
• Run npm run dev to start frontend application
• Make sure to use Localhost 8545 as the Metamask's network
• Make sure to import local Account #0 and #1 into Metamask accounts.

Wishlist

• Refactor frontend code to accept other networks besides Mumbai
• Lazyload for NFTs images and metadata
• Add support for custom ERC20 tokens as payment

Troubleshooting

Mumbai marketplace setup command is breaking with a 'estimate gas failed' error

Try changing hardhat.config.js mumbai gas values.
I'm using the ones I've found here:
https://forum.moralis.io/t/deploy-to-polygon-matic-mumbai-fails/700

Nouce is too high

Reset your Metamask account transaction history.
Find out more on:
https://medium.com/@thelasthash/solved-nonce-too-high-error-with-metamask-and-hardhat-adc66f092cd

📬 Get in touch!

Made with ☕ and ❤️ by Nisarg Thakkar.