NFT Marketplace in React, Typescript & Solidity - Full Guide
Learn how to use React / Next JS, Solidity, and Pinata(IPFS) to create NFT marketplace on Ethereum. All In Typescript.
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.
What is this course covering?
The course covers everything you need for a decentralized NFT application according to the ERC721 standard. Students of this course will learn about NFTs by creating a real-world application.
Students will learn what ERC721 smart contract is and how to create one.
The frontend for dApps covered in the course is created with React JS library and Next JS framework. CSS and design are built with the Tailwind framework.
NFT Marketplace Application:
This central part of the course covers the creation of an interactive NFT marketplace. Clients of this platform will be able to purchase NFTs with Ether digital currency.
The application is created in the Next JS framework, built on top of the React JS.
The first part of the course covers the setup of the pages layouts, creation of the first pages, and components. The Tailwind CSS framework covers the styling part of the application.
Students will explore how to provide Web3 JS code into the application, code responsible for communication with a crypto wallet and, therefore, with the blockchain.
We will use the Provider/Consumer concept to provide this layer, which is very common in React JS. This will guarantee that all of the components and pages will be able to access functionalities responsible for communication to the blockchain.
The application's state and data management are handled through the SWR(stale while revalidate) library. This will provide a reactive feel to the application and a reactive rendering of components upon receiving new data.
After all, necessary communication with blockchain is achieved, the students will start to work on smart contract implementation.
The course follows the recognized ERC721 token standard.
The smart contract is an essential part of the project. It serves as the blockchain "storage" of NFTs and provides functionality to verify ownership of an NFT and linkage to the media storage.
The last part of the course covers preparing and storing data related to NFT. So-called NFT Metadata.
NFT metadata data will be stored on Pinata (IPFS) based storage. Students will learn to gather data from the form and later submit them to the Pinata storage. The following important part is to link this metadata and create an NFT.
The most mentionable topics covered in this application are:
Next js Integration with Web3 and Blockchain
Reactivity with Hooks and SWR
Creation of NFT(ERC721) Smart Contract
NFT data manipulation and storage on Pinata
Typescript
Base knowledge of React JS
Base knowledge of Solidity
Familiarity with Blockchain tech
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
Handle promises
Handle rest of promises
Display wrong network
Last Lecture
Ethereum network changes
Ropsten Preparation
Deploy to Ropsten
Testing app on Ropsten
Github Repo
Deploy to Vercel
404 - Image upload to Pinata
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