- About
- Architecture and Client-side Flow
- Demo
- Features
- Built with
- Development Challenges
- Wishlist
- Contribution Guidelines
- Local Depolyment
- Troubleshooting
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
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.
Project_Working.mp4
The user can perform the following actions on this NFT Marketplace:
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.
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.
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.
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).
This project was developed with the following technologies:
- 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.
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.
- Copy
.env.local.exampleto.env.localand fill it with environment variables - Run
npm run nodeto start a local EVM blockchain testnet - Run
npm run setupto deploy NFT and Marketplace contracts and perform some initial actions to the local blockchain - Run
npm run devto start frontend application - Make sure to use
Localhost 8545as the Metamask's network - Make sure to import local Account #0 and #1 into Metamask accounts.
- Refactor frontend code to accept other networks besides Mumbai
- Lazyload for NFTs images and metadata
- Add support for custom ERC20 tokens as payment
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
Reset your Metamask account transaction history.
Find out more on:
https://medium.com/@thelasthash/solved-nonce-too-high-error-with-metamask-and-hardhat-adc66f092cd
Made with ☕ and ❤️ by Nisarg Thakkar.