Build a Simple React NFT Gallery in 5 Minutes

Quick, hands-on guide for developers who want to prototype an NFT gallery UI fast. This tutorial walks you through a tiny React project that simulates minting NFTs locally (no smart contract required). You’ll get the full code, file structure, step-by-step setup, and clear next steps to convert this into a real blockchain dApp later.

Why build this?

• Validate UI and UX quickly before writing smart contracts.
• Practice React state, components, and rendering lists.
• Create a portfolio piece you can show immediately.
• Easy to upgrade to connect Metamask + ethers.js later.

What you’ll build

A single-page React app with:

• A Mint NFT button that creates an NFT (id, name, random image).
• An NFT gallery that shows all minted items as cards.

Set Up Your React Development Environment

Install Node.js
Before starting, make sure you have Node.js installed.

Download from: https://nodejs.org
After installing, check:

node -v
npm -v

Create a New React Project

Open your terminal or command prompt and run:

npx create-react-app react-nft-project

This command will:

• Create a new folder called react-nft-project
• Install all default React dependencies
• Set up a ready-to-use project structure

Enter the Project Folder
cd react-nft-project

You are now inside the React project directory.

Start the Development Server
npm start

This will:
Compile your React app
Open it automatically in your browser

View Your Running App, your app will run here:http://localhost:3000

Any time you edit your code, React will auto-refresh the page.

You’re Ready to Build! 🎉

And start building your NFT components.

src/App.js

import React, { useState } from "react";

function App() {
  const [nfts, setNfts] = useState([]);

  const mintNFT = () => {
    const newNFT = {
      id: nfts.length + 1,
      name: `NFT #${nfts.length + 1}`,
      image: `https://picsum.photos/300?random=${nfts.length + 1}`
    };
    setNfts([...nfts, newNFT]);
  };

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>My NFT Gallery</h1>
      <button
        onClick={mintNFT}
        style={{
          padding: "10px 20px",
          background: "purple",
          color: "white",
          border: "none",
          borderRadius: "5px",
          cursor: "pointer"
        }}
      >
        Mint NFT
      </button>

      <div style={{ display: "flex", flexWrap: "wrap", marginTop: "20px" }}>
        {nfts.map((nft) => (
          <div
            key={nft.id}
            style={{
              width: "200px",
              padding: "10px",
              margin: "10px",
              border: "1px solid #ddd",
              borderRadius: "10px",
              textAlign: "center"
            }}
          >
            <img
              src={nft.image}
              alt={nft.name}
              style={{ width: "100%", borderRadius: "10px" }}
            />
            <h3>{nft.name}</h3>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

This create a new item with three pieces of information:

id:

It counts how many NFTs already exist and adds 1.

Example: if you have 3 NFTs, the next one will be ID = 4.

name:

It names the NFT automatically like “NFT #4”, “NFT #5”, etc.

image:

It gets a random image from the internet using picsum.photos.

The random=${nfts.length + 1} ensures each NFT gets a different image.

So overall, this line is basically saying:

const newNFT = {
  id: nfts.length + 1,
  name: `NFT #${nfts.length + 1}`,
  image: `https://picsum.photos/300?random=${nfts.length + 1}`
};

👉 “Create a new NFT with a unique ID, name, and picture.”

index.html

This already exists in React, but ensure it has:

<div id="root"></div>

src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

This file tells React where to put your app on the webpage and then displays (renders) your App component inside the <div id="root"> area.

Run the Project, open the URL:

👉 http://localhost:3000

This loads the NFT gallery interface.

Conclusion

This React-based NFT gallery provides a streamlined demonstration of how digital assets can be dynamically generated and displayed within a modern frontend application. While the current implementation simulates NFT creation locally, the structure is intentionally designed to be extendable. With minimal modifications, this setup can be integrated with blockchain networks, wallet providers, and smart contract interactions to support real NFT minting, ownership verification, and on-chain metadata.

By leveraging essential React concepts such as state management, component rendering, and event handling the project offers a solid foundation for developers looking to transition from frontend development into Web3-enabled applications. As such, it serves as both an educational tool and an expandable starting point for building full-featured decentralized NFT platforms.