學智 AI 平台
基於 Next.js 14 與 Ant Design 的全棧教育平台前端，整合數據可視化、權限管理及直接連接資料庫功能。
https://work-five-black.vercel.app
前往 BobEducation
Next.js
Full-stack
Dashboard
-
項目說明
學智 AI 平台前端應用
一句簡介
採用 Next.js 14 + React 18 + Ant Design 所構建的全棧教育平台前端，整合數據可視化、身份認證及 PostgreSQL 資料庫直連功能。
專案定位
本專案為「學智 AI 教育平台」之前端應用層，以現代化技術堆疊打造完整的教育管理介面。透過 React Server Components 實現伺服器端渲染與資料庫直連，並搭配 Ant Design 企業級 UI 元件庫，提供高效能、高可用性的教育管理平台。
主要功能
1. 技術架構
採用 Next.js App Router 架構，充分發揮伺服器端元件（Server Components）能力。
技術選型：
- Next.js 14 App Router 架構
- React 18 ＋ React Server Components
- Ant Design 5 企業級 UI 元件庫
- PostgreSQL 16 資料庫直連
- ECharts 6 ＋ Recharts 數據可視化方案
- Axios HTTP 客戶端
2. 數據可視化
內建豐富圖表元件，支援教育數據多維度呈現。
圖表能力：
- ECharts 高互動性複雜圖表
- Recharts 響應式圖表
- 數據儀表板與統計分析
- 實時數據更新
3. 身份認證與權限管理
具備完整登入與權限管理系統。
權限功能：
- 使用者登入／註冊
- 角色權限控制
- 會話（Session）管理
- 路由守衛（Route Guard）
4. 資料庫直連
Server Components 直接查詢 PostgreSQL，免除 API 中間層。
直連優勢：
- 縮短請求鏈路
- 伺服器端渲染時預先取得資料
- SQL 查詢靈活且高效
- 類型安全的資料庫操作
應用場景
線上教育平台
提供課程管理、學生管理、成績統計等核心功能之前端介面。
教育數據儀表板
透過多元圖表展示教學數據、學生行為分析及營運指標。
培訓機構管理系統
管理學員資料、課程安排、師資資源及財務數據。
企業內部培訓系統
為員工培訓提供學習進度追蹤、考核管理及證書發放等功能。
產品價值
- 利用 Server Components 直連資料庫，效能卓越
- Ant Design 元件成熟穩定，開發效率高
- 雙圖表庫（ECharts ＋ Recharts）全面涵蓋各類可視化需求
- 完整權限體系，支援多角色管理
- Next.js 部署便捷，可於 Vercel 一鍵上線