The Fullstack Nft Minting Website Course

Name: The Fullstack Nft Minting Website Course
Rating: 4.1 (217 reviews)

Learn how to create a NFT minting website by actually building one! Create 10.000 NFT Collection with its metadata.

Created byDidem Küçükkaraaslan

Last updated 5/2022

English

English [Auto],

What you'll learn

Learn how to create 10.000 NFT Collection with its metadata
Learn how to upload your NFTs on IPFS
Learn creating NFT Smart Contracts
Learn creating a Fullstack Nft Minting Dapp
Learn how to manage Whitelist Sale, Public Sale and Reveal Processes

Course content

4 sections • 21 lectures • 4h 43m total length

Download The Final Nft Minting Dapp Code Here0:07
What are we gonna built ? - The Course Flow2:05
Hi! I included the final dapp application in the sources. To be able to run it:

1. You need to download the zip file.
2. Unzip the zip file and open it with your code editor.
3. Use npm install command to download packages
4. Use npx hardhat compile command to create compiled smart contract files. ( artifacts folder )
5. Finally use the npm run dev command to start the dev server!
Creating The Art ( PSD) & Upload to IPFS18:33
Create a 10000 nft collection from a Photoshop template by layering head, eyes, clothes, and background. Upload IPFS metadata via Pinata and update with a script.
Create HIDDEN ART & Upload to IPFS6:22
Upload hidden NFT art and metadata to IPFS, create a reveal mechanic with a placeholder question mark image, and prepare hidden JSON for the minting website.

Create Nextjs App + Tailwindcss3:55
Create the NFT minting website frontend using a Next.js app with Tailwind CSS, configuring project structure, installing packages, adjusting pages, and starting the development server to test styling and components.
Color Theme & Font8:14
Create the app’s color theme using a Colors palette, define color variables, apply contrasting backgrounds and text, and set Koine as the default open-source font for an accessible user interface.
Add Code Format ( Prettierrc )1:21
Create a prettierrc file in the project root and define formatting options: trailing comma none, semicolons false, and single quotes; set tab width to four and notice semicolons disappear.
Building The Home Page - Header9:06
Design a home page header with a logo and navigation links. Implement responsive header styling using flex layout, a gradient logo from blue to purple, and mobile versus desktop padding.
Building The Home Page - About14:55
Builds the home page and about section for a full NFT minting website, explaining the collection and guiding users to the minting page with a responsive flex container.
Building The Mint Page32:29
Build the mint page for an NFT site, featuring a dynamic minting card, presale status, wallet integration, total price calculation, and a connect-wallet and mint button workflow.
Connect Wallets33:37
Hello everyone there is a new version of Blocknative Onboard. In this lecture I have implemented the old version. And you can see the updated version implementation in the next lecture. :)

Also the code on github uses the updated version.
Connect Wallets ( UPDATE )28:17
Update your dApp with Block native's open source wallet library to support multiple wallets, accounts, and multi-chain networks via onboard core and onboard React.

Setup Hardhat & Etherscan13:20
Build the backend for a full-stack minting dapp using Hardhat, Etherscan verification, and an Alchemy key, configuring networks, environment variables, private keys, and deployment scripts.
BoredApe Smart Contract Walkthrough & Compile22:50
Build a solidity NFT contract using zeppelin templates, enable pre-sale and public sale with a merkle-tree whitelist and a payment splitter.
BoredApe Smart Contract Deployment10:40
Deploy a borrowed NFT contract to the Kibby testnet using a merkle tree whitelist, configure proxy registry and contract parameters, and verify the contract on Etherscan after deployment.
BoredApe Smart Contract Verify7:03
Verify a deployed NFT contract on Etherscan using a dedicated verify script, configure constructor arguments, proxy and registry details, and review payment splitter data, pre-sale and public sale setup.
BoredApe Contract Interaction Methods26:15
Learn to build frontend interactions for an NFT minting contract. Deploy on the Rinkeby test network, fetch total and max supply, and support presale and public sale with price handling.
Presale Minting & Reveal Process24:43
Explore the pre-sale minting flow, including wallet connection, Merkle proof whitelist verification, and NFT reveal, plus transaction setup and transitioning to public sale.
Public Minting & Payment9:07
Learn to implement public minting in an NFT contract by converting pre-sale to public sale, handling mint limits, payments with a payment splitter, and whitelist checks.
YOU HAVE DONE IT!1:54
You completed the NFT minting project, learning to create 10000 NFT images with metadata on IPFS, build an NFT contract and frontend to mint, including pre-sale on the Drinky testnet.

Requirements

Basic programming skills for JavaScript and Reactjs

Description

Join the most comprehensive NFT Minting Website course and learn how to build a minting website for your next collection!

Web3 is getting more popular everyday. Its really time to get your hands dirty with building some awesome dapps! In this course you will learn lots of information about NFTs, smart contract the web3 frontend and the backend environment technologies. We together are going to create a nft minting dapp website which will allow visitors to mint from your awesome collection. And along the way I will show you how to handle all these ( Public Minting, Presale Minting, Pausing, Revealing ) processes. As we progress you will get to the point that next time you will be able to create your own minting website!

The tech I used in this course:

Frontend:

Nextjs
Reactjs
Tailwindcss
Web3.js

Backend:

Hardhat
Alchemy

Here's what's included in the course:

We will generate 10.000 NFT Images & Metadata
Create Hidden NFT Image & Metadata
Upload your images & metadata on IPFS Servers
Connect Wallet ( Metamask and more wallet options )
Write a secure Nft Smart Contract
Whitelist Sale
Public Sale
Revealing NFTs ( They will be question marks first )
Create frontend using NextJS & Tailwindcss
Deploy Smart Contract
Verify Smart Contract
Interact Methods for Smart Contract
Create whitelist accounts
Whitelist Verify Process using MerkleProof
Payment withdraw for your team!
And more!

This course is for you if ...

You're interested in building web3 apps
You want to explore how to create a minting website

Course prerequisites:

Basic programming language knowledge will help a lot but is not a hard requirement
You DON'T need to know Solidity

I can't wait to see you in the next lesson! :)

Who this course is for:

If you want to learn about NFTs, web3 and Smart contract this course is a good fit!

The Fullstack Nft Minting Website Course

What you'll learn

Explore related topics

Course content

THE ART4 lectures • 27min

FRONTEND8 lectures • 2hr 12min

BACKEND + SMART CONTRACT8 lectures • 1hr 56min

DEPLOYMENT1 lecture • 8min

Requirements

Description

Who this course is for: