Shop2Go

做了什麼

2022 年 12 月，我用大約三週、75 個 commit，一個人做完這個電商平台。

• 登入：用 NextAuth.js 串 Facebook、LINE、Discord 登入，也可以用 Email 收登入連結，不需要密碼。
• 前台：首頁、商品分類（分頁）、商品頁、購物車、結帳、訂單紀錄、個人資料。
• 結帳與金流：串 TapPay（沙盒環境）。前端用 TapPay Fields 取得卡片的 prime，後端再拿 prime 去請款。結帳成功後清空購物車，並用 LINE Notify 通知店家有新訂單。
• 客服聊天：用 Socket.IO 做即時聊天。每位顧客有自己的聊天室，店家從另一個頁面進入同一個聊天室回覆。
• 後台：商品和分類管理、新增商品、訂單管理。
• 報表：用 Prisma 的 groupBy 依商品和分類加總銷售額與數量，再用 Plotly 畫成圖表。
• 外觀設定：店家可以在後台直接寫 CSS，存進資料庫後套用到整個商店。

倉庫裡有每個畫面的截圖。

技術決定

• 用 create-t3-app 起手：Next.js、tRPC、Prisma、NextAuth.js、Tailwind CSS。前後端共用 TypeScript 型別，API 的輸入用 Zod 驗證。後端依功能拆成商品、分類、訂單、報表、使用者、外觀等 tRPC router。
• 資料庫一開始用 MySQL，後來改成 PostgreSQL，並加上 Prisma seed 產生測試資料。
• 寫了 Dockerfile 和 docker-compose，一次啟動網站、PostgreSQL 和 pgAdmin，可以自己架起來。

LINE Notify 已經在 2025 年停止服務，現在要用的話，通知這段需要改成別的方式。