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.

4.70 (83 reviews)
Udemy
platform
English
language
Web Development
category
1,038
students
16.5 hours
content
May 2022
last update
$84.99
regular price

What you will learn

Create a true NFT marketplace!

Understand complex topics in practical and fun way

Get complete toolkit to work with any Blockchain

Develop a real app on the Blockchain

Description

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 it to 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

Screenshots

NFT Marketplace in React, Typescript & Solidity - Full Guide - Screenshot_01NFT Marketplace in React, Typescript & Solidity - Full Guide - Screenshot_02NFT Marketplace in React, Typescript & Solidity - Full Guide - Screenshot_03NFT Marketplace in React, Typescript & Solidity - Full Guide - Screenshot_04

Content

Introduction

Introduction
Ask For Help
How to resolve issues

Setting Environment

Init Project
Tailwind
Navbar
Cleanup
BaseLayout

NFT Components

Listing Page
Nft Components
Nft props
Nft Type
Display nft item values

Pages and Layouts

Links and create page
Profile Link
Active Link
Create Page Layout
Profile Layout
Paths refactor

Web3 Provider

Web3Provider
Planning
Web3 Types
Web3 State
Window Ethereum
Provider

Ganache & Truffle

Ganache Install
Base smart contract
ERC721
Truffle Console
Load Contract
Call name, symbol

Web3 Hooks

Use Account
Hook Types
Generic Types
Setup Hooks
Create web3 state
Use Account Abstraction
Recap

Account Hook

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

Network Hook

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 - Smart Contract

Mint Token
AI Mint Token
Prepare test
Mint token test
TokenURI test
Check if token uri exists
Duplicate URI Test
Create NFT item
Listing Price Test
NFT item test
Listing price

Buy NFT

Buy NFT
Buy NFT test

Add Token to All Enumeration

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 owned enumeration

Add token to owner enums
AI add token to owner enums
Get owned Nfts
Test owned Nfts

Remove token from owned enums

Remove token from owned enums
AI Remove token from owned enums
Test Remove token from owned enums

Remove token from all enums

Remove token from all enums
AI Remove token from all enums
Test Burn token

Place NFT on sale

Place nft on sale
Test listing of nfts

Use Listed NFTs

Use listed Nfts
Upload Images to Pinata
Mint Token in Truffle

Get NFT Data

Get Nft Data
Contract Type
Get Complete Nfts
Display Nfts
Sign Contract

Get Owned NFTs

Use owned nfts
Active Nft
Set Active Nft

Purchase NFT

Buy Nft in Hook
List Nft
UI changes active nft
Use Callback

Handle NFT Form

Handle part of form
Handle attribute change
Introduce Verification architecture
With iron session
Create message in server
Fix reload of the browser

Verify Address

Sign message
Verify form data
Get session back
Get contract server side
Verify Signature

Upload Image

Upload Metadata to Pinata
Get image bytes
Get signed data
Image upload endpoint
Fix image select issue
Upload image success
Store image to state

Create a NFT

Check Nft Structure
Get Price
Create a Nft

Last Improvements

Handle promises
Handle rest of promises
Display wrong network
Course Done!

Bonus: Deployment

Ropsten preparation
Deploy to Ropsten
Testing app on Ropsten
Github Repo
Deploy to Vercel

Reviews

Tadej
June 18, 2022
I have previously completed instructor's Solidity course and decided to go through this one as well. The content quality is way better than in his first Solidity course, everything is explained quite well. I feel way more comfortable using Solidity now. Using tailwind, NextJS and typescript in the project is a big bonus. I recommend this course to everyone who has basic understanding on how React and Solidity work.
Diego
June 16, 2022
The lessons are very well explained, and even if you have no experience, it is a very good course, Filip answers all your questions and supports you with personal concerns to develop a more solid project.
Maélis
May 24, 2022
This course is very complete, the teacher explains in a simple, effective and passionate way! The teacher also answers all questions in record time! I haven't seen a better up-to-date course on marketplaces!
Uduak
May 20, 2022
It's one of the best NFT courses I have come across, simply the best. In learning the whole blockchain concepts on NFTs I have become very confident with my react skills. And very importantly always provides me with detailed explanations when I am stuck and prompt in responding to questions. 5 Star rating for me.
Diaminity
May 3, 2022
This time more advanced course from Filip. I like straightforward explanations and practical features built into the course.
Jess
May 1, 2022
If you are looking for a course to understand the concepts behind NFTs then this is the right one for you. I am enjoying it a lot! Well done!

Charts

Price

NFT Marketplace in React, Typescript & Solidity - Full Guide - Price chart

Rating

NFT Marketplace in React, Typescript & Solidity - Full Guide - Ratings chart

Enrollment distribution

NFT Marketplace in React, Typescript & Solidity - Full Guide - Distribution chart
4634138
udemy ID
4/9/2022
course created date
5/10/2022
course indexed date
Bot
course submited by