NFT Marketplace in React, Typescript & Solidity - Full Guide

16h 20m 55s
English
Paid

Embark on a comprehensive journey to build a decentralized NFT application following the ERC721 standard. Through this course, students will gain invaluable insights into NFTs by developing a practical, real-world application. Delve into ERC721 smart contracts, master their creation, and harness the power of the React JS library and Next JS framework for frontend dApps. Styling hinges on the Tailwind framework.

Course Technologies Overview

Next.js: Experience unparalleled developer satisfaction with Next.js, offering hybrid static & server rendering, TypeScript support, smart bundling, and route pre-fetching—all with zero configuration.

Ethereum: A gateway not only to send cryptocurrencies but also to leverage Ethereum's programmable blockchain for robust, tamper-proof applications.

Solidity: Dive into smart contracts with Solidity, a high-level, object-oriented programming language governing Ethereum states and account behaviors.

Pinata & IPFS: Utilize Pinata for IPFS network file hosting, enabling distributed data storage and sharing.

NFT Marketplace Application Development

Interactive NFT Marketplace Creation: At the heart of the course is developing a dynamic NFT marketplace, allowing clients to trade NFTs using Ether.

Course Structure

The course begins with setting up page layouts and crafting initial pages and components using the Next JS framework atop React JS. Tailwind CSS is employed for styling.

Discover how to integrate Web3 JS, essential for blockchain communication via crypto wallets in the application.

Learn the Provider/Consumer pattern, prevalent in React JS, to ensure blockchain communication functionalities are accessible across all components and pages.

State and Data Management

Leverage the SWR (stale-while-revalidate) library for application state and data management. This ensures a responsive, dynamic user experience with component reactivity to new data.

Smart Contract Development

Gain a thorough understanding as you progress to smart contract implementation, adhering to the ERC721 token standard. The smart contract is pivotal, acting as the blockchain's "safe" for NFTs, verifying ownership, and linking media to storage.

NFT Metadata Management

The course concludes with insights into preparing and storing NFT-related data, known as NFT Metadata.

Store NFT metadata on Pinata's IPFS-based storage. Learn how to collect data through forms and submit it to Pinata storage, culminating in linking this metadata to create and authenticate an NFT.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 132 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 132 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (132)
#Lesson TitleDurationAccess
1
Introduction Demo
06:22
2
Ask For Help
00:35
3
How to resolve issues
05:52
4
Init Project
05:32
5
Tailwind
05:19
6
Navbar
08:34
7
Cleanup
02:00
8
BaseLayout
07:53
9
Listing Page
06:52
10
Nft Components
09:51
11
Nft props
06:05
12
Nft Type
05:37
13
Display nft item values
06:29
14
Links and create page
09:51
15
Profile Link
02:43
16
Active Link
05:34
17
Create Page Layout
06:39
18
Profile Layout
03:54
19
Paths refactor
08:24
20
Web3Provider
09:54
21
Planning
13:12
22
Web3 Types
05:21
23
Web3 State
08:02
24
Window Ethereum
10:13
25
Provider
04:54
26
Ganache Install
06:48
27
Base smart contract
11:00
28
ERC721
08:51
29
Truffle Console
05:36
30
Load Contract
11:59
31
Call name, symbol
07:50
32
Use Account
09:52
33
Hook Types
08:23
34
Generic Types
08:34
35
Setup Hooks
12:05
36
Create web3 state
06:59
37
Use Account Abstraction
05:28
38
Recap
05:00
39
Conditional swr
06:32
40
Account data
09:05
41
Connect button
06:07
42
Connect Type Definition
04:02
43
Handle accounts changed
06:06
44
Mutate account
04:44
45
Is loading and validating
07:48
46
Handle error when no wallet
03:59
47
Walletbar
05:24
48
Wallet conditionals
11:18
49
Use Network
06:20
50
Network Name
05:58
51
Network label
01:36
52
Target network
06:03
53
Handle Network Loading
03:20
54
Reload on network change
09:03
55
Handle Wallet Lock Out
06:23
56
Fix Loading and undefined Ethereum
04:53
57
Mint Token
07:17
58
AI Mint Token
11:43
59
Prepare test
09:20
60
Mint token test
08:55
61
TokenURI test
06:12
62
Check if token uri exists
04:27
63
Duplicate URI Test
07:31
64
Create NFT item
09:50
65
Listing Price Test
07:53
66
NFT item test
06:11
67
Listing price
04:51
68
Buy NFT
10:29
69
Buy NFT test
07:05
70
Add token to all enumeration
09:54
71
AI Add token to all enumerations
08:01
72
Test token transfers
06:33
73
Get all nfts on sale
05:01
74
AI get all nfts on sale
09:20
75
Test get all listed nfts
06:24
76
Add token to owner enums
06:26
77
AI add token to owner enums
06:06
78
Get owned Nfts
07:55
79
Test owned Nfts
04:22
80
Remove token from owned enums
06:05
81
AI Remove token from owned enums
13:49
82
Test Remove token from owned enums
07:45
83
Remove token from all enums
04:48
84
AI Remove token from all enums
06:26
85
Test Burn token
10:14
86
Place nft on sale
09:28
87
Test listing of nfts
09:08
88
Use listed Nfts
10:56
89
Upload Images to Pinata
09:17
90
Mint Token in Truffle
08:23
91
Get Nft Data
05:04
92
Contract Type
09:31
93
Get Complete Nfts
08:04
94
Display Nfts
05:03
95
Sign Contract
04:50
96
Use owned nfts
07:31
97
Active Nft
03:51
98
Set Active Nft
05:02
99
Buy Nft in Hook
11:56
100
List Nft
08:48
101
UI changes active nft
02:46
102
Use Callback
06:43
103
Handle part of form
10:11
104
Handle attribute change
04:41
105
Introduce Verification architecture
15:46
106
With iron session
10:26
107
Create message in server
12:34
108
Fix reload of the browser
04:45
109
Sign message
08:18
110
Verify form data
07:26
111
Get session back
11:31
112
Get contract server side
07:19
113
Verify Signature
11:56
114
Upload Metadata to Pinata
14:50
115
Get image bytes
04:52
116
Get signed data
03:47
117
Image upload endpoint
11:28
118
Fix image select issue
03:29
119
Upload image success
09:27
120
Store image to state
05:38
121
Check Nft Structure
11:14
122
Get Price
03:26
123
Create a Nft
06:08
124
Handle promises
08:34
125
Handle rest of promises
04:31
126
Display wrong network
04:53
127
Course Done!
04:22
128
Ropsten preparation
08:26
129
Deploy to Ropsten
12:11
130
Testing app on Ropsten
09:11
131
Github Repo
09:15
132
Deploy to Vercel
10:18
Unlock unlimited learning

Get instant access to all 131 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription