PortfolioCase Study

SaaS MVP

My Brand Workspace SaaS

面向個人品牌工作室的 SaaS MVP，整合客戶、專案、任務與收入管理，並以 Supabase 提供 Auth 與 PostgreSQL RLS。

Demo GitHub

Goal

展示我在 SaaS 資料模型、角色權限與前端測試流程上的實作能力。

Scope

  • 建立個人品牌營運用 SaaS MVP，涵蓋 projects、clients、tasks 與 income tracking。
  • 串接 Supabase Auth、PostgreSQL RLS 與前端 dashboard workflow。
  • 用 Vitest / Testing Library 保護主要操作流程與資料呈現。

Architecture

  • React + TypeScript frontend 以 dashboard pages 管理品牌營運資料。
  • Supabase Auth 提供登入邊界，PostgreSQL RLS 控制 user-owned records。
  • Netlify 承載 frontend，Supabase 負責 auth、database 與資料權限。

Key Features

  • 把產品需求拆成 Projects / Clients / Tasks / Income 等核心模組。
  • 以前端測試輔助後續重構，而不是只靠手動點擊。
  • 透過 Supabase Auth 與 RLS 控制不同使用者資料邊界。

Problems

  • Freelance / personal brand workflow 同時包含專案、客戶、任務與收入，資料關聯容易分散。
  • 沒有 RLS 與測試保護時，MVP 難以說明資料隔離與可維護性。

Solutions

  • 將核心營運資料收斂到明確的 CRUD surfaces，讓 dashboard 可快速掃描與更新。
  • 以 Supabase Auth / RLS 建立安全邊界，並用 component tests 驗證主要 UI 狀態。

Result

完成多模組 SaaS MVP，並用 Vitest / Testing Library 補齊主要 UI 行為驗證。