個人專案是自己的,也是獨一無二的,只有自己才知道發生了什麼,也只有自己能掌控整個專案未來的走向,所以老實說,根本沒預期自己的專案可以用到那麼多技術關鍵字,很多內容都是在和老師、同學們、助教們交流中的一、兩句話就跳上去的,也因為願意往未知多走幾步,所以最後的成果遠遠超乎當初的想像。
技術堆疊
- React: useEffect, useState, useCallback
- Custom Hooks: useAuthState, useRequireAuth
- Redux: useSelector, useDispatch
- Redux Toolkit: createSlice, createAction
- Next.js: App Router
- TypeScript
- ESLint
- Jest: Integration Tests
- Self-Built WYSIWYG Canvas Editor
- Firebase: Cloud Firestore, Storage, Authentication
- Vercel
響應式網頁設計

主要功能
筆刷

橡皮擦

返回、重做

拖移

鍵盤快捷鍵

次要功能
會員系統

購物車

第三方支付系統

歷史訂單管理

元件架構

Custom Hooks
useAuthState: 是一個用來管理 React 應用程式中使用者驗證狀態的 Hook。它運用了 Firebase 的驗證服務,來監聽使用者登入狀態的變化。
useRequireAuth: 是一個用來管理 React 元件中存取控制的 Hook,特別適用於當某些使用者操作需要登入驗證(即使用者必須已登入)時使用。
畫布分層示意圖

狀態管理工具 Redux Toolkit

Jest 測試
