Skip to content

This is the frontend codebase for the nft-marketplace which uses The Graph as decentralized indexer.

License

Notifications You must be signed in to change notification settings

sadityakumar9211/nextjs-nft-marketplace

Repository files navigation

Contributors Forks Stargazers Issues MIT License LinkedIn


image

NFT Marketplace

Buy NFTs · Sell NFTs · Withdraw Proceeds

This repository is one of the three repositories which are part of NFT Marketplace Project.

hardhat-nft-marketplace: Hardhat Repository of NFT Marketplace Project»
thegraph-nft-marketplace: The Graph Repository of NFT Marketplace Project»


View Demo · Report Bug · Request Feature

This is the Front-end repository of this project.

Table of Contents
  1. About The Project
  2. Getting Started
  3. Locally Deploying
  4. Contributing
  5. License
  6. Contact
  7. Acknowledgments

About The Project

image

Blockchain developed the idea of NFTs and introduced digital ownership of certain assets. This is because tokens are not exchangeable which makes it possible to establish property ownership in digital art.

NFT marketplace is a digital platform to create and trade digital assets. There are several marketplaces to create, sell, buy and trade NFTs. This is one small implementation of such platforms. The platform can allow you to buy and sell NFTs. You can also withdraw funds which you earned after selling the NFTs. For supporting fast and complex queries this system uses a decentralized indexing protocol The Graph. The smart contract is currently deployed on Rinkeby Testnet.

The links to other repositories of this project is at the top.

(back to top)

Built With

The following is a list of major frameworks, library and tools used for developing this repository.

  • Next
  • React
  • tailwindcss
  • moralis
  • web3uikit
  • pinata

(back to top)

Getting Started

Requirements

  • git
    • You'll know you did it right if you can run git --version and you see a response like git version x.x.x
  • Nodejs
    • You'll know you've installed nodejs right if you can run:
      • node --version and get an ouput like: vx.x.x
  • Yarn instead of npm
    • You'll know you've installed yarn right if you can run:
      • yarn --version and get an output like: x.x.x
      • You might need to install it with npm
  • Optional Instruction
    • Make sure that this repository and nextjs-nft-marketplace repository are in the same level in your directory structure.
    • This makes sure that whenever you deploy the smart contract, this repository's constants files are updated.

Quickstart

git clone https://github.com/sadityakumar9211/nextjs-nft-marketplace
cd nextjs-nft-marketplace
yarn

Note: If you locally want to run this repository, you have to follow the Quickstart and Deployment sections of all three repositories of this project. Also make sure that all three repositories are in the same directory when you clone them.

Optional Gitpod

If you can't or don't want to run and install locally, you can work with this repo in Gitpod. If you do this, you can skip the clone this repo part.

Open in Gitpod

(back to top)

Locally Deploying

  1. Deploy to your contract to Rinkeby After installing dependencies, deploy your contracts to rinkeby:
yarn hardhat deploy --network rinkeby
  1. Connecting with Subgraph

You can use the same subgraph temporary URI (as present in the pages/_app.js) to query the data or you can clone this repository and deploy your own subgraph using the instructions in above repo and generate your own temporary query URI.

  1. Start your UI Make sure that:

In your networkMapping.json you have an entry for NftMarketplace on the rinkeby network.

yarn dev

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. For detailed information on contribution see this.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

If you appreciated this, feel free to follow me or donate!

ETH Address: 0xED5A704De64Ff9699dB62d09248C8d179bb77D8A

Aditya Singh Linkedin Aditya Singh Twitter Aditya Singh StackOverflow Aditya Singh Medium Aditya Singh Gmail

Project Link: https://github.com/sadityakumar9211/nextjs-nft-marketplace

(back to top)

Acknowledgments

(back to top)

Deployed to the following URIs:

About

This is the frontend codebase for the nft-marketplace which uses The Graph as decentralized indexer.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published