AI 展示平台 (AI Showcase Platform)

一個現代化的 AI 應用展示和管理平台，支持競賽管理、評分系統和用戶互動功能。

🚀 功能特色

📱 應用管理

• 應用展示: 展示所有 AI 應用，支持分類和搜索
• 分頁功能: 每頁顯示5個應用，支持翻頁瀏覽
• 統計數據: 實時顯示總應用數、已發布數、已下架數
• 應用詳情: 查看應用的詳細信息、統計數據和用戶評價

🏆 競賽系統

• 競賽管理: 創建和管理不同類型的競賽（個人、團隊、混合）
• 評審系統: 支持多評審評分，包含創新性、技術性、實用性等維度
• 評分管理: 實時追蹤評分進度和統計數據
• 排名系統: 自動計算和顯示競賽排名

👥 用戶管理

• 用戶註冊: 支持用戶註冊和登錄
• 權限管理: 區分普通用戶、開發者和管理員權限
• 個人資料: 用戶可以管理個人信息和偏好設置

📊 數據分析

• 統計儀表板: 實時顯示平台使用統計
• 應用分析: 查看應用的瀏覽量、點讚數、評分等數據
• 競賽分析: 競賽參與度和評分統計

🛠️ 技術棧

前端

• 框架: Next.js 14 (React 18)
• 樣式: Tailwind CSS
• UI 組件: shadcn/ui
• 狀態管理: React Context API
• 圖標: Lucide React

後端

• API: Next.js API Routes
• 數據庫: MySQL 8.0
• ORM: 自定義數據庫服務層
• 認證: 自定義 JWT 認證系統

開發工具

• 包管理: pnpm
• 代碼格式化: Prettier
• 類型檢查: TypeScript
• 數據庫遷移: 自定義遷移腳本

📦 安裝與設置

環境要求

• Node.js 18.0.0 或更高版本
• pnpm (推薦) 或 npm
• MySQL 8.0 或更高版本

1. 克隆項目

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

2. 安裝依賴

pnpm install

3. 環境配置

複製環境變數範例文件：

cp env.example .env.local

編輯 .env.local 文件，填入您的配置：

# 數據庫配置
DB_HOST=your-database-host
DB_PORT=3306
DB_USER=your-username
DB_PASSWORD=your-password
DB_NAME=your-database-name

# 應用配置
NEXT_PUBLIC_APP_URL=https://your-domain.com
NEXT_PUBLIC_APP_NAME=強茂集團 AI 展示平台
NEXT_PUBLIC_APP_DESCRIPTION=企業內部 AI 應用展示與競賽管理系統

# JWT 配置
JWT_SECRET=your-jwt-secret
JWT_EXPIRES_IN=7d

4. 數據庫設置

運行數據庫遷移：

# 創建數據庫結構
node scripts/migrate-no-triggers.js

# 填充示例數據
node scripts/populate-sample-data.js

5. 啟動開發服務器

pnpm dev

訪問 http://localhost:3000 查看應用。

📁 項目結構

ai-showcase-platform/
├── app/                          # Next.js App Router
│   ├── admin/                    # 管理員頁面
│   ├── api/                      # API 路由
│   │   ├── admin/               # 管理員 API
│   │   ├── auth/                # 認證 API
│   │   ├── competitions/        # 競賽 API
│   │   └── user/                # 用戶 API
│   ├── competition/              # 競賽頁面
│   └── page.tsx                 # 首頁
├── components/                   # React 組件
│   ├── admin/                   # 管理員組件
│   ├── auth/                    # 認證組件
│   ├── competition/             # 競賽組件
│   └── ui/                      # UI 組件庫
├── contexts/                    # React Context
├── hooks/                       # 自定義 Hooks
├── lib/                         # 工具庫
│   ├── services/               # 數據庫服務
│   └── utils.ts                # 工具函數
├── scripts/                     # 腳本文件
│   ├── migrate-no-triggers.js  # 數據庫遷移
│   ├── populate-sample-data.js # 示例數據
│   └── check-*.js              # 檢查腳本
├── types/                       # TypeScript 類型定義
└── public/                      # 靜態資源

🔧 開發指南

數據庫管理

# 檢查數據庫連接
node scripts/check-server.js

# 檢查應用數據
node scripts/check-apps-count.js

# 清空數據庫
node scripts/clear-database.js

# 重新填充數據
node scripts/populate-sample-data.js

API 測試

# 測試應用 API
node scripts/test-pagination-api.js

# 測試分頁功能
node scripts/test-pagination.js

代碼規範

• 使用 TypeScript 進行類型檢查
• 遵循 ESLint 規則
• 使用 Prettier 格式化代碼
• 組件使用函數式組件和 Hooks

📊 數據庫設計

主要表結構

• users: 用戶信息
• apps: 應用信息
• competitions: 競賽信息
• judges: 評審信息
• app_judge_scores: 應用評分
• competition_apps: 競賽應用關聯
• competition_judges: 競賽評審關聯

關係設計

• 用戶與應用：一對多
• 競賽與應用：多對多
• 競賽與評審：多對多
• 評審與評分：一對多

🚀 部署

生產環境設置

1. 設置生產環境變數
2. 配置數據庫連接
3. 運行數據庫遷移
4. 構建應用：pnpm build
5. 啟動應用：pnpm start

Docker 部署（可選）

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

🤝 貢獻指南

1. Fork 項目
2. 創建功能分支：git checkout -b feature/AmazingFeature
3. 提交更改：git commit -m 'Add some AmazingFeature'
4. 推送到分支：git push origin feature/AmazingFeature
5. 開啟 Pull Request

📝 更新日誌

v1.0.0 (2024-09-19)

• ✨ 初始版本發布
• 🎯 應用管理功能
• 🏆 競賽系統
• 👥 用戶管理
• 📊 統計儀表板
• 🔧 分頁功能優化

📄 許可證

此項目採用 MIT 許可證 - 查看 LICENSE 文件了解詳情。

📞 聯繫方式

如有問題或建議，請聯繫：

• 項目維護者：[您的姓名]
• 郵箱：[your-email@example.com]
• 項目地址：[repository-url]

---

注意: 這是一個內部使用的 AI 展示平台，請確保在生產環境中進行適當的安全配置。