kit-t's Marketplace

A full stack NFT marketplace Dapp!
View Demo | View Contract

Table of Contents

1. About The Project
   • Functionalities
2. How Tos
   • List Item
   • Buy Item
3. Built With
   • Backend
   • Frontend
4. Getting Started
   • Prerequisites
   • Installation

About the project

This is a submission for StackUp's OpenStack NFT Marketplace Bounty.

Functionalities

• user can connect wallet to marketplace
• user can give approves marketplace to transfer NFT
• user can list own NFTs for sale
• user can buy listed NFTs

How Tos

List Item

1. First, click on "Connect Wallet" on the upper right corner.

2. After connected, you will be able to see "List NFT" button on the upper right corner. Click on it to open List Item form.

3. Fill in contract address and id for the NFT to be listed, then click "Next".

4. Wait for NFT to be loaded and fill up the selling price before submitting the form. You will be prompted to approve marketplace to transfer NFT and the transaction to list item.

Buy Item

1. First, click on "Connect Wallet" on the upper right corner.

2. After connected, you will be able to see "Buy Now" button on NFT listed that are still available. Click on the button and approve the transaction to buy item.

Built With

Backend

• OpenZeppelin as framework to build secure smart contract

• Hardhat for unit testing & deployment of Solidity smart contract

• Polygon Mumbai as EVM testnet for the smart contract

Frontend

• Next.js as framework for frontend web app development

• Mantine for building beautiful, responsive & accessible components

• Thirdweb SDK and Ethersjs for connecting to user wallet & interacting with the testnet

• Firebase for hosting frontend app

Getting Started

Prerequisites

• Install Node.js 18

Installation

1. Clone the repo

git clone https://github.com/teyweikiet/stackup-openstack-nft-marketplace-bounty.git

Backend

1. Go to backend directory

cd backend

2. Install NPM packages

npm install

3. Create .env and modify accordingly

• Get polygonscan api key here. [how-to]
• To get wallet's private key in Metamask

cp .env.example .env

4. Compile and deploy smart contract to polygon mumbai

npm run compile
npm run deploy:mumbai

5. Get the address from console and use it for env in frontend

Frontend

1. Go to frontend directory

cd frontend

2. Install NPM packages

npm install

3. Create .env and modify accordingly

• Get thirdweb client id here. [how-to]

cp .env.example .env