
Set up a Next.js project with Tailwind by installing packages, configuring CSS, and initializing npm, then explore Tailwind utilities like font-bold and text-3xl to build a hello world page.
Display NFT item values by rendering NFT item data, including image, name, description, and dynamic attributes, on the listing page using a typed NFT item component and map over attributes.
refactor the project structure by creating providers and hooks folders, reorganizing UI components under a UI subfolder, and updating path aliases while verifying imports and browser functionality.
Create a Web3 provider using React context to supply blockchain data and a Web3 API to all children, then wrap pages with the provider.
Plan the NFT marketplace app built with Next.js and Solidity, detailing the project structure, smart contract storage on the blockchain, and metadata linked via Pinata to token IDs and owners.
Set up Web3 state by creating a default state with etherium provider and contract, initialize values to null, and wire them into a context for loading status and reactivity.
Learn to access ethereum through window.ethereum in the browser, install metamask, and initialize a web3 provider, handling loading state and preparing the provider for smart contracts.
Explore base smart contract setup for an NFT marketplace using truffle and ganache, configure development network, migrate and compile NFT market contract, and manage artifacts in public/contract.
Define a crypto hook factory in TypeScript to initialize the use account hook with Ethereum provider, contract, and page provider, using typed handlers and partial dependencies for flexible initialization.
Explore generic types in a crypto hook factory, defining data and parameter generics to produce typed hook responses and reusable exportable parts.
Explore conditional data fetching in a web3 react app using SWR to fetch the current account from a provider, handling optional parameters and undefined providers until a test user appears.
Refine the account data flow by wiring new responses into the UI, display the profile picture when Metamask is connected, and manage loading, installed, and validating states.
Implement wallet conditionals in a react/tsx app to display loading states, account data, and menus based on wallet installation and connection status, including MetaMask and public connect.
Detect Metamask lock out and respond by purging and reloading the page when unlocked state changes; implement an isUnlocked check and account change handlers to maintain session reliability.
Fix loading and undefined ethereum by updating the account hook to handle undefined provider and avoid flashing during page transitions, using boolean casting and optional chaining in metamask-enabled marketplace.
Check token uri existence with a mapping from token uris to booleans, preventing duplicates; expose public view function returning bool so minting occurs only if it does not exist.
Explore testing a duplicate uri scenario in an nft marketplace, verifying that minting a token with an already used token id fails, and implementing robust tests with Truffle assertions.
Add a required listing price to the NFT minting flow, validate the transaction's message value against the listing price, and use truffle tests to ensure correct pricing.
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.
Solana NFT Minting App: This bonus section teaches you to build an NFT minting application on Solana using React, TypeScript, and the Metaplex Umi framework. You'll integrate Solana wallet adapters, create NFT metadata, and mint tokens on the Solana devnet.
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.
Solana NFT Minting App (Bonus Section):
This bonus section introduces you to building NFT applications on the Solana blockchain. You'll create a React-based minting app using TypeScript and the Metaplex Umi framework, allowing users to connect their Solana wallet, upload artwork, and mint NFTs directly on the Solana devnet.
Key topics covered:
Integrating Solana wallet adapters with React
Building NFT minting workflows using Metaplex Umi SDK
Creating NFT metadata following Solana standards
Handling blockchain transactions and wallet signatures
Working with decentralized storage for NFT assets
By completing this section, you'll expand your Web3 development skills beyond Ethereum and gain practical experience with the high-performance Solana ecosystem. This broadens your ability to build NFT applications across multiple blockchain platforms.