與另一名前端工程師合作做的電商系統
因為協作關係所以導入 TypeScript
技術:Next.js、 app router 、Shadcn UI 、react-redux 、toolkit、react-hook-form、zod、綠界金流、綠界地圖 等
主要製作專案架構、首頁、登入流程、登入狀態、購物車流程、串接綠界金流與門市地圖、自動轉址等
將商品加入購物車後右上角會顯示數量
這裡原先是使用 redux 去做狀態管理,後來改成 revalidateTag
在使用者加入購物車且回應為 200 時,使用 revalidateTag 重新取得購物車的數量
revalidateTag 也運用在一些跟購物車的其他功能上
像新增刪除購物數量、更換運輸方式等等
以及串接綠界信用卡、綠界超商門市地圖(正式版目前未開啟)、linepay 付款等第三方支付 api
加入購物車並顯示購物車數量
刪除無庫存商品
信用卡流程(綠界測試)
綠界地圖(測試版串接)
自動轉址
使用 layout 做路由守衛與所有頁面的 meta 設定