跳至主要內容
返回
NuxtVueTypeScriptSupabasePostgreSQLCloudflare WorkersCloudflare PagesTailwind CSSDaisyUIPWASSRSEOcheerioweb scrapingAIUI/UXwebfrontendbackendfullstack

賣貨便商城

賣貨便商城 為賣貨便賣家提供完整的商城展示網站，解決官方平台缺乏獨立商品頁面與搜尋功能的痛點。賣家只需貼上賣貨便網址即可一鍵匯入商品資料，自動建立含搜尋、排序、價格篩選、評論系統的完整商城。所有購買行為皆導向賣貨便原始頁面完成交易，平台本身不經手任何金流。採用 Nuxt 4 + Supabase + Cloudflare 全棧架構，從 Edge 快取到資料庫原子性寫入，兼顧效能與資料一致性。

賣貨便商城

使用技術

前端框架Nuxt 4 + Vue 3 + TypeScript
UI 框架Tailwind CSS v4 + DaisyUI
後端 / APINuxt Server Routes → Cloudflare Workers
資料庫Supabase (PostgreSQL) + pg_trgm
快取 / 防濫用Cloudflare Workers KV + Turnstile
身份驗證Supabase Auth（Google OAuth）
部署Cloudflare Pages + Workers（全球 CDN）
開發方式AI 協作開發，提升開發效率

負責角色

此專案由我獨立完成產品規劃、架構設計與全棧開發，從需求分析到部署上線一手包辦。
  • ◆產品規劃與功能設計
  • ◆資料庫架構設計（PostgreSQL schema、索引策略、DB Function）
  • ◆前後端全棧開發（Nuxt 4 SSR + Server Routes API）
  • ◆Cloudflare 基礎設施整合（Workers KV、Turnstile、Cron Trigger）
  • ◆Web Scraping 實作（賣貨便頁面解析與資料萃取）
  • ◆UI/UX 設計（Mobile First、DaisyUI 主題系統）
查看 Demo 查看原始碼

解決的問題

賣貨便官方平台缺乏獨立商品頁面與搜尋功能，買家無法有效瀏覽商品、賣家無法完整展示賣場。市面上也沒有針對賣貨便生態的第三方展示工具。賣貨便商城 讓賣家與買家能夠：

一鍵匯入商城

貼上賣貨便網址即可自動抓取商品資料，無需手動輸入，數秒完成整間商城建立。

完整搜尋體驗

支援商品與商城名稱的 Trigram 模糊搜尋、多種排序方式與價格區間篩選。

獨立商品頁面

每件商品擁有專屬頁面，含規格、圖片、評論與一鍵導購按鈕，提升 SEO 曝光。

熱門排序機制

依購買按鈕點擊數自動排序，讓熱賣商品自然獲得更多曝光。

零門檻使用

匯入無需登入、平台完全免費，降低賣家的使用門檻。

評論互動系統

透過 Google 登入即可留下星評與文字評論，增強買家信任與購買決策。

專案成果

技術亮點：

  • Scrape → KV 快取 → 預覽 → 原子性 DB 寫入的兩階段匯入架構，兼顧防竄改與效能
  • PostgreSQL Trigram GIN 索引實現中文無斷詞模糊搜尋
  • Cloudflare Workers KV 雙用途：Scrape 快取（TTL 10 分鐘）+ Edge 層 IP Rate Limit
  • DB Trigger 自動維護 search_vector、min_price、max_price 快取欄位，查詢零 JOIN
  • 軟刪除機制：重新匯入時自動標記已消失商品為下架，保留歷史評論與點擊數據

產品特色：

  • 一鍵匯入：貼上網址即可建立完整商城，無需手動輸入任何資料
  • 雙層防濫用：Cloudflare Turnstile（擋機器人）+ Workers KV Rate Limit（擋人工濫用）
  • 完整搜尋功能：模糊搜尋 + 多排序 + 價格區間篩選
  • Google OAuth 評論系統，含星評與每人每商品一則限制
  • 全站 100% 免費方案可運行（Supabase Free + Cloudflare Free）

開發成果：

  • 從概念到完整開發計劃，經歷 4 次版本迭代，修正 20 項設計問題
  • 完整的四階段開發計畫：核心展示 → 社群互動 → 體驗優化 → 未來擴充
  • 展現全棧能力：從產品規劃、資料庫設計到前後端開發與基礎設施整合一手包辦
回到作品列表