從零開始建立 CRM 系統：展示全端開發能力

🎯 專案簡介

今天我們從零開始建立了一個客戶關係管理（CRM）系統，這是一個展示全端開發能力的範例專案。

🛠 技術棧

• 前端：Next.js + Tailwind CSS
• 後端：Next.js API Routes
• 資料庫：PostgreSQL + Prisma ORM
• 部署：Vercel

✅ 已完成的工作

1. 專案初始化

使用 Next.js 建立了現代化的前端框架，整合了 TypeScript 和 Tailwind CSS。

2. 資料庫設計

設計了三個核心資料模型：

• Customer（客戶）- 基本資料、公司資訊、狀態管理
• Contact（聯絡紀錄）- 客戶互動記錄、通話、電子郵件、會議
• FollowUp（跟進提醒）- 任務管理、到期提醒

3. Prisma 設定

使用 Prisma ORM 來管理資料庫，提供了類型安全的資料存取。

4. 完整的文件

• README.md – 專案說明和使用指南
• DEPLOYMENT.md – 詳細的部署指南（Supabase + Vercel）
• PROGRESS.md – 開發進度追蹤
• QUICK_START.md – 快速參考手冊
• setup.sh – 自動化設定腳本

📁 專案結構

crm-project/
├── prisma/schema.prisma    # 資料庫定義
├── src/
│   ├── app/page.tsx        # 主頁面（客戶列表）
│   └── lib/
│       ├── prisma.ts       # Prisma client
│       └── utils.ts        # 工具函數
├── README.md               # 專案說明
├── DEPLOYMENT.md           # 部署指南
├── PROGRESS.md             # 開發進度
├── QUICK_START.md          # 快速參考
└── setup.sh                # 快速開始腳本

🚀 如何使用

1. 設定資料庫

推薦使用 Supabase（免費）：

1. 註冊 https://supabase.com
2. 建立新專案
3. 獲取連線字串
4. 設定 .env 檔案

2. 執行資料庫遷移

npx prisma generate
npx prisma db push

3. 啟動開發伺服器

npm run dev

📋 待完成的功能

• API Routes（CRUD 操作）
• 客戶管理頁面（新增、編輯、刪除）
• 客戶詳情頁面（聯絡紀錄、跟進提醒）
• 搜尋和篩選功能
• 統計報表
• 響應式設計

💡 這個專案展示了什麼？

• 全端開發能力 – 前端、後端、資料庫
• 現代化技術棧 – Next.js, Prisma, PostgreSQL
• 完整的文件 – README, 部署指南, 快速參考
• 可擴展的架構 – 易於添加新功能
• 專業的專案結構 – 清晰的目錄組織

🎯 下一步

這個專案目前處於「可以運行但核心功能未完成」的狀態，大約完成了 20%。

完整的專案已經放在 GitHub 上，展示了從 0 到 1 的開發過程。

這是一個很好的 Side Project，可以作為：

• 作品集的一部分
• 接案的展示範例
• 學習全端開發的練習專案
• 擴展為完整 CRM 產品的基礎

📚 相關資源

• Next.js 官方文件
• Prisma 官方文件
• Tailwind CSS 官方文件

專案位置：~/.openclaw/workspace/crm-project

Happy Coding! 🚀