NFT Marketplace - React, Next.js & Solidity Guide (2023)

Build Web3 NFT Marketplace on Ethereum using React/Next, Solidity, and Pinata (IPFS), with Typescript. Covers Polygon.

3.65 (219 reviews)
Udemy
platform
English
language
Web Development
category
2,441
students
22.5 hours
content
Nov 2023
last update
$84.99
regular price

What you will learn

Build an authentic 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

What is this course covering?


NFT Marketplace: This application will guide you through the complete development process of an NFT marketplace. It covers various topics, including NFT development and uploading images/files to the Pinata IPFS network.

Adopt Pet: As a bonus section focusing on React JS, this section utilizes Hardhat for smart contract management and deployment to the Polygon network.


This course covers the essentials for developing a decentralized NFT application based on the ERC721 standard. Students will gain practical knowledge by creating a real-world NFT application.

The course guides students in understanding ERC721 smart contracts and provides hands-on experience in their creation.

For the development of dApps covered in the course, the front end is built using the React JS library and the Next JS framework. CSS and design aspects are implemented using the Tailwind framework


As an additional component, the course includes a bonus section dedicated to developing a pet adoption application. This application will be created using React JS and Hardhat for managing and deploying smart contracts. The final product will be deployed to the Polygon blockchain later.


NFT Marketplace Application:
This course teaches the creation of an interactive NFT marketplace where clients can purchase NFTs using Ether. The application is built with Next JS and React JS, utilizing the Tailwind CSS framework for styling. Students will learn to integrate Web3 JS code for blockchain communication and use the Provider/Consumer concept for accessibility across components. The course also covers implementing smart contracts following the ERC721 token standard.

Additionally, students will explore data management using the SWR library and learn to store NFT metadata on Pinata (IPFS) storage. They will gather and submit data from forms, establishing the crucial link between metadata and NFT creation. The course provides comprehensive guidance on building an NFT marketplace, from setup to smart contract implementation and data handling.


The most mentionable topics covered in this application are:

  • Integration of Next JS with Web3 and the blockchain

  • Achieving reactivity using Hooks and SWR

  • Creation of an NFT (ERC721) smart contract

  • Manipulation and storage of NFT data on Pinata

  • Utilization of Typescript for development


Adopt Pet Application:

As an additional component, this section consolidates the knowledge you have acquired in the course and applies it to a React JS app. Hardhat is utilized for smart contract management, ensuring a clean and straightforward application architecture.

The emphasis is on minimal design and simplicity. By the end of this section, you will have the opportunity to deploy a smart contract to the Polygon blockchain.


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.

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

Screenshots

NFT Marketplace - React, Next.js & Solidity Guide (2023) - Screenshot_01NFT Marketplace - React, Next.js & Solidity Guide (2023) - Screenshot_02NFT Marketplace - React, Next.js & Solidity Guide (2023) - Screenshot_03NFT Marketplace - React, Next.js & Solidity Guide (2023) - Screenshot_04

Reviews

Algo
April 12, 2023
please also create full nft marketplace with list items on marketplace, cancel listing, edit price, create auction, cancel auction, announc winner after auction is ended in nft marketplace contract
Damien
February 10, 2023
I am not sure you would find something as comprehensive as this elsewhere. It is an excellent course. The code is sometimes challenging, especially considering that he is combining different areas of technology - Typescript, web3, Truffle and Solidity. However, I feel that I am really getting a handle on how it all hangs together. I would definitely recommend this course if you want to get to grips with NFT development.
Fazanna
November 4, 2022
Filip has done a wonderful job teaching his students, in great detail - NFTs, React and Typescript development. His passion for the subject is second to none and he delivers the course in an knowledgeable manner, I particularly enjoyed the Additional Information (AI) which gave EXTRA INSIGHT to build a strong solid foundation in Solidity programming!... Furthermore Filip has also updated this course to take into account changes on the Ethereum network. Please do yourself a big favor and buy Solidity & Ethereum in React (Next JS): The Complete Guide with this course... AND you will be a BLOCKBUSTER A+ blockchain developer. One of the best courses on Udemy Period! THANK YOU Filip!
M
October 29, 2022
Great and detailed, from start to end. Some parts are deprecated, but everything solvable. Thank you very much!
Robert
October 17, 2022
The best course I've ever done on here. So thorough, interesting and well explained. The best instructor I have seen on here too. He has put so much work into this.
Konrad
October 11, 2022
After watching two courses of Filip about solidity and react, I would love to see third one. He is very good and talented teacher. I am sure, I buy more his courses.
Hunter
October 5, 2022
The instructor does a good job at showing how to organize a project and many of the things that ethers.js can do. This course will teach you everything you will need to know if you want to create a front end for your smart contract. You will also learn a very good way of how to create react hooks and react context. Before taking this course I would strongly recommend knowing React and the basics of Solidity (knowing Nextjs would also help but you would still understand mostly everything). I also did not know how to use typescript at all before the course but now I have a very basic understanding of it.
Deepanshu
September 22, 2022
The course is great for beginners. But I think before starting it you need to have some knowledge about React and Typescript framework. Thank you
José
September 20, 2022
Very good content, I hope you continue to help me when we have finished the market because I would like to do a couple more things like collections, for example
Andy
September 16, 2022
Filip is an outstanding personality! Extremely knowledgeable and passionate about what he teaches. Probably the smartest guy around when it comes to the subjects he teaches...
John
August 11, 2022
Many great things to say but the key one is 1. All the code worked and was able to finish the entire class with code successfully working (must read QA for some issues). Most blockchain classes I have taken break and unable to finish labs successfully. I AM HAPPY, EXCITED AND FEEL THAT LEARNED ALOT. 2. Filip, explained things well esp the Additional Infor modules.
Shokworks
August 1, 2022
This course was excellent, I've learned many things about web3 development and good practices for Next.js/React projects. Filip teaches perfectly in every class and you can follow every process step. Important reflection: I highly recommend that you have a basic knowledge of web3 because there are many concepts that can't be covered at all and can be difficult to understand.
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.
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.

Charts

Price

NFT Marketplace - React, Next.js & Solidity Guide (2023) - Price chart

Rating

NFT Marketplace - React, Next.js & Solidity Guide (2023) - Ratings chart

Enrollment distribution

NFT Marketplace - React, Next.js & Solidity Guide (2023) - Distribution chart
4634138
udemy ID
4/9/2022
course created date
5/10/2022
course indexed date
Bot
course submited by