181
Lectures
21
Hours

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 at a later stage.


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.

Requirements

  • Base knowledge of React JS and Solidity

  • Familiarity with Blockchain

Course curriculum

  • 2

    Setting Environment

    • Init Project

    • Tailwind

    • Navbar

    • Cleanup

    • BaseLayout

  • 3

    NFT Components

  • 4

    Pages and Layouts

    • Links and create page

    • Profile Link

    • Active Link

    • Create Page Layout

    • Profile Layout

    • Paths refactor

  • 5

    Web3 Provider

  • 6

    Ganache & Truffle

    • Ganache Install

    • Base smart contract

    • ERC721

    • Truffle Console

    • Load Contract

    • Call name, symbol

  • 7

    Web3 Hooks

    • Use Account

    • Hook Types

    • Generic Types

    • Setup Hooks

    • Create web3 state

    • Use Account Abstraction

    • Recap

  • 8

    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

  • 9

    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

  • 10

    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

    • Get NFT Item

    • NFT item test

    • Listing price

  • 11

    Buy NFT

    • Buy NFT

    • Buy NFT test

  • 12

    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

  • 13

    Add token to owned enumeration

    • Add token to owner enums

    • AI add token to owner enums

    • Get owned Nfts

    • Test owned Nfts

  • 14

    Remove token from owned enums

    • Remove token from owned enums

    • AI Remove token from owned enums

    • Test Remove token from owned enums

  • 15

    Remove token from all enums

    • Remove token from all enums

    • AI Remove token from all enums

    • Test Burn token

  • 16

    Place NFT on sale

    • Place nft on sale

    • Test listing of nfts

  • 17

    Use Listed Nfts

    • Use listed Nfts

    • Upload Images to Pinata

    • Mint Token in Truffle

  • 18

    Get NFT Data

    • Get Nft Data

    • Contract Type

    • Get Complete Nfts

    • Display Nfts

    • Sign Contract

  • 19

    Get Owned NFTs

    • Use owned nfts

    • Active Nft

    • Set Active Nft

  • 20

    Purchase NFT

    • Buy NFT in Hook

    • List Nft

    • UI changes active nft

    • Use Callback

  • 21

    Handle NFT Form

    • Handle part of form

    • Handle attribute change

    • Introduce Verification architecture

    • With iron session

    • Network type

    • Create message in server

    • Fix reload of the browser

  • 22

    Verify Address

    • Sign message

    • Verify form data

    • Get session back

    • Get contract server side

    • Verify Signature

  • 23

    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

  • 24

    Create a NFT

    • Check Nft Structure

    • Get Price

    • Create a Nft

    • Pinata Image Issues

  • 25

    Last Improvements

    • Handle promises

    • Handle rest of promises

    • Display wrong network

    • Last Lecture

  • 26

    Bonus: Deployment

    • Cors issues fix

    • UI Improvements

    • Sepolia configuration

    • Migration to Sepolia

    • Testing on Sepolia localy

    • Get code to Github

    • Deployment to Vercel

    • Course Finished

  • 27

    Bonus: Adopt Pet (Hardhat & Polygon)

    • Init Proj

    • First Test

    • Ignore more files

    • First real test

    • Get owner function

    • Fixtures

    • Add pet and test

    • Initial value to constructor

    • Adopt pet function

    • Out of bounds test

    • Pet is already adopted test

    • Test adopt pet success

    • Console logs

    • Test new getters

    • Test for zero address

    • Create react app

    • Base layout

    • Seperate code to components

    • Get all pets and set them

    • Display pets as pet item

    • Wallet not detected

    • Connect wallet

    • Connect wallet function

    • Check network

    • Add env variable

    • Switch network

    • Handle account changes

    • Deployment of SC

    • Save artifacts

    • Init contract preparation

    • Init contract

    • Get adopted pets

    • Adopt pet functionality

    • Handle tx error

    • Disable button

    • Tx info

    • In Progress

    • Set View

    • Display pets depending on view

    • Display owned pets

    • Polygon Mumbai

    • Deploy to Polygon

    • Testing on Mumbai

Instructor(s)

Software Engineer

Filip Jerga

My name is Filip Jerga and I am an experienced software engineer and freelance developer. I have a Master's degree in Artificial Intelligence and several years of experience working on a wide range of technologies and projects from C++ development for ultrasound devices to modern mobile and web applications in React and Angular. Throughout my career, I have acquired advanced technical knowledge and the ability to explain programming topics clearly and in detail to a broad audience. I invite you to take my course, where I have put a lot of effort to explain web and software engineering concepts in a detailed, hands-on and understandable way.

FAQ

  • How to get help when I am stuck with the course?

    Every video contains a discussion where you can create a post describing an issue. The instructor usually responds within one business day.

  • What to do when I am unhappy with the course ?

    Within 30 days of the purchase, you can ask for a full refund. No questions asked. Your happiness is our priority.

  • Do I need to watch every lecture of such a really extensive course

    Of course not! Every lecture is committed (explained in the introduction section). You can start watching at any lecture. Just download the correct version of the project attached to lecture resources.

Eincode Access Options

  • Single Course Access

    • Lifetime and unlimited Access to "NFT Marketplace in React/Next & Solidity - Full Guide (2023)"

    $29.00

    Access to this course only.

    Get started now
  • Monthly Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $19.00 / month

    Cancel Anytime!

    Get started now
  • Annual Membership

    • Unlimited Access!
    • Access to any current course!
    • Access to future courses!

    $190.00 / year

    Cancel Anytime!

    Get started now