---
# System prepended metadata

title: 區塊鏈全端工程師實戰營 week4

---

第四週作業
基礎題
1. 完成課程內容，並部署到 Vercel。
2. 上述前端結合客製化 NFT合約。

進階題
1. 優化前端網站
自訂React Hook
監聽交易狀態
更新totalSupply, balance
優化UI/UX
......, 其他

基礎題:https://week4-nu.vercel.app/

---------------------------

進階題:https://week4-2.vercel.app/
![image](https://hackmd.io/_uploads/HkgULOCoT.png)

![image](https://hackmd.io/_uploads/HJxs-u0oT.png)
![image](https://hackmd.io/_uploads/S1F3Z_Rs6.png)
https://goerli.etherscan.io/address/0x04ca7df28c808d5a43d245af3d0bb24a0448bda9<--NFT合約

這邊的設計是以minted 的數量決定畫面上有幾個card，合約是從index 0開始
call合約 input NFT的index，然後會return一個ipfs的CID
http://bafybeieblkoi5wxfp5gdryvosinhe3wd7z7opoitznx2g5o3tkjdxckm2i.ipfs.localhost:8080/0.json  <---例如是這樣
然後提取image的CID
然後把ipfs:// 改成http://的對應格式，網頁上就可以引進去

由於localhost測試確定運作沒問題，然後平台這邊的img src是可以點進去看的，編號、bgcolor、image 都是從上面的json去抓，所以我推測是平台後端要設定一下，但我找不到在哪裡設  估計是沒支援這個做法
![Uploading file..._ay8qgj72h]()

#這邊其實我wagmi的useContractRead可以包成一個hook，Hook的部份我後補
