NFT Minting dApp

The community needed more than a marketing site: the page had to submit real mint transactions against a live Ethereum mainnet contract, handle the messy realities of wallet connections across many wallet apps and chains, and reflect on-chain state accurately and live.

It also had to do this without breaking the brand. In a category where users spend real ETH, the site needed to feel like a polished, animated consumer experience while surfacing every stage of a transaction honestly, and the existing contract, already trusted by collectors, had to be integrated rather than replaced.

We treated the marketing layer and the dApp layer as a single Next.js application. Static, animation-heavy pages carry the brand; the mint and profile routes are client components wired into the blockchain and Supabase. Shared UI primitives, gradient buttons, glassmorphism cards, animated status dots, a scroll-reveal section wrapper, keep both halves visually identical.

Rather than redeploy, we built against the existing Archetype-style ERC-721 contract's full ABI, its invite-list mint signature, supply reads, and Transfer events, so minting on the new site is the same on-chain action collectors already trusted. Wallet plumbing uses wagmi v2 and RainbowKit under a fully custom-branded connect button that still exposes chain switching, wrong-network warnings, and ENS display. And off-chain data stays off-chain: a lightweight Supabase backend keyed by wallet address handles usernames and avatars, so the only thing a user ever needs is their wallet.

The mint page is wallet-gated. Once connected, a Public Mint card appears with a quantity selector, a live price calculation at 0.01 ETH per NFT, and a mint limit. Pressing Mint Now submits the transaction through the user's wallet, and the UI walks through each state honestly, pending wallet confirmation, awaiting on-chain confirmation, confirmed, or a decoded error, with the transaction hash displayed throughout.

On-chain state is read from the chain, not a CMS. Mint progress renders totalSupply directly from the contract against the 888-piece supply, and a WebSocket connection to an Ethereum node fetches the collection's historical Transfer events, each becoming a "Previously Minted" card with the actual token artwork resolved from IPFS, the recipient's shortened address, and a mint date derived from the block timestamp.

Connected wallets get a profile page backed by Supabase: inline username editing, avatar upload to Supabase Storage under collision-safe UUID filenames, and a one-tap-copy shortened address. The marketing side moves from a full-screen animated hero through a collection gallery with separate desktop and mobile treatments, a DAO roadmap, and a step-by-step FAQ, tying into the community's Discord, X, GitHub, and Substack. An auction area, grid, detail page, countdown, and bid entry, was built as concept UI demonstrating the intended next phase.