CASE STUDY // 超吉商行
一個沒有店員的
租借平台
2026 年 6 月，約 30 小時內從零打造的自助道具租借平台。營運至 2026 年 8 月結束，本站為結束後的靜態存檔。
01 // OVERVIEW
專案概述
超吉商行是面向影視製作團隊的自助道具租借平台。客戶線上選道具、指定租期、線上付款，接著用密碼鎖自行取還，全程不需要跟人接洽。
使用者分兩種：影視製作人員、婚禮攝影師與場景佈置業者是客戶端；營運團隊使用單一帳號的管理後台。
02 // PROBLEM
要解決的問題
傳統道具租借要打電話確認、人工核對庫存、現場交接。對小型劇組或低預算拍攝來說，這些摩擦往往比租金本身還貴——而且拍片的作息跟朝九晚五的店面根本對不上。
平台把整個流程數位化：24 小時可下單，檔期由系統擋，密碼鎖自助取還。業者不必為了交接排班，客戶也不用等人回訊息。
03 // ARCHITECTURE
技術架構
| 層次 | 工具 | 角色 |
|---|---|---|
| 前端框架 | Next.js（App Router） | SSR + CSR 混合渲染 |
| UI 樣式 | Tailwind CSS | 設計系統與響應式排版 |
| 後端 API | Next.js Route Handlers | 金流回呼、LINE Webhook、排程任務 |
| 資料庫 | Supabase（PostgreSQL） | 資料儲存與 Row Level Security |
| 身份驗證 | Supabase Auth（Google OAuth） | 登入與 session 管理 |
| 金流 | 綠界科技 ECPay | 信用卡付款與退款 |
| 電子郵件 | Resend | HTML 確認信（開門密碼、貨架位置、平面圖） |
| 即時通訊 | LINE Messaging API | 付款推播、客服對話、帳號綁定 |
| 排程任務 | Vercel Cron | 自動釋放 24 小時未付款訂單 |
| 部署 | Vercel | 自動 CI/CD |
| 語言 | TypeScript | 全端型別安全 |
04 // FEATURES
功能
客戶端
- 商品瀏覽：分類樹、顏色標籤、關鍵字搜尋、圖片輪播
- 租期選擇：互動式月曆，不可租日與整備緩衝日自動封鎖
- 規格與數量：每個變體獨立庫存與售價，即時顯示區間剩餘件數
- 購物車：多件同時加購，以 localStorage 跨頁面保存
- 折扣碼：百分比／固定金額、最低消費、使用上限、到期時間
- 結帳：綠界信用卡付款，付款成功導回並顯示訂單編號
- 訂單詳情：凍結的開門密碼、開門步驟、倉庫平面圖、流程時間軸
- 自助取消：客戶端取消訂單並觸發綠界退款
- LINE 綁定：付款成功自動推播
管理端
- 訂單管理：狀態與付款狀態調整、金額修改、一鍵退款
- 商品管理：上下架、圖片上傳、貨架位置、每期單價、多規格變體
- 手動封鎖時段：針對單一商品封鎖清潔或維修日期
- 客戶管理：訂單歷史、管理員備註、黑名單
- 折扣碼管理：新增、停用、刪除，並顯示使用次數與狀態
- 業績報表：期間總收入、月趨勢、商品與客戶排行
- 系統設定：開門密碼管理、確認信 HTML 即時預覽
05 // DATA MODEL
資料模型
| customers | 客戶資料、LINE UID、黑名單旗標 |
| bookings | 一次結帳的訂單群組，含付款狀態與凍結的開門密碼 |
| orders | 單一商品的租借記錄：取件日、歸還日、緩衝截止日、小計 |
| items | 商品：名稱、描述、圖片、每期單價、顏色標籤、貨架位置 |
| item_variants | 商品變體：規格名稱與值、獨立庫存、獨立售價 |
| categories | 三層分類樹（parent_id 自關聯） |
| blocked_dates | 人工封鎖的日期與原因 |
| coupons | 折扣碼：類型、折扣值、門檻、使用上限、到期 |
| settings | 鍵值設定，例如當前的開門密碼 |
customers ──< bookings ──< orders >── items >── item_variants
│
└──> blocked_dates (item_id)比較有意思的一欄是 buffer_end。歸還當天道具還要清潔整備，不能馬上租給下一位，所以緩衝期直接寫進資料庫，月曆據此自動封鎖，不靠人工判斷。
另一欄是 bookings.door_code。開門密碼在付款成功的當下就快照進訂單，後台之後改密碼只影響新訂單，客戶手上那封確認信永遠有效。
06 // ARCHIVE
存檔時拿掉了什麼，為什麼
這個分支把整站改成 output: 'export' 的純靜態輸出，商品與分類改讀建置期產生的 JSON，圖片壓成 WebP 放進 public/。以下是被移除的部分：
後台 /admin
需要登入與寫入資料庫，靜態站台無法提供，且不應公開營運介面。
API routes
金流回呼、LINE Webhook、寄信、排程都需要伺服器執行環境。
購物車與結帳
沒有金流與資料庫，保留下單入口只會誤導訪客。
登入與帳號
Supabase Auth 需要後端 session，且已無帳號可登入。
訂單與客戶資料
customers、orders、bookings 等含個人資料的資料表完全沒有進入這個分支，只保留商品與分類。
月曆與庫存查詢
檔期要即時查詢訂單，靜態頁面改為唯讀的規格列表。
留下來的是最能代表這個專案的部分：商品瀏覽、三層分類篩選、商品詳情與圖片，以及整套視覺設計。
07 // ENGLISH
In English
Jijiji Rental was a self-service prop rental platform for film and video production teams. Customers browsed props online, picked a rental window, and paid by card — then used a keypad code to collect and return items on their own schedule, with no staff handoff at any point.
Traditional prop rental in Taiwan runs on phone calls, manual stock checks, and in-person handoffs. That is expensive friction for small crews, and the opening hours never matched the hours people actually shoot. The platform digitised the whole workflow: round-the-clock ordering, availability enforced by the booking data itself, and door-code access to the warehouse.
It was built with Next.js (App Router) and TypeScript on Supabase/PostgreSQL, with ECPay for card payments and refunds, Resend for HTML confirmation emails carrying the door code and shelf locations, and the LINE Messaging API for push notifications and support. Row Level Security kept customer data locked down; anything privileged ran server-side under a service-role key.
The shop closed in August 2026. This branch is a static export of the storefront — 381 items and their images, rendered at build time from JSON fixtures. Everything requiring a server (admin, API routes, cart, checkout, auth) has been removed, and no customer data was carried over.