ai-showcase-platform/
├── app/                    # Next.js App Router
│   ├── admin/             # 管理員頁面
│   │   ├── page.tsx       # 管理員主頁
│   │   └── scoring/       # 評分管理
│   ├── competition/       # 競賽頁面
│   ├── judge-scoring/     # 評審評分頁面
│   ├── register/          # 註冊頁面
│   ├── layout.tsx         # 根布局
│   └── page.tsx           # 首頁
├── components/            # React 組件
│   ├── admin/            # 管理員專用組件
│   ├── auth/             # 認證相關組件
│   ├── competition/      # 競賽相關組件
│   ├── ui/               # 通用UI組件
│   └── chat-bot.tsx      # AI智能助手
├── contexts/             # React Context
│   ├── auth-context.tsx  # 認證狀態管理
│   └── competition-context.tsx # 競賽狀態管理
├── hooks/                # 自定義 Hooks
├── lib/                  # 工具函數
├── types/                # TypeScript 類型定義
└── public/               # 靜態資源

🚀 快速開始

環境要求

Node.js 18+
pnpm 8+

安裝步驟

克隆專案

git clone <repository-url>
cd ai-showcase-platform

安裝依賴

pnpm install

環境配置

# 複製環境變數範例
cp .env.example .env.local

# 編輯環境變數
# 設定 DeepSeek API 金鑰
NEXT_PUBLIC_DEEPSEEK_API_KEY=your_deepseek_api_key_here
NEXT_PUBLIC_DEEPSEEK_API_URL=https://api.deepseek.com/v1/chat/completions

啟動開發服務器

pnpm dev

開啟瀏覽器

http://localhost:3000

🔧 環境配置

DeepSeek API 設定

取得 API 金鑰
- 前往 DeepSeek 官網
- 註冊或登入帳號
- 在控制台中生成 API 金鑰
設定環境變數

# .env.local
NEXT_PUBLIC_DEEPSEEK_API_KEY=your_deepseek_api_key_here
NEXT_PUBLIC_DEEPSEEK_API_URL=https://api.deepseek.com/v1/chat/completions

📖 使用指南

一般用戶

註冊/登入: 使用企業郵箱註冊帳號
瀏覽應用: 查看AI應用展示和競賽資訊
參與互動: 收藏喜歡的應用、參與投票
查看排行榜: 瀏覽人氣排行榜和得獎作品

開發者

提交作品: 在競賽期間提交AI應用
管理作品: 編輯、更新作品資訊
查看評分: 查看評審評分和意見
參與競賽: 加入團隊或個人參賽

管理員

競賽管理: 創建、編輯、刪除競賽
評審管理: 管理評審團成員和權限
評分管理: 手動輸入評分或查看評審評分
數據分析: 查看競賽統計和用戶分析

AI助手使用

開啟對話: 點擊右下角聊天按鈕
提問: 輸入問題或選擇快速問題
獲取幫助: AI助手提供系統使用指導
持續對話: 保持上下文進行深入交流

🏗 開發指南

新增組件

# 在 components 目錄下創建新組件
touch components/MyComponent.tsx

新增頁面

# 在 app 目錄下創建新頁面
mkdir app/my-page
touch app/my-page/page.tsx

狀態管理

// 使用 Context Hook
import { useAuth } from "@/contexts/auth-context"
import { useCompetition } from "@/contexts/competition-context"

const { user, login, logout } = useAuth()
const { competitions, addCompetition } = useCompetition()

樣式開發

// 使用 Tailwind CSS
<div className="bg-white rounded-lg shadow-md p-6">
  <h2 className="text-2xl font-bold text-gray-900">標題</h2>
</div>

📊 數據模型

用戶模型

interface User {
  id: string
  name: string
  email: string
  avatar?: string
  department: string
  role: "user" | "developer" | "admin"
  joinDate: string
  favoriteApps: string[]
  recentApps: string[]
  totalLikes: number
  totalViews: number
}

競賽模型

interface Competition {
  id: string
  name: string
  year: number
  month: number
  startDate: string
  endDate: string
  status: "upcoming" | "active" | "judging" | "completed"
  description: string
  type: "individual" | "team" | "mixed"
  judges: string[]
  participatingApps: string[]
  participatingTeams: string[]
  rules: CompetitionRule[]
  awardTypes: CompetitionAwardType[]
  evaluationFocus: string
  maxTeamSize?: number
}

評審模型

interface Judge {
  id: string
  name: string
  title: string
  department: string
  expertise: string[]
  avatar?: string
}

interface JudgeScore {
  judgeId: string
  appId: string
  scores: {
    innovation: number
    technical: number
    usability: number
    presentation: number
    impact: number
  }
  comments: string
  submittedAt: string
}

🚀 部署指南

開發環境

# 啟動開發服務器
pnpm dev

# 建置專案
pnpm build

# 啟動生產服務器
pnpm start

生產環境

# 使用 Vercel 部署
vercel --prod

# 或使用 Docker
docker build -t ai-showcase-platform .
docker run -p 3000:3000 ai-showcase-platform

🔒 安全考量

API密鑰安全: 環境變數存儲敏感資訊
用戶權限: 完整的角色權限控制
數據驗證: 使用 Zod 進行表單驗證
XSS防護: 輸入內容安全處理

📈 性能優化

圖片優化: Next.js 內建圖片優化
代碼分割: 自動代碼分割和懶加載
快取策略: 靜態資源快取
CDN加速: 靜態資源CDN分發

🤝 貢獻指南

Fork 專案
創建功能分支: git checkout -b feature/AmazingFeature
提交變更: git commit -m 'Add some AmazingFeature'
推送到分支: git push origin feature/AmazingFeature
開啟 Pull Request

📝 更新日誌

v1.0.0 (2025-01)

✨ 初始版本發布
🏆 完整的競賽管理系統
🤖 AI智能助手整合
📊 管理員後台功能
👥 用戶權限管理

📄 授權條款

本專案採用 MIT 授權條款 - 詳見 LICENSE 檔案

📞 聯絡資訊

專案負責人: 強茂集團應用系統部
技術支援: 請透過企業內部管道聯繫
問題回報: 請在企業內部系統提交問題

🙏 致謝

Next.js - React 框架
Tailwind CSS - CSS 框架
Radix UI - 無障礙組件
DeepSeek - AI API 服務
Lucide - 圖標庫

強茂集團 AI 展示平台 - 促進AI技術創新與應用 🚀

README.md Unescape Escape

🚀 AI展示平台 (AI Showcase Platform)

📖 專案概述

🎯 專案目標

✨ 核心功能

🏆 競賽管理系統

👥 用戶管理系統

🏅 獎項系統

🤖 AI智能助手

📊 管理員後台

🛠 技術架構

前端技術棧

開發工具

📁 專案結構

🚀 快速開始

環境要求

安裝步驟

🔧 環境配置

DeepSeek API 設定

📖 使用指南

一般用戶

開發者

管理員

AI助手使用

🏗 開發指南

新增組件

新增頁面

狀態管理

樣式開發

📊 數據模型

用戶模型

競賽模型

評審模型

🚀 部署指南

開發環境

生產環境

🔒 安全考量

📈 性能優化

🤝 貢獻指南

📝 更新日誌

v1.0.0 (2025-01)

📄 授權條款

📞 聯絡資訊

🙏 致謝

README.md