Epic NFTs UI

Epic NFTs [UI] is an open-source Next.js web3 template that implements a complete NFT minting frontend on the Rinkeby testnet, created by Braian Vaylet while completing the buildspace NFT course. The application connects to a Solidity smart contract built with HardHat and lets users authenticate with MetaMask, mint a randomly generated NFT, and resell it on OpenSea or Rarible.

What is Epic NFTs [UI]?

Epic NFTs [UI] is the frontend layer of a testnet NFT minting dApp: it takes a MetaMask wallet connection and an Ethereum test transaction as input, and produces an on-chain NFT with a unique name composed of a random animal, profession, and adjective. The project runs on Next.js with Chakra UI components and is deployed to Vercel, with the smart contract code kept in a separate repository under the same author.

Key Features

• Next.js foundation — Built with create-next-app, including API routes under pages/api and automatic page-based routing.
• Chakra UI interface — All UI components, from the connect-wallet button to the mint screen, use the Chakra UI component library.
• MetaMask authentication — Users must connect their wallet and switch to the Rinkeby test network before any transaction.
• HardHat + Solidity smart contract — The frontend calls a contract developed with HardHat; the contract address and ABI are integrated into the app.
• Randomized NFT attributes — Each mint combines three word lists (animals, professions, adjectives) to generate a unique metadata name.
• Marketplace compatibility — Because the NFTs use standard Ethereum token metadata, they appear on OpenSea and Rarible on the Rinkeby network.
• Vercel deployment — A live demo is hosted at epic-nfts-ui-ten.vercel.app, and the README includes standard Next.js deployment steps for Vercel.
• Educational codebase — The project was made for academic purposes and mirrors the buildspace course curriculum, making it a clear reference for learning.

Who is it for?

• Web3 developers — They can study the code to understand how a React/Next.js frontend integrates with a Solidity contract, wallet authentication, and on-chain transactions.
• NFT project founders — They can fork this template to launch a fast testnet minting page without building the full wallet and transaction flow from scratch.
• Buildspace learners — Students who took the same course can use this implementation to compare structure, styling choices, and smart-contract interaction patterns.
• UI designers in web3 — They can use the Chakra UI layout as a starting point to customize a minting experience.

What can you do with Epic NFTs [UI]?

• Mint an NFT: After connecting MetaMask and loading Rinkeby ETH from a faucet, a user clicks mint and pays a small test-gas fee to receive a randomly named NFT in their wallet.
• Resell on marketplaces: The generated NFT can be listed on OpenSea or Rarible, letting users practice trading digital assets in a test environment.
• Customize the minting experience: Developers can modify the Chakra UI theme, change the word lists in the smart contract, or add their own pages and API routes.
• Learn end-to-end dApp flow: The combination of a live demo, UI repo, and separate HardHat contract repo gives a complete picture of how a dApp is wired.

FAQ

How do I get test ETH for Rinkeby?

The README links to the Chainlink Rinkeby faucet (faucets.chain.link/rinkeby), where you can request free test ETH to pay for minting transactions.

How does the NFT get its name?

When minted, the smart contract randomly selects one word from each of three lists (animals, professions, adjectives) to form the NFT's name attribute.

Is the project free to use?

Yes, the code is open source under the repository's public license, and the live demo is free to test. Minting still costs Rinkeby test ETH, which is free to obtain through the faucet.

Which networks are supported?

The app is configured for the Rinkeby test network only; the README specifically asks users to switch MetaMask to Rinkeby before minting, so mainnet or other testnets are not covered in this version.