LeadFlow — 行銷自動化 / CRM SaaS 專案

一個模擬 B2B SaaS「行銷自動化 CRM」的前端專案骨架，聚焦在 SaaS 產品最具代表性的三個模組： 聯絡人管理、自動化流程建構器、成效儀表板。

啟動方式

npm install
npm run dev

專案結構

src/
├── app/
│   ├── (dashboard)/          # 共用側邊欄的路由群組
│   │   ├── dashboard/        # 總覽儀表板（折線圖、漏斗圖、活動列表）
│   │   ├── contacts/         # 聯絡人資料表（排序/篩選/批次操作）
│   │   ├── automations/      # 自動化流程列表 + /builder 流程編輯器
│   │   ├── campaigns/        # 行銷活動列表
│   │   └── settings/         # 設定頁（預留擴充）
│   ├── layout.tsx            # Root layout，包 Providers
│   ├── page.tsx               # 首頁導向 /dashboard
│   └── providers.tsx          # React Query + MSW 初始化
├── components/
│   ├── ui/                    # 風格基礎元件
│   ├── layout/                 # Sidebar、Topbar
│   ├── contacts/               # 聯絡人表格與篩選列
│   ├── automations/            # React Flow 節點、面板、畫布
│   └── dashboard/               # 圖表元件
├── lib/
│   ├── types.ts                # 核心資料模型
│   ├── mock-data.ts            # faker 產生假資料
│   └── api/                    # React Query hooks（contacts.ts, misc.ts）
├── mocks/                      # MSW handlers 與初始化邏輯
└── store/                      # Zustand store（Contacts 頁的 UI 狀態）

技術棧

類別	選擇
框架	Next.js 16 (App Router)
狀態管理	Zustand（UI state）+ TanStack Query（server state）
資料表格	TanStack Table
流程圖	React Flow
圖表	Recharts
Mock API	MSW（Mock Service Worker）
樣式	Tailwind CSS + 手刻元件）