- 4 步驟客製禮盒流程
- 3 種禮盒尺寸
- PayPal線上金流
- RWD手機、平板、桌機
背景
這是資展國際前端工程師養成班的結訓專題：為虛構的日式和菓子品牌「拾月菓」打造完整電商，從視覺、前端、後端到資料庫都自己完成，並實際部署上線，可以註冊、下單並用 PayPal 付款。
功能
商品瀏覽
從後端取得商品資料，以分類與卡片呈現，點擊進入詳細頁。
會員
登入與註冊合併在同一頁；用正規表達式即時驗證欄位，並依密碼複雜度提示強度。
客製化禮盒
四個步驟：選規格（三種尺寸）→ 把商品放進格子 → 挑選小卡與內容 → 確認。
結帳與金流
確認購物車、收件資訊與付款方式，串接 PayPal 完成付款，之後可查看訂單與歷史紀錄。
架構
關鍵設計決策
密碼不以明文保存
註冊時以 bcrypt 雜湊後才寫入資料庫，登入時比對雜湊值。
以 JWT 維持登入
登入成功後簽發 JWT，前端保存並在後續請求中帶上，由 API 驗證身分。
前端先擋掉無效輸入
欄位格式即時驗證並提示密碼強度，減少無效送出與來回。
把複雜流程拆成步驟
客製禮盒拆成四步，每一步只處理一件事，最後統一確認再加入購物車。
誠實面對免費方案限制
前後端拆成兩個服務部署，資料庫放在 Google Cloud SQL；冷啟動約 45 秒，在網站上明確告知使用者。