A complete example of fullstack NFT minting dApp

Overview

Bored Ape NFT Minting dApp ( Udemy The Fullstack Nft Minting Website Course)

This a complete example of fullstack NFT minting dApp. BoredApe is built with the purpose of providing an entry point for future NFT Minting Website projects.

To see the demo check this link:

vercel

To better understand take my course:

udemy

Installation

You can use the default BoredApe smart contract and play with it or you can also put your own smart contract and make changes as needed. Remember to change .env file with your own variables.

Use the default BoredApe Smart Contract:

  # Clone the repository and change directory into it
  git clone https://github.com/codingwithdidem/boredape-minting-dapp.git
  cd boredape-nft-minting-dapp

  npm install            # Download packages
  npm run dev            # Run the dev server

Making Changes

First of all change .env variables with yours. And update the dapp.config.js file according to your needs.

If you want to make changes on BoredApe smart contract, you can find BoredApe.sol inside /contractsfolder. After making changes you need to recompile your smart contract using npx hardhat compile command. It will recompile the smart contract and create & update /artifacts folder. Smart contract ABI is also in this folder.

After making changes you need to update the scripts/whitelist.js with your whitelisted users accounts and deploy & verify your smart contract on ethereum blockchain. Use the scripts I created for you to do that. You can find the deploy & verify scripts inside /scriptsfolder.

  # This command will deploy your smart contract on rinkeby test network
  npx hardhat run scripts/deployContract.js --network rinkeby

  # This command will verify your smart contract on rinkeby etherscan
  npx hardhat run scripts/verifyContract.js --network rinkeby

** If you want to use a different network you need to pass its name instead of rinkeby. Also make sure you configured it in hardhat.config.js file as a network option.

Finally update the /utils/interact.js file so that it uses the related functions from your updated contract. Also change the contract address and the imported ABI in this file with your newly deployed contract.

Deploying on mainnet

When you are done with making changes and your minting dapp is just as you wanted it is time to deploy on ethereum mainnet. To do that;

  • Make sure you changed all env variables with yours. And also for the network you need to chose ethereum mainnet.
  • Update hardhat.config.js so that as network option you use mainnet not rinkeby. hardhat
  • While deploying your contract with hardhat you need to use mainnet as network-name
  # This command will deploy your smart contract on ethereum mainnet
  npx hardhat run scripts/deployContract.js --network mainnet

  # This command will verify your smart contract on mainnet etherscan
  npx hardhat run scripts/verifyContract.js --network mainnet

Tech Stack

Client: React, TailwindCSS, web3.js

Server: Alchemy, NextJS, Hardhat

Support

For support, email [email protected]

You might also like...

A checklist for you to complete as you go through Elden Ring.

A checklist for you to complete as you go through Elden Ring.

Elden Ring Checklist A checklist for you to complete as you go through Elden Ring. Visit the website · Report Bug · Request Feature Table of Contents

Dec 23, 2022

💸 Use case style digital image marketplace like nft. I developed this system by gathering a lot of my frontend/backend knowledge

💸 Use case style digital image marketplace like nft. I developed this system by gathering a lot of my frontend/backend knowledge

❗ WARNING This project is just an educational system, NOT a system made to carry out large transactions and with the same focus as nft. I developed th

Aug 30, 2022

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Dec 22, 2022

An example of a fast food ordering app with Ionic React

An example of a fast food ordering app with Ionic React

ionic-fast-food-app An example of a Food Ordering app in Ionic React Included in this Ionic React Template/UI Data fetching from JSON files Global sta

Nov 28, 2022

An example of a travel style app built with Ionic React

An example of a travel style app built with Ionic React

ionic-react-travel-app An example of a travel style app built with Ionic React If you'd like to support, you can buy me a coffee ☕️ Included in this I

Sep 27, 2022

Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

Redux-Toolkit CRUD example with React Hooks, Axios & Web API Build Redux-Toolkit CRUD application with React Hooks and Rest API calls in that: Each it

Dec 27, 2022

Example project using Miniflare, esbuild and AVA

Miniflare Example Project This is an example Cloudflare Workers project that uses Miniflare for local development, esbuild for bundling, and AVA for t

Dec 3, 2022

This example represents SCORM-compliant question set (aka quiz)

HTML&JS SCORM 2004 Compliant Quiz This example represents SCORM-compliant question set (aka quiz) and was made with Bootstrap 5 and Vanilla JS. You ma

Dec 25, 2021

A simple example on how to get WalletConnect to authenticate wallets in the Expo Go app.

A simple example on how to get WalletConnect to authenticate wallets in the Expo Go app.

WalletConnect Example on Expo This is a simple example how to get WalletConnect up and running with Expo for React Native. WalletConnect's dependency

Dec 30, 2022
Comments
  • how to resolve npm install?

    how to resolve npm install?

    problem

    npm install hardhat ethers @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers @openzeppelin/contracts dotenv

    yargs-parser Vulnerable to Prototype Pollution - https://github.com/advisories/GHSA-p9pc-299p-vxgp
    No fix available
    node_modules/@ensdomains/ens/node_modules/yargs-parser
      yargs  4.0.0-alpha1 - 7.0.0-alpha.3 || 7.1.1
      Depends on vulnerable versions of yargs-parser
      node_modules/@ensdomains/ens/node_modules/yargs
        solc  0.3.6 - 0.4.26
        Depends on vulnerable versions of yargs
        node_modules/@ensdomains/ens/node_modules/solc
          @ensdomains/ens  *
          Depends on vulnerable versions of solc
          node_modules/@ensdomains/ens
            @ethereum-waffle/ens  <=4.0.1-dev.e7e18f6
            Depends on vulnerable versions of @ensdomains/ens
            node_modules/@ethereum-waffle/ens
    
    54 vulnerabilities (4 low, 12 moderate, 34 high, 4 critical)
    
    
    opened by vipsland 0
  • Change to Polygon network

    Change to Polygon network

    Hello, a very cool application, please help and tell me in more detail how to switch to the polygon network already with abi? I can pay you for this ! Thanks!

    opened by MorozovIvan52 1
  • WalletConnect

    WalletConnect

    The wallet connect feature when using mobile throws the error of "To be able to mint, you need to connect your wallet" Only metamask is working and browser wallets. Coinbase Wallet works as well. Trust wallet does not work.

    opened by PykeAnon 0
  • GassLimit issue

    GassLimit issue

    Even if you remove
    gas: '30000', maxPriorityFeePerGas: '1000000108',

    You get this err

    METAMASK: This transaction is expected to fail. Trying to execute it is expected to be expensive but fail, and is not recommended.

    opened by syedsimanta03 2
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
This is a challenge intiated by ModelSis. It consists in building a basic fullstack web app

modelsis-react-fullstack ?? Description This is a challenge intiated by ModelSis. It consists in building a basic fullstack web app. The current repos

Régis 1 Jan 21, 2022
A React-fullstack platform to track all cryptocurrency in one place.

A React-fullstack platform to track all cryptocurrency in one place. Create your account and add your favorite coins.

Siddharth Singh Bhadoriya 14 Oct 10, 2022
A React-Fullstack platform helps to track & compare your Incomes & Expenses transactions in one place via detailed Graphical information to manage your Budget.

Budget Master Track your income and expenses in one place via detailed graphical information to manage your budget. Manage your budget and transaction

Siddharth Singh Bhadoriya 9 Nov 27, 2022
A little practice dapp for ethereum smart contract development.

Basic Sample Hardhat Project This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, a sample s

Andres Vidoza 9 Sep 28, 2022
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library Simple and complete React DOM testing utilities that encourage good testing practices. Read The Docs | Edit the docs Table of Co

Testing Library 17.3k Jan 4, 2023
A complete set up of the React application with Typescript, Webpack 5, Babel v7, SSR, Code Splitting and HMR.

Getting Started with react-final-boilerplate Clone the code npm install You are good to go with React Application. Open http://localhost:3000/ and you

null 24 Dec 22, 2022
⚡️ Look for Covid-19 Resources, Get Vaccine Availability Notification, Complete source code for covidrescue.co.in website.

covidrescue.co.in ⚡️ Get real-time, verified leads on Oxygen, Remdesivir, ICU, Beds, Food and more based on your location. Get notifications on Vaccin

Placeholder Tech 15 Jul 10, 2022
This website was designed to allow viewers complete access to all movie and tv series trailers. It was created using React + MUI

Trailer - Time ?? Demo https://trailer-time.netlify.app/ ?? about This project is a simplified front end clone of some movie webside (like Netflix/Hul

null 9 Aug 24, 2022
Web application that consumes an API to provide an complete experience of an recipes app

Project: Recipes App Project developed studying in Trybe. Technologies and tools used React React Hooks Context API SCRUM / Kanban Project objective T

Ádran Farias Carnavale 0 Jun 14, 2022