NFT Marketplace in React/Next & Solidity - Full Guide (2023)
Build Web3 NFT Marketplace on Ethereum using React/Next, Solidity, and Pinata (IPFS), with Typescript. Covers Polygon.
What is this course covering?
NFT Marketplace: This application will guide you through the complete development process of an NFT marketplace. It covers various topics, including NFT development and uploading images/files to the Pinata IPFS network.
Adopt Pet: As a bonus section focusing on React JS, this section utilizes Hardhat for smart contract management and deployment to the Polygon network.
This course covers the essentials for developing a decentralized NFT application based on the ERC721 standard. Students will gain practical knowledge by creating a real-world NFT application.
The course guides students in understanding ERC721 smart contracts and provides hands-on experience in their creation.
For the development of dApps covered in the course, the front end is built using the React JS library and the Next JS framework. CSS and design aspects are implemented using the Tailwind framework.
As an additional component, the course includes a bonus section dedicated to developing a pet adoption application. This application will be created using React JS and Hardhat for managing and deploying smart contracts. The final product will be deployed to the Polygon blockchain at a later stage.
NFT Marketplace Application:
This course teaches the creation of an interactive NFT marketplace where clients can purchase NFTs using Ether. The application is built with Next JS and React JS, utilizing the Tailwind CSS framework for styling. Students will learn to integrate Web3 JS code for blockchain communication and use the Provider/Consumer concept for accessibility across components. The course also covers implementing smart contracts following the ERC721 token standard.
Additionally, students will explore data management using the SWR library and learn to store NFT metadata on Pinata (IPFS) storage. They will gather and submit data from forms, establishing the crucial link between metadata and NFT creation. The course provides comprehensive guidance on building an NFT marketplace, from setup to smart contract implementation and data handling.
The most mentionable topics covered in this application are:
Integration of Next JS with Web3 and the blockchain
Achieving reactivity using Hooks and SWR
Creation of an NFT (ERC721) smart contract
Manipulation and storage of NFT data on Pinata
Utilization of Typescript for development
Adopt Pet Application:
As an additional component, this section consolidates the knowledge you have acquired in the course and applies it to a React JS app. Hardhat is utilized for smart contract management, ensuring a clean and straightforward application architecture.
The emphasis is on minimal design and simplicity. By the end of this section, you will have the opportunity to deploy a smart contract to the Polygon blockchain.
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, etc. No config is necessary.
Ethereum is a technology that lets you send cryptocurrency to anyone, but in the first place, It also powers applications that everyone can use and no one can takedown. It's the world's programmable blockchain.
Solidity is an object-oriented, high-level language for implementing smart contracts. Smart contracts are programs that govern the behavior of accounts within the Ethereum state.
Pinata is a pinning service that allows users to host files on the IPFS network. The InterPlanetary File System (IPFS) is a protocol and peer-to-peer network for storing and sharing data in a distributed file system.
Base knowledge of React JS and Solidity
Familiarity with Blockchain
Init Project
Tailwind
Navbar
Cleanup
BaseLayout
Listing Page
FREE PREVIEWNft Components
Nft props
Nft Type
Display nft item values
Links and create page
Profile Link
Active Link
Create Page Layout
Profile Layout
Paths refactor
Ganache Install
Base smart contract
ERC721
Truffle Console
Load Contract
Call name, symbol
Use Account
Hook Types
Generic Types
Setup Hooks
Create web3 state
Use Account Abstraction
Recap
Conditional swr
Account data
Connect button
Connect Type Definition
Handle accounts changed
Mutate account
Is loading and validating
Handle error when no wallet
Walletbar
Wallet conditionals
Use Network
Network Name
Network label
Target network
Handle Network Loading
Reload on network change
Handle Wallet Lock Out
Fix Loading and undefined Ethereum
Mint Token
AI Mint Token
Prepare test
Mint token test
TokenURI test
Check if token uri exists
Duplicate URI Test
Create NFT item
Get NFT Item
NFT item test
Listing price
Buy NFT
Buy NFT test
Add token to all enumeration
AI Add token to all enumerations
Test token transfers
Get all nfts on sale
AI get all nfts on sale
Test get all listed nfts
Add token to owner enums
AI add token to owner enums
Get owned Nfts
Test owned Nfts
Remove token from owned enums
AI Remove token from owned enums
Test Remove token from owned enums
Remove token from all enums
AI Remove token from all enums
Test Burn token
Place nft on sale
Test listing of nfts
Use listed Nfts
Upload Images to Pinata
Mint Token in Truffle
Get Nft Data
Contract Type
Get Complete Nfts
Display Nfts
Sign Contract
Use owned nfts
Active Nft
Set Active Nft
Buy NFT in Hook
List Nft
UI changes active nft
Use Callback
Handle part of form
Handle attribute change
Introduce Verification architecture
With iron session
Network type
Create message in server
Fix reload of the browser
Sign message
Verify form data
Get session back
Get contract server side
Verify Signature
Upload Metadata to Pinata
Get image bytes
Get signed data
Image upload endpoint
Fix image select issue
Upload image success
Store image to state
Check Nft Structure
Get Price
Create a Nft
Pinata Image Issues
Handle promises
Handle rest of promises
Display wrong network
Last Lecture
Cors issues fix
UI Improvements
Sepolia configuration
Migration to Sepolia
Testing on Sepolia localy
Get code to Github
Deployment to Vercel
Course Finished
Init Proj
First Test
Ignore more files
First real test
Get owner function
Fixtures
Add pet and test
Initial value to constructor
Adopt pet function
Out of bounds test
Pet is already adopted test
Test adopt pet success
Console logs
Test new getters
Test for zero address
Create react app
Base layout
Seperate code to components
Get all pets and set them
Display pets as pet item
Wallet not detected
Connect wallet
Connect wallet function
Check network
Add env variable
Switch network
Handle account changes
Deployment of SC
Save artifacts
Init contract preparation
Init contract
Get adopted pets
Adopt pet functionality
Handle tx error
Disable button
Tx info
In Progress
Set View
Display pets depending on view
Display owned pets
Polygon Mumbai
Deploy to Polygon
Testing on Mumbai
Filip Jerga
Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within one business day.
Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.
Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture. Just download the correct version of the project attached to lecture resources.
Single Course Access
$29.00
Access to this course only.
Get started nowMonthly Membership
$19.00 / month
Cancel Anytime!
Get started nowAnnual Membership
$190.00 / year
Cancel Anytime!
Get started now