CF

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

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

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

Related courses

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Prospective students should have a foundational understanding of JavaScript and familiarity with React. Knowledge of basic blockchain concepts and Ethereum is recommended, as the course involves interacting with Ethereum's blockchain using Solidity and Web3 JS.
What will I build by the end of the course?
By the end of the course, you will have developed a fully functional decentralized NFT marketplace. This includes implementing ERC721 smart contracts, using React and Next.js for the frontend, and leveraging IPFS for distributed file storage.
Who is the target audience for this course?
This course is designed for developers interested in decentralized applications, blockchain technology, and NFTs. It is suitable for those looking to enhance their skills in React, Solidity, and smart contract development.
How does this course compare to other blockchain courses?
This course focuses specifically on building a decentralized NFT marketplace using the ERC721 standard. It provides hands-on experience with React, Solidity, and Ethereum, offering a practical approach to understanding NFTs and smart contracts, which may differ from other courses with broader blockchain topics.
What tools and platforms will I use in this course?
You will use Next.js for building the frontend with React, Solidity for writing smart contracts, and Web3 JS for blockchain communication. The course also covers Pinata and IPFS for decentralized file storage and Ethereum for deploying smart contracts.
What topics are not covered in this course?
The course does not cover other blockchain platforms outside of Ethereum or NFT standards other than ERC721. It also does not delve into non-technical aspects of NFTs, such as market trends or legal considerations.
What is the expected time commitment for this course?
The course consists of 132 lessons. While the exact runtime is not specified, students should anticipate dedicating a significant amount of time to complete the lessons, particularly if they are new to blockchain or the specific technologies used.