Dinos-nft-minting-dapp - A nice and easy way for linking an existing NFT smart contract to this minting dapp

Overview

Welcome to HashLips 👄

All the code in these repos was created and explained by HashLips on the main YouTube channel.

To find out more please visit:

📺 YouTube

👄 Discord

💬 Telegram

🐦 Twitter

ℹ️ Website

HashLips NFT minting dapp 🔥

This repo provides a nice and easy way for linking an existing NFT smart contract to this minting dapp. There are two ways of using this repo, you can go the simple route or the more complex one.

The simple route is so simple, all you need to do is download the build folder on the release page and change the configuration to fit your needs. (Follow the video for a walk through).

The more complex route allows you to add additional functionality if you are comfortable with coding in react.js. (Follow the below instructions for a walk through).

Installation 🛠️

If you are cloning the project then run this first, otherwise you can download the source code on the release page and skip this step.

git clone https://github.com/HashLips/hashlips_nft_minting_dapp.git

Make sure you have node.js installed so you can use npm, then run:

npm install

Usage ℹ️

In order to make use of this dapp, all you need to do is change the configurations to point to your smart contract as well as update the images and theme file.

For the most part all the changes will be in the public folder.

To link up your existing smart contract, go to the public/config/config.json file and update the following fields to fit your smart contract, network and marketplace details. The cost field should be in wei.

Note: this dapp is designed to work with the intended NFT smart contract, that only takes one parameter in the mint function "mintAmount". But you can change that in the App.js file if you need to use a smart contract that takes 2 params.

{
  "CONTRACT_ADDRESS": "0x827acb09a2dc20e39c9aad7f7190d9bc53534192",
  "SCAN_LINK": "https://polygonscan.com/token/0x827acb09a2dc20e39c9aad7f7190d9bc53534192",
  "NETWORK": {
    "NAME": "Polygon",
    "SYMBOL": "Matic",
    "ID": 137
  },
  "NFT_NAME": "Nerdy Coder Clones",
  "SYMBOL": "NCC",
  "MAX_SUPPLY": 1000,
  "WEI_COST": 75000000000000000,
  "DISPLAY_COST": 0.075,
  "GAS_LIMIT": 285000,
  "MARKETPLACE": "OpenSea",
  "MARKETPLACE_LINK": "https://opensea.io/collection/nerdy-coder-clones",
  "SHOW_BACKGROUND": true
}

Make sure you copy the contract ABI from remix and paste it in the public/config/abi.json file. (follow the youtube video if you struggle with this part).

Now you will need to create and change 2 images and a gif in the public/config/images folder, bg.png, example.gif and logo.png.

Next change the theme colors to your liking in the public/config/theme.css file.

:root {
  --primary: #ebc908;
  --primary-text: #1a1a1a;
  --secondary: #ff1dec;
  --secondary-text: #ffffff;
  --accent: #ffffff;
  --accent-text: #000000;
}

Now you will need to create and change the public/favicon.ico, public/logo192.png, and public/logo512.png to your brand images.

Remember to update the title and description the public/index.html file

<title>Nerdy Coder Clones</title>
<meta name="description" content="Mint your Nerdy Coder Clone NFT" />

Also remember to update the short_name and name fields in the public/manifest.json file

{
  "short_name": "NCC",
  "name": "Coder Clone NFT"
}

After all the changes you can run.

npm run start

Or create the build if you are ready to deploy.

npm run build

Now you can host the contents of the build folder on a server.

That's it! you're done.

You might also like...
Create-dapp-solana-nextjs - Scaffolding for a Solana dapp using TS, Next.JS, Tailwinds CSS, and Daisy UI

Create Solana Dapp with Next.JS Want to start develop with Solana fetching NFTs

A ready to customize project to make a nice webapp using Node.js (Express.js) for the backend and React with Typescript and Redux for the frontend.

A ready to customize project to make a nice webapp using Node.js (Express.js) for the backend and React with Typescript and Redux for the frontend.

The Quick and Easy way to build React + Redux Applications

This project is not maintained anymore. Try to use Next.js which is Awesome framework for building Fullstack React.js Apps. Reduxible The Quick and Ea

Buildspace-epic-nfts-ui - Project that will allow you to connect your wallet and mint an NFT, you will be able to resell the NFT on OpenSea
Dapp-core-components - A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

A library that holds the core logic of a dapp on the Elrond Network with an example to get started easily

ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

ReservoirKit is a react package that makes it easy to add buying NFTs into your dApp. It's intuitive, responsive and customizable.

Electron-mirror - Electron application for Smart Mirror using React via the electron-react-boilerplate repository.

Electron-Mirror Electron application for Smart Mirror using React via the electron-react-boilerplate repository. Starting Development Start the app in

Smart-vscode - React micro-frontends component that loads vue

English | 简体中文 React micro-frontends component that loads vue   This is a single

💅 Micro-library to write stylesheets with a non-opinionated approach, free of dependencies, and in the easiest way possible.
💅 Micro-library to write stylesheets with a non-opinionated approach, free of dependencies, and in the easiest way possible.

react-native-styl is a micro-library for React Native developers whose goal is to write stylesheets with a non-opinionated library, free of dependenci

Owner
EtherCluster
Blockchain DEV Web3 Smart Contracts DeFi ...
EtherCluster
ExoBitsNFT-Minting- - A complete NFT website with Minting and Gallery features

nft-minting-website-example ReExoBits A complete NFT website with Minting and Ga

NAJI2329 22 Sep 26, 2022
Payment Processor in smart contract and pay with crypto for business

Decentralized Pay With Crypto Implementation Tech Stack Node.js React Solidity S

Sercan ÇELENK 13 Jul 7, 2022
Web3-citizens-app - React application based on smart contract using web3 and MetaMask extention.

Citizens App (web3-react-redux) React application based on smart contract using web3 and MetaMask extention. Start the applicarion Recomend to install

Denys Voloshyn 3 Aug 25, 2022
Web3-nft-dapp-tutorial - A simple web3 app for minting NFTs

Web3 - Full Tutorial The demo contains a basic web3 app and smart contract for m

Fireship 188 Sep 28, 2022
Crypto Wiz NFT Minting dApp

This is CryptoWiz NFT minting dApp(BETA). This application describes the CryptoWiz collections and allows the mint of the NFTs.

null 4 May 26, 2022
Nft-marketplace - Reactjs And Smart Contracts Open Source Basic Nft Marketplace App

Open Source Nft Marketplace [Onprogress %1] Reactjs And Smart Contracts Open Sou

Özgür 221 Sep 22, 2022
Starter kit for developers who want to build an NFT minting site

NFT Dapp Starter Kit ??️ Ready to bootstrap your own NFT minting site? You're in the right place. This boilerplate repo contains an NFT minting contra

Coinbase 101 Sep 26, 2022
NFTProject - An open decentralized NFT Marketplace built with smart contracts powered by Ethereum

#Ethereum mTC - NFT Marketplace This is an open decentralized NFT Marketplace bu

αlphα 7 Sep 24, 2022
Example repository for integrating Ant Design with ReactPWA project. This repo demonstrates the usage & integration of Ant Design in existing ReactPWA project.

ReactPWA - PawJS & Ant Design Example repository for integrating Ant Design with ReactPWA project. This repo demonstrates the usage & integration of A

Atyantik 15 Jul 11, 2022
Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet

cronos-dapp-basic Basic Dapp showing how a React Dapp can connect to Cronos using MetaMask and Crypto.com Defi Wallet You need to have node version 14

Acclrate 1 Dec 27, 2021