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

Initialize your Next.js project after installing Node.js, run create next app in a project folder, install dependencies, then launch on localhost 3000, using VS Code with recommended extensions.

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.

Learn to build a navbar for an NFT marketplace by installing headless ui and hero icons, creating a navbar component and index, and wiring public images in a react/next.js project.

Create a base layout component that wraps all pages, providing styling, padding, and a navigation bar, and define its props to accept children in TypeScript.

Create and integrate NFT metadata for the listing page by structuring a content folder, adding a meta.json, and preparing to render JSON data on the homepage from pinata.

Create nft item and nft list components, organize them in a dedicated folder with index tsx files, export them, and integrate into the home page nft listing.

Learn how to iterate NFT metadata from content, pass it as props to an NFT list, and render NFT items with unique keys in a React/Next.js setup.

Define TypeScript NFT data types with metadata including description, image, name, and an attributes array where each trait_type is attack, health, or speed, plus a string value.

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.

Create an NFT create page in the marketplace using Next.js, set up create.tsx, enable Next.js link navigation, and fix profile menu issues by tweaking next.config and transitions.

Create a profile page in a Next.js React app by duplicating the create page, defining the /profile route, and wiring a profile link in the navigation with a profile dropdown.

Finish the profile layout, copy-paste the active link component from resources, and wire the create and profile pages to reflect the current page in the NFT marketplace app.

Create the NFT marketplace create page by wiring a provided form, with inputs for name, description, image, and JSON metadata, plus price. The lecture covers browser preview and setup.

Copy and integrate the profile page from GitHub into profile.tsx, fix NFT metadata types, and display all owned NFTs with a left list and a right details panel showing 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.

Build a Web3 state by abstracting an Ethereum provider and contract, using MetaMask providers and ethers to connect a React app to your Solidity contract.

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.

Initialize a Metamask provider in the browser, access the Ethereum wallet, and fetch accounts to interact with the network and wallet data.

Install Ganache as a private blockchain to test Ethereum smart contracts, verify the setup, and initialize Truffle to manage contracts, migrations, and a Ganache workspace.

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.

Extend an OpenZeppelin ERC721 contract to build an NFT market, implement token IDs and metadata, and test deployment with truffle and ganache.

Use the truffle console to deploy and interact with your NFT market smart contract, call name and symbol from the contract, and obtain a contract instance for blockchain calls.

Load the contract by representing the smart contract in a Next.js app, using a provider and network id to instantiate it from its artifact and expose its functions.

Load the contract, fetch its name and symbol via the contract API, and debug the data in the browser console while connecting to ganache with metamask.

Develop a use account hook using svr to fetch the current wallet address and contract info from the connected account, and display it in the nav bar.

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.

Define and export account hook types, create a hook factory, and implement a setup hooks routine to initialize use account hook with the Ethereum provider in a web three context.

Create a reusable web3 state by building a default state object from an Ethereum provider and contract, including a loading boolean, so setup hooks can supply parameters.

Streamline web3 integration by exporting a refined use account hook through an index file, wiring providers (metamask) to retrieve the account from the browser vault.

Explore how the app initializes default state, loads the ethereum provider and contract, and wires up hooks and account data to drive the NFT marketplace interface.

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.

Fetch wallet account data by calling the provider to get accounts and return the first address as the connected account, with error handling if not connected.

Update the navigation bar to reflect wallet connection by showing a connect button and user avatar, retrieve the account with MetaMask, and conditionally render the menu when connected.

Define a typed connect function in the account hook, configure the crypto factory with generic data, and ensure the connect function returns void.

Implement account-change handling with the useAccount hook and an effect to react to metamask accounts changed, subscribing to changes and logging the new account.

Explore mutating account data in real time with swr's mutate function, update the hook data and UI, and understand revalidation as changes propagate.

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.

Learn to handle missing wallets in an NFT marketplace built with React and Next.js by wrapping wallet calls in a try/catch and guiding users to install or connect MetaMask.

Build a wallet bar component in React that handles initialization errors and conditionally renders metamask status as a button or user profile, with loading, installed, account data, and connect props.

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.

Explore building a use network hook to track the connected metamask wallet and current network, integrate it with the navbar, and test network responses in the NFT marketplace app.

Extract the chain ID and network name from the provider to display the actual network, and map chain IDs to readable names like Ganache or Ethereum.

Display the connected network name next to the avatar by wiring a network label to the Metamask connection, using the provided code and preparing for the loading state.

Set and verify the target network by retrieving the chain id from environment variables. Display whether the connected network matches the target and indicate support status.

Display a loading indicator during network and account loading, then show the connected network data if MetaMask is installed; otherwise prompt to install a wallet and warn on wrong networks.

Handle network changes by using the use account hook, tweaking swr config to avoid revalidation on error, and implementing a chain changed event that reloads the browser for proper state.

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.

mint token in the nft marketplace by implementing a payable smart contract function that mints a new token and increments the token id using OpenZeppelin counters.

Explore minting an NFT by linking metadata to a token id via pinata, updating balances, and recording ownership in a solidity smart contract.

Prepare and run a truffle-based test for the NFT market contract, creating test files, deploying the contract, and validating a token function using artifacts and accounts.

Mint a token by calling the contract's mint token function, test the first token's owner is account zero, and validate token ID mappings and token uri metadata with truffle tests.

Write a test to verify that the first minted token's ID maps to the correct token URI in an ERC-721 contract, with console.log debugging for value inspection.

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.

Define an NFT item struct, mapping token ids to items, enforce a price greater than zero, and emit a creation event in the NFT market contract for frontend consumption.

Set and test listing price for NFTs in the marketplace, retrieve items by token id, and count listed items while validating price formatting with the ether library.

Refactor the smart contract by ordering public and private functions, then set up and run truffle tests to verify NFT item retrieval, including token ID, price, creator, and listing status.

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.