TicketFlow 全端工單管理系統

Goal

建立一個能展示前後端協作、API 契約與部署流程的完整作品案例。

Scope

• 建立可登入的 ticket workflow MVP，涵蓋 ticket list、status、priority、keyword filtering 與 CRUD path。
• 串接 Vue 3 frontend、ASP.NET Core Minimal API、EF Core data model 與 Supabase PostgreSQL deployment。
• 補齊本地與雲端部署流程，讓作品可被 demo、review 與後續迭代。

Architecture

• Vue 3 + Vite frontend 負責列表、表單與狀態篩選互動。
• ASP.NET Core Minimal API 封裝 ticket endpoints、auth boundary 與 EF Core persistence。
• Supabase PostgreSQL 作為 production database，Render 與 Netlify 分別承載 API 與 frontend。

Key Features

• 前後端契約以實際畫面與 API 流程對齊，不只展示靜態 UI。
• 保留 MVP 範圍，優先完成登入、列表與編輯等核心使用路徑。
• 部署到 Netlify、Render 與 Supabase，補齊交付鏈路。

Problems

• 早期 MVP 需要同時證明 UI、API、database 與 deployment path，容易只停留在靜態展示。
• Ticket filtering 與 CRUD 狀態需要前後端 schema 一致，否則 demo flow 會出現資料不一致。

Solutions

• 用 typed query params 與明確 ticket fields 串起 status、priority、keyword filtering。
• 以 EF Core migration、Supabase production database 與 CI checks 固定可重複驗證的交付流程。

Result

完成可部署的 MVP，涵蓋 Auth、Ticket CRUD 與多環境資料庫設定，並整理為可公開說明的案例。