CourseFlix

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

Course content

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

Related courses

  • Full-Stack Fundamentals 1 - Frontend thumbnail

    Full-Stack Fundamentals 1 - Frontend

    Sources: Mckay Wrigley
    As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
    1 hour 8 minutes 57 seconds
  • Build an Image Filters App with Vue, TypeScript and WebAssembly thumbnail

    Build an Image Filters App with Vue, TypeScript and WebAssembly

    Sources: Zero To Mastery
    With this project you'll build "Vue Filters", an image filter application built with Vue that allows you to bring the experience of applying Photoshop filters t
    1 hour 44 minutes 19 seconds
  • SOLID React Book thumbnail

    SOLID React Book

    Sources: Islem Maboud
    Learn how to apply the principles of SOLID in React to create clean and high-quality code. Enhance your programming skills with the book SOLID React.
    5 / 5

Frequently asked questions

What is NFT Marketplace in React, Typescript & Solidity - Full Guide about?
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…
Who teaches NFT Marketplace in React, Typescript & Solidity - Full Guide?
NFT Marketplace in React, Typescript & Solidity - Full Guide is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is NFT Marketplace in React, Typescript & Solidity - Full Guide?
NFT Marketplace in React, Typescript & Solidity - Full Guide contains 132 lessons with a total runtime of 16 hours 20 minutes. All lessons are available to watch online at your own pace.
Is NFT Marketplace in React, Typescript & Solidity - Full Guide free to watch?
NFT Marketplace in React, Typescript & Solidity - Full Guide is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch NFT Marketplace in React, Typescript & Solidity - Full Guide online?
NFT Marketplace in React, Typescript & Solidity - Full Guide is available to watch online on CourseFlix at https://courseflix.net/course/nft-marketplace-in-react-typescript-solidity-full-guide. The page hosts every lesson with the integrated video player; no download is required.