区块链宠物演示站搭建实录，前端一个人把NFT全链路跑通
前阵子帮朋友搭了一个区块链宠物演示站，本质上就是把宠物NFT的铸造、展示、交易压缩到一个能直接跑的demo里。朋友做Web3培训，需要学员打开浏览器就能上手的例子区块链宠物演示站搭建实录，前端一个人把NFT全链路跑通，不用搭一整套后端。我的任务就是让整条链路在前端环境里跑通，看着像那么回事就行。
前端用了React加wagmi连钱包，宠物用CSS动画做了一组小狐狸，点击"领养"就触发Solidity合约的mint函数。合约跑在Sepolia测试网上，宠物元数据直接写在合约里，不折腾IPFS那套。页面左边是宠物列表，右边是链上交易记录区块链宠物演示站，模拟一个迷你市场的布局。
合约只写了最基本的ERC721，支持mint、transfer和burn，没有复杂游戏逻辑。演示站的核心是让学员理解"按钮点击→链上事件→UI刷新"这条链路。用Hardhat本地起节点，前端连localhost:8545就能跑通，不烧gas。踩坑主要在wagmi的事件监听和钱包弹窗的CORS问题。
最终成果是一个纯前端项目，git clone下来npm install就能跑。朋友把它塞进培训课件，学员照着文档二十分钟就能mint一只小狐狸。后来有学员问能不能换成猫，我告诉他们改合约里的metadata和前端图片路径就行，核心逻辑完全不用动，整套演示站也就几百行代码。
