Jed Saylor minting dapp is a quick and easy way to connect your smart contract and start minting NFTs.

Overview

Welcome to Jed Saylor 👾

logo

All the code in these repos was created and explained by Jed Saylor on his course.

To find help please visit:

📺 Instagram

Jed Saylor NFT minting dapp 🔥

banner

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/JedSaylor/jedsalor_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": "Opeansea",
  "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...
An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.
An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.

Transl8r About the Project Transl8r is an app designed to connect people and translators to provide fast, effective translations via live chat, video

In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.
In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.

In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.

A demo project on how to control smart lights Philips Hue with Web Bluetooth
A demo project on how to control smart lights Philips Hue with Web Bluetooth

Basic smart light controller A demo project on how to control smart lights (Philips Hue) with Web Bluetooth. Created with React, TypeScript and Chakra

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.
The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State.

The easiest way to move your React application to Server-Side Rendering. Handles Side Effects and synchronizes State. Table of Contents Articles Featu

A guide to building your own React stack, explaining options and tradeoffs along the way
A guide to building your own React stack, explaining options and tradeoffs along the way

Custom React Stack React has a very rich ecosystem. For anything you want to do, there is probably a library or a framework available for it. That's g

Simplest way to add twitter widgets to your react project.

React Twitter Embed Component React Twitter Embed Component Simplest way to add Twitter Widgets to your react project. Demo and Examples https://saura

Github-profile-readme-maker - Best Profile Generator, Create your perfect GitHub Profile ReadMe in the best possible way
Github-profile-readme-maker - Best Profile Generator, Create your perfect GitHub Profile ReadMe in the best possible way

GPRM : GitHub Profile ReadMe Maker Features We got everything that you need ! Cr

Hotel-ETH - A Bed and Breakfast dApp run on Ethereum. Includes a token + schedule system (Solidity) and full front-end (React + ethers.js) built with Hardhat
a simple dapp login interface made it with react-ts-chakra-ui and usedapp

a simple dapp login interface made it with react-ts-chakra-ui and usedapp

Owner
null
This is used for minting NFTs and getting metadata , token owner, wallet address assigned to an NFT, just check it out and enjoy

nft-minter A Heroku web server to easily mint non-fungible tokens via an API Example Configuration: Blockchain: Ethereum Testnet: Rinkeby Contract: ER

John Oseni 9 Aug 24, 2022
Aviasales React-Redux-MobX- - A quick start Redux + TypeScript Create React App template

A quick start Redux + TypeScript Create React App template An opinionated quick

null 0 Mar 14, 2022
Very quick and easy integration of the Potree Viewer in React

Very quick and easy integration of the Potree Viewer in React

null 7 Nov 7, 2022
A plug-and-play hook that will send data about Ethereum contract interactions straight to FullStory

use-fullstory-web3 Automatically record web3 events into FullStory useFullStoryWeb3 is a plug-and-play hook that will send data about Ethereum contrac

Ralf Popescu 2 Nov 24, 2021
Dfkhero - Displays hero nfts in your react app

Hero svg component for react to show your DFK NFTs working on the readme will up

null 8 May 21, 2022
This repo shows how to connect your React app to StarkNet.

StarkNet.js + React This repo shows how to connect your React app to StarkNet. Content Contracts The contracts directory contains a simple Cairo contr

Francesco Ceccon 44 Sep 23, 2022
A simple way to write re-usable features with React + EffectorA simple way to write re-usable features with React + Effector

Effector Factorio The simplest way to write re-usable features with React + Effector Install npm install effector-factorio Why this? People became to

Anton Kosykh 39 Dec 25, 2022
A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and simple way.

simple-sharer [by BUILDBROTHERS.COM] A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and

null 5 May 29, 2022
:speech_balloon: Easy way to create conversation chats

React Simple Chatbot A simple chatbot component to create conversation chats Getting Start npm install react-simple-chatbot --save Usage There are sev

Lucas Bassetti 1.5k Dec 27, 2022
An easy way to build Rarity games with React

rarity-react An easy way to build Rarity games with React. It started with a simple app... I wanted to see my summoners and the prizes they'd won whil

murderteeth 7 Sep 15, 2022