Full stack NFT marketplace built with Polygon, Solidity, IPFS, Web3, Ether, Tailwind & Next.js

Overview

Full stack NFT marketplace built with Polygon, Solidity, IPFS, Web3, Ether, Tailwind & Next.js

by Agholor Christotle

This is a full stack project with both frontend and backend connected.

Helping you to see how things are put together and not just writing solidity, or just interacting with a contract, etc but actually building the whole thing and testing it end to end.

Another interesting thing about this project is that we will be working with an Ethereum Scalability Solution like Polygon which helps us achieve things with cheap transaction fees.

We will be working with:

  1. Hardhat: for the solidity development environmrnt
  2. Ether: for client library to interact with chain
  3. IPFS: for files uploads and files downloads
  4. Web3 module: to enable us choose a wallet to work with...(Metamask etc)
  5. Chai: for testing
  6. OpenZeppelin/Contract: to inherit the ERC721 contract functionality.
  7. NextJS: for our frontend app.
  8. Tailwing: to simplify our styling.
  9. Axios: for fetching data from library.

Screenshots

Marketplace

Market Place

Creating Item on the market

Creat Item

Running this project

follow the steps bellow:

To run this project locally, follow these steps.

  • Clone the project locally, change into the directory, and install the dependencies:
git clone https://github.com/johnchristotle/NFT-Marketplace-Project.git

cd NFT-Marketplace-Project

# install using NPM or Yarn
npm install

# or

yarn

KEY NOTES:

  1. look at the .gitignore file and find 3 key ignored files: provide yours to enable you run this app e.g
  • a. .infuraId - get an ID from infura and place it here

  • b. .secret - copy the private key of the wallet you intend to use and place it here

  • c. config.js - when you run npx hardhat run scripts/deploy.js --network localhost/mumbai/mainnet the contract address will automatically appear there.

  • d. NOTE: should the network fails when you using (`https://polygon-mumbai.infura.io/v3/${infuraId}`) at your index.js file, please copy and paste the full network including your ID and it will pass through.

Local setup

  1. Start the local Hardhat node
npx hardhat node
  1. With the network running, deploy the contracts to the local network in a separate terminal window
npx hardhat run scripts/deploy.js --network localhost
  1. Start the app
npm run dev

Testnet setup

  1. Start the local Hardhat node
npx hardhat node
  1. With the network running, deploy the contracts to the local network in a separate terminal window
npx hardhat run scripts/deploy.js --network mumbai
  1. Start the app
npm run dev

Mainnet setup

  1. Start the local Hardhat node
npx hardhat node
  1. With the network running, deploy the contracts to the local network in a separate terminal window
npx hardhat run scripts/deploy.js --network mainnet
  1. Start the app
npm run dev
You might also like...

This is a full-stack exercise tracker web application built using the MERN (MongoDB, ExpressJS, ReactJS, NodeJS) stack. You can easily track your exercises with this Full-Stack Web Application.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 25, 2021

🪐 The IPFS gateway for NFT.Storage is not "another gateway", but a caching layer for NFTs that sits on top of existing IPFS public gateways.

nftstorage.link The IPFS gateway for nft.storage is not "another gateway", but a caching layer for NFT’s that sits on top of existing IPFS public gate

Dec 19, 2022

(🔗, 🌲) Web3 Link Tree is a free & open-source alternative to Linktree built with React.js, Next.js, Tailwind and Web3-React

Getting Started Read the detailed guide here Customize Add your name, wallet address, social media links and more in config.ts Images Save images to t

Sep 20, 2022

Basic Implementation of a Contract Wallet in Solidity. The owner can transfer Ether/ERC20 and execute transactions via low-level calls.

Contract Wallet Basic Implementation of a Contract Wallet in Solidity. The owner can transfer Ether/ERC20 and execute transactions via low-level calls

Jun 18, 2022

Solidity Quickstart is an extensive solidity guide for the solidity newbies out there.

🚀 Solidity Quickstart Solidity Quickstart is an extensive solidity guide for the solidity newbies out there. 🤔 How does it work? All the guides rela

Aug 6, 2022

A full-stack dApp starter built on Ethereum (Solidity) with Next.js (React).

A full stack dApp starter built on Ethereum (Solidity) with Next.js (React) This repo contains boilerplate code for interacting with a simple smart co

Dec 30, 2022

Dead simple program to upload NFT data to IPFS via nft.storage

Dead simple program to upload NFT data to IPFS via nft.storage

NFTP The simplest way to publish files and folders to IPFS, with one command. 100% FREE to upload as much files as you want, powered by nft.storage. N

Dec 11, 2022

Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minutes!

Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minutes!

Candy Shop (IN BETA) Intro Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minu

Dec 15, 2022

Decentralized twitter using Solidity, Ethereum, hardhat, ethers, IPFS, Next.JS, TypeScript, TailwindCSS.

DWITTER: Decentralized Twitter Check out the deployed version of this app at https://dwtr.wajeshubham.in Transactions on Ethereum are slow. Therefore,

Sep 2, 2022

⚡⚡NextJS Full NFT Marketplace Application Running with Alchemy SDK. Deploy In Minutes with Smart Contracts Attached

⚡⚡NextJS Full NFT Marketplace Application Running with Alchemy SDK. Deploy In Minutes with Smart Contracts Attached

+ Alchemy SDK Easy Polygon NFT Marketplace NextJS App Be sure to watch my Youtube video so you can learn and follow along! ** THE FILES ATTACHED TO TH

Nov 16, 2022

Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535] 🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535]  🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

💎 Fullstack Dynamic NFT Mini Game 🎮 💎 Using Diamond Standard Play On 💎 🎮 ⏩ http://diamond-dapp.vercel.app/ Project Description 📝 Fullstack Dynam

Dec 23, 2022

This project aims for Road to web3 Hackathon powered by Polygon

BlogStream A blog site where users directly pay the writers for only what they are reading This is a project created for Road to Web3 hackathon by Web

Sep 12, 2022

This is a fully functional DAO, a Web3 project made using Solidity, Hardhat, JS, Next.js, Openzeppelin, CSS, HTML, using the Rinkerby network!

My First DAO! This is made for a DAO-Tutorial via learnweb3.io This is a DAO, a decentralised autonomous organisation, essentially a more collective a

Jun 20, 2022

Lying flat is a 20 NFT collection on a custom marketplace built on Zora's protocol

Lying flat is an NFT Marketplace powered by ZORA 🌜 🌞 🌛 The codebase is open for everyone to use it as a boilerplate, customize it and deploy their

Sep 20, 2022

Decentralized Twitter prototype built with Polygon, GraphQL, Next.js, Ceramic, Arweave, and Bundlr

Decentralized Twitter prototype built with Polygon, GraphQL, Next.js, Ceramic, Arweave, and Bundlr

Titter - Web3 Social chat beta as fuck 🛠 Built with Next.js, Arweave, Bundlr, Ceramic, GraphQL, & Polygon How it works This is a working prototype of

Dec 14, 2022

🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

🐲 Epic NFTs [UI] El proyecto se encuentra deployado en Vercel para que puedan verlo e interactuar con él, toda crítica o comentario se agradece, pued

Oct 22, 2022

A wrapper around IPFS for speeding up the loading of web3 frontend applications.

ipfs-wrapper A wrapper around ipfs-core for speeding up the loading of web3 frontend applications. Used on Blogchain. Requirements NodeJS v14.5.0 or h

Sep 14, 2022

Ethereum Smart Contracts for locking your Ether and ERC20 tokens based on time and price conditions

SmartHold - a simple way to lock and hold your ETH or ERC20 in a smart contract This is a BETA software that has not been audited for security. USE AT

May 5, 2022

Receive crypto payments from anywhere around the world, options including native tokens (MATIC, ETHER,BUSD), Tokens (USDT,BUSD), NFTs and more.

Receive crypto payments from anywhere around the world, options including native tokens (MATIC, ETHER,BUSD), Tokens (USDT,BUSD), NFTs and more.

Receive payments for service rendered in crypto using different options. Go borderless with bonpay, gain access to varities of crypto assets, safe and

Nov 11, 2022
Owner
Christotle Agholor
Full-Stack Developer, Blockchain Engineer, Specializes in React, cloud, cross-platform, MERN Stack and full-stack blockchain application development
Christotle Agholor
Easily generate your NFT collection from Wokas

Woka NFT Generator ??‍♂️ Easily generate your NFT collection from Wokas

Alexis Faizeau 11 Jun 20, 2022
Build a Cryptocurrency Tracker with Next.js and GraphQL

Build a Cryptocurrency Tracker with Next.js and GraphQL This is the complete code to my blog post on Medium on "Build a Cryptocurrency Tracker with Ne

Presterud Myrseth Technologies 4 Dec 1, 2022
Clean up user-submitted HTML, preserving whitelisted elements and whitelisted attributes on a per-element basis. Built on htmlparser2 for speed and tolerance

sanitize-html sanitize-html provides a simple HTML sanitizer with a clear API. sanitize-html is tolerant. It is well suited for cleaning up HTML fragm

Apostrophe Technologies 3.2k Dec 26, 2022
A full stack digital marketplace running on Ethereum, built with Polygon, Next.js, Tailwind, Solidity, Hardhat, Ethers.js, and IPFS

A full stack digital marketplace running on Ethereum, built with Polygon, Next.js, Tailwind, Solidity, Hardhat, Ethers.js, and IPFS

Christotle Agholor 32 Dec 27, 2022
NFT Marketplace framework to build standalone NFT marketplace or inApp/inGame NFT marketplace

NFT Marketplace This project is a decentalized NFT Marketplace framework which is to be the baseline for you to build standalone NFT marketplace or in

Reddio, inc. 14 Dec 19, 2022
Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collections

eznft Yet another library for generating NFT artwork, uploading NFT assets and metadata to IPFS, deploying NFT smart contracts, and minting NFT collec

null 3 Sep 21, 2022
Kittos is NFT Marketplace built with Next Js, Hardhat, Solidity, Arweave + Bundlr Client and All The CSS Magic with TailwindCSS. 😺

Kittos NFT Marketplace ?? Built with Next Js, Hardhat, Solidity, Arweave, Bundlr and Tailwind CSS. Functionalities New Listed Assets Mint NFT Buy NFT

Aakrut 7 Dec 24, 2022
✨ An IRL tokenization platform to turn your hopes, dreams, and desires into fundable NFTs on the Polygon blockchain using Chainlink, IPFS, Moralis, and NFT.Storage.

GoFundYourself Getting funding for your passion project, needs or dream doesn't have to be a nightmare! check out our live demo on Netlify Let's Fundi

Brian H. Hough | brianhuff.eth 7 Dec 6, 2022
Build a Full Stack Marketplace on Ethereum with React, Solidity, Hardhat, and Ethers.js

Building a Digital Marketplace on Ethereum The technologies used in this workshop are React, Next.js, Tailwind CSS, HardHat, Solidity, and Ethers. Get

Nader Dabit 114 Nov 15, 2022
An NFT Marketplace built with NextJS, Hardhat and Solidity

??️ NFT Marketplace This is a fullstack DApp NFT Marketplace built as a study project to learn more about blockchain and smart contract development. M

Marcelo Kopmann 99 Dec 31, 2022