跳到主要內容

← 作品

接案 2026 年 9 月至 10 月

AshmeBespoke 珠寶官網與電商

珠寶工作室的官網、電商,和店主自己用的管理後台。從寫規格到上線,我一個人做。

角色
全端獨立開發
技術
Next.jsTypeScriptPrismaPostgreSQLZeabur

客戶要什麼

原本只有一個靜態網站。店主希望能自己上架商品、處理訂單,也要能接 Instagram 私訊來的客製訂單,網站要有中文、英文、法文三種語言。

顧客這一側

影片顧客購物流程(36 秒)從首頁到商品列表、依類別篩選、看商品、加入購物車,到結帳頁。

會員用 Email 註冊登入。購物車和收藏跟著帳號,價格含運費,結帳時填收件資料。

購物車與結帳頁
購物車與結帳:收件資料、訂單摘要

店主這一側

影片後台管理流程(44 秒)登入、新增商品(三種語言)、折扣、手動建立訂單並產生付款連結。

後台有儀表板、商品、折扣、訂單、會員、Salon 報名和文章管理。商品的名稱和描述可以分語言填寫,沒填的語言會自動顯示中文。

後台手動建立訂單後產生的付款連結與 QR code
後台手動建單:建立後產生付款連結和 QR code,傳給客人就能付款

花最多心思的地方

先寫規格,再動手

我先把客戶確認過的規則寫成白紙黑字,再實作:哪些商品可以買、哪些只能詢問、運費怎麼算、PDF 是收據而不是電子發票。後來客戶說不需要多個管理員角色,我就在功能狀態表上標成「不做」,不會變成沒人記得的半成品。

價格和庫存,伺服器說了算

折扣價和庫存都在伺服器端計算,結帳時用資料庫交易鎖住庫存,不會出現負的庫存,前端怎麼改都沒用。

三種訂單,同一套流程

訂單可能從網站下單、由店主在後台手動建立,或是用專屬的付款連結。三種都寫進同一張訂單表。訂單第一次變成「已付款」才會產生收據,並且確保只會產生一張,重寄的也是同一份。付款走可以替換的介面,不綁死某一家金流。

一個踩過的坑

折扣活動的起迄時間依賴時區。本機設了台北時間,部署到雲端卻沒設,店主輸入的時間就被當成 UTC,差了 8 小時。後來我把它寫進部署檢查事項。