NFT Marketplace DApp with React

This repository contains a decentralized application (DApp) built using React.js that interacts with an NFT Marketplace smart contract. The application uses the NFT Marketplace SDK to facilitate interactions with the Ethereum blockchain.

NFT-Marketplace contracts

NFT-Marketplace-SDK

Table of Contents

• Getting Started
• Routes Description
• Images
• Installation
• Usage
• Built With
• Contributing
• License

Getting Started

https://nft-marketplace-lime.web.app/

Required network - Sepolia test network

Before running this application, make sure you have installed node and npm on your system.

1. Clone the repository.
2. Install the dependencies with npm install.
3. Set up your environment variables.

REACT_APP_IPFS_PROVIDER={Infura IPFS provider}
REACT_APP_NETWORK={network}
REACT_APP_API_KEY={Infura API key}

4. Start the development server with npm start.
5. Build the application for production with npm run build.

Routes Description

• / - The home page of the DApp. Main landing page with an overview of the marketplace.

• /item/:id - Displays detailed information about a single NFT item based on the given ID.

• /create-collection - Allows users to create a new NFT collection.

• /mint-from - Displays a list of collections from which a user can mint NFTs.

• /mint-from/:id - Allows users to mint new NFTs from a specific collection based on the given ID.

• /collections - Displays a list of all collections available in the marketplace.

• /collections/:id - Displays all nfts from a collection.

• /add-item-from - Displays a list of collections from which a user can add items to the marketplace.

• /add-item-from/:id - Allows users to choose items to add to the marketplace from a specific collection based on the given ID.

• /list-item - Allows users to list items for sale in the marketplace.

• /my-items - Displays a list of items owned by the current user.

• /my-items/:id - Allows users to manage a specific item based on the given ID.

• /my-offers - Displays a list of offers made by the user.

• /user/:id - Displays all items owned by a user based on the given ID.

Images

Home page

Item page

Mint NFT page

My offers page

Installation

1. Clone the repository.
2. Install the dependencies with npm install.
3. Set up your environment variables.

Usage

• Start the development server with npm start.
• Build the application for production with npm run build.

🛠 Built with:

This project is built using the following dependencies:

• react ^18.2.0
• antd ^5.6.1
• ethers ^5.7.2
• ipfs-http-client ^60.0.1
• nft-mp-sdk ^1.1.2
• react-router-dom ^6.3.0
• wagmi ^0.10.10

Contributing

Contributions are welcome. Please open an issue or submit a pull request.

License

This project is licensed under the MIT License.