{"content":{"title":"从零搭建仿Kickstarter的众筹Dapp","body":"# 从零搭建仿Kickstarter的众筹Dapp\r\n\r\n## 概要\r\n\r\n本教程是从零搭建一个仿****Kickstarter众筹平台Dapp,总体项目结构分为两个部分****\r\n\r\n- client\r\n    - 客户端是采用React结合tailwindCss开发出的移动响应式的开发框架\r\n- web3\r\n    - 合约部分是采用hardhat打包编译并且通过thirdweb合约托管平台发布,后续的合约接口调用以及部分React的SDK都有该框架提供.\r\n\r\n## 应用截图\r\n\r\n\r\n![WX20231208-092454@2x.png](https://img.learnblockchain.cn/attachments/2023/12/IFRp8OYL657282bd82f5c.png)\r\n\r\n\r\n![WX20231208-092522@2x.png](https://img.learnblockchain.cn/attachments/2023/12/C1ocpm1W657282d50e125.png)\r\n\r\n\r\n![WX20231208-093340@2x.png](https://img.learnblockchain.cn/attachments/2023/12/rRMUsblu657282e323390.png)\r\n\r\n## 项目资源\r\n\r\n- 本项目在线预览地址\r\n[https://65718948cc7b955cb1abb735--jocular-pasca-67bfac.netlify.app/](https://65718948cc7b955cb1abb735--jocular-pasca-67bfac.netlify.app/)\r\n- gitHub代码库\r\n[https://github.com/sunShineLoveMe/crowdfunding](https://github.com/sunShineLoveMe/crowdfunding)\r\n- 在线项目部署在测试网Sepolia\r\n- 合约代码托管在\r\n[https://thirdweb.com/dashboard](https://thirdweb.com/dashboard)\r\n- 前端项目在线发布托管网站\r\n[https://app.netlify.com/](https://app.netlify.com/)\r\n- 合约rpc\r\n[https://www.ankr.com/rpc/](https://www.ankr.com/rpc/)\r\n\r\n## 项目启动\r\n\r\n1. git clone [https://github.com/sunShineLoveMe/crowdfunding](https://github.com/sunShineLoveMe/crowdfunding)\r\n2. web3项目在hardhat.config.js配置好合RPC，需要事先在ankr rpc网站免费注册获取key,同时在.env配置文件中配置测试钱包私钥,⚠️：本地代码上传到git仓库，不要上传.env文件。\r\n\r\n\r\n![WX20231208-095615@2x.png](https://img.learnblockchain.cn/attachments/2023/12/yy5Bo1WT657283105a691.png)\r\n\r\n3. 合约成功编译打包，在thirdweb.com可以看到托管的合约信息,也可以在测试浏览器上看到相关信息\r\n\r\n\r\n![WX20231208-095845@2x.png](https://img.learnblockchain.cn/attachments/2023/12/WS17o0OP6572833860a1e.png)\r\n4. 获取到合约Hash之后，复制到前端项目client，在红色框中填入合约Hash\r\n\r\n\r\n![WX20231208-100341@2x.png](https://img.learnblockchain.cn/attachments/2023/12/yCddWebB65728326aa81b.png)\r\n\r\n5. 之后client项目输入\r\n\r\n```bash\r\nnpm install\r\n```\r\n\r\n6. 之后输入 \r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\n  注意的是：因为打包采用的是vite 3.0以上的版本，可能会出现打包失败，原因是vite高版本不支持项目部分的依赖包的服务端渲染，这个可以在配置\r\n\r\n![解决打包编译报错问题，将console中涉及到的错误提示包放到该红色框中]![WX20231208-100905@2x.png](https://img.learnblockchain.cn/attachments/2023/12/RNQZ6Ss06572835beb1dc.png)\r\n解决打包编译报错问题，将console中涉及到的错误提示包放到该红色框中\r\n\r\n7. 之后将dist报上传到[https://app.netlify.com/](https://app.netlify.com/)中，免费注册一个就可以。之后该网站自动生成一个在线的随机域名访问。"},"author":{"user":"https://learnblockchain.cn/people/3290","address":null},"history":null,"timestamp":1702003707,"version":1}