Epic Game UI

Epic Game UI is an open-source web3 NFT game interface built with Next.js and ChakraUI that lets players mint an NFT character and battle a shared on-chain boss named Big Kangh.

What is Epic Game UI?

Epic Game UI is a web application that consumes a Solidity smart contract developed with the HardHat framework, allowing players to authenticate with a MetaMask wallet, mint their own NFT character on the Rinkeby test network, and use that character to fight a boss alongside other players. The project was created by BraianVaylet as an academic exercise during the buildspace courses, and a live demo is deployed on Vercel at buildspace-epic-game-ui.vercel.app, with the companion smart-contract repository available at github.com/BraianVaylet/buildspace-epic-game. All game actions, including minting and attacks, are recorded on the blockchain.

Key Features

• NFT character minting — Players pay a transaction in test ETH on the Rinkeby testnet to mint one of 12 character NFTs, each with fixed HP, attack, and defense stats.
• On-chain boss battle — The boss Big Kangh has 120,000 HP and 200 attack, and every attack is a blockchain transaction.
• Element-based combat — Each turn players choose fire, water, or vegetation; each element is strong against one other element and weak against another, and the winner of the clash deals damage.
• Character stat system — Characters have hearts (HP), swords (attack), and shields (defense); defense is a bonus the boss does not have.
• MetaMask authentication — The app requires the MetaMask wallet connected to the Rinkeby test network.
• HardHat smart contract integration — The frontend consumes a Solidity contract from a separate repository, also by BraianVaylet.
• Next.js and ChakraUI stack — Bootstrapped with create-next-app, featuring a pages/index.js main page and API routes such as pages/api/hello.js.
• Vercel deployment — The project is hosted on Vercel for direct interaction without local setup.

Who is it for?

• Web3 developers — Can study how a Next.js frontend connects to a HardHat-deployed smart contract through MetaMask, covering the full NFT game loop.
• Buildspace students — The project was made while completing the buildspace courses and is referenced as a complete NFT course, making it a useful reference for learners on that platform.
• NFT game players — Can visit the live Vercel demo, fund a wallet with Rinkeby test ETH from a faucet, mint a character, and team up with friends to defeat the boss.

What can you do with Epic Game UI?

• Learn NFT minting flows: Connect MetaMask, obtain test ETH from faucets.chain.link/rinkeby, and mint a character NFT to see the transaction flow end to end.
• Play a multiplayer on-chain game: Choose a character, pick an elemental power each turn, and coordinate with other players to chip away at the boss's 120,000 HP.
• Fork and extend the codebase: Use the repository as a starting template for other on-chain game UIs, since it includes a working Next.js app, ChakraUI theming, and API route scaffolding.

How does Epic Game UI work?

First, connect a MetaMask wallet that is set to the Rinkeby test network and load it with test ETH from a faucet. Then mint an NFT character by paying the transaction fee, and finally select one of three powers (🔥 fire, 💧 water, 🌿 vegetation) to attack the boss; the boss also selects a power, and the winner of the elemental matchup deals damage. The character art was created in Hero Forge, and the page displays each character's stats in a table format.