# 第四週課程

## Agenda
1. DAPP 介紹
2. 前端工具
3. web3 前端工具
4. 開發一個 mint NFT 網頁
5. 部署網站
6. 作業說明

## DAPP 介紹

### Uniswap
https://app.uniswap.org/swap

### Liquity
https://www.liquity.org/frontend

## 前端工具

### ReactJS/NextJS （前端框架）
https://react.dev/
https://nextjs.org/

### TailwindCSS （CSS 框架）
https://tailwindcss.com/

### Vercel （部署）
https://vercel.com/

## web3 前端套件

### Rainbow Kit （錢包串接套件）
https://www.rainbowkit.com/

### WAGMI （web3前端工具）
https://wagmi.sh/

### Viem （web3工具）
https://viem.sh/

### 其他

### TanStack （工具包）
https://tanstack.com/query/v4/docs/react/overview

### Chakra UI （UI 套件包）
https://chakra-ui.com/

## 開發一個 mint NFT 網頁

#### 建立專案 (NextJS + TailwindCSS + Typescript)
`npx create-next-app@latest --ts --tailwind --eslint --use-yarn`

#### 安裝所需套件
`yarn add -D @rainbow-me/rainbowkit@^1.3.0`
`yarn add -D wagmi@^1.4.8`
`yarn add -D viem@^1.19.11`
`yarn add -D decimal.js`

#### 程式碼參考
https://github.com/RayHuang880301/kryptocamp-week4

#### 部署
https://vercel.com/

## 作業

### 基本題
>用 HackMD 繳交作業。如不做進階題可留空白，繳交作業時，請提供 HackMD網址
1. 完成以上課程內容並且將網站部署到 Vercel 上提交網頁連結
2. 結合之前學過的 NFT 合約新增客製化規則，例如總量上限、每人最多可以 mint 數量上限、每筆交易可以 mint 數量上限、每個NFT 擁有自己的 tokenURI...等等

### 進階題
優化前端網站
- 自定義 React Hook
- 監聽交易狀態
- 更新 totalSupply, balance
- 優化 UIUX
- ...其他酷 idea

###### tags: `區塊鏈全端工程師`