健身堡壘

資策會畢業專題

https://youtu.be/iMgnutnCtsE?t=2888

(48:08-53:48，約5分鐘)

1. forntend:Next
2. backend:Node(EXPRESS)
3. DATA BASE:MySQL

負責的部分:

1.使用framer-motion處理部分動畫相關元件

2.部分mui元件共用化

首頁場館地圖資料

使用react-leaflet，搭配mui accordion做交互

3.商品API(後端)

登入、註冊、忘記密碼、前端保護路由(前後端)

使用formik、yup表單驗證。

使用firebase SDK串接google登入登出

JWT的登入登出(access token存在context，refresh token存在http only cookie)

忘記密碼使用nodemailer寄送token

4.會員中心(前後端)

使用react-image-crop做會員照片編輯、並對file的size進行檢驗

最愛商品、最愛課程、我的訂單在後端進行分頁

最愛商品由前端發送資料至後端進行篩選

個人紀錄內的身體部位SVG選擇器(前端)

使用photoshop、illustrator輸出svg並轉成react元件

5.協助藍新金流串接(前後端)

6.場地找找(前端)

使用d3讀取topoJSON資料渲染台灣地圖(點擊地圖可zoom in至縣市)，介接政府 API(https://iplay-um.sa.gov.tw/WebApi/Index)