網站連結：https://gagio.ahwei777.tw
此為前端程式碼，後端部分請見 GaGiO-backend。
管理員功能測試：
帳號：admin@mail.com
密碼：Admin123
PS:請勿隨意更動權限，避免影響他人使用體驗
此專案接續開發自 learning-platform-frontend ，原團隊成員如下：
GaGiO 為一線上學習平台，使用者註冊後可購買有興趣的課程進行學習，教材內容包含影片或文字。亦可申請成為老師，於自行編訂教材後開設公開課程。
此作品為 Lidemy mentor-program-4th 的 Final Project ，主要為實作課程所學前後端相關技術。前端採用 React.js 開發，配合以 Express.js & Sequelize 建立的後端 API 實現前後端分離。
- 註冊會員
- 瀏覽已公開課程（關鍵字搜尋、自訂排序）
- 瀏覽老師介紹資訊
- 登入
- 編輯會員資料
- 加入課程至購物車
- 購買課程並結帳（模擬付款流程）
- 觀看已購買課程
- 查看已完成訂單
- 編輯老師介紹資訊（上傳大頭照）
- 新增／編輯課程資訊（上傳課程縮圖）
- 新增／編輯課程單元
- 瀏覽所有課程
- 編輯所有會員權限
- 瀏覽所有會員資料及已購買課程
- 前端框架
- React Hooks
- UI 框架
- 其他套件
- Antd-img-crop - 圖片上傳前裁切
- React Router - 管理路由
- Redux Toolkit - 管理元件共用狀態，處理非同步邏輯
- React-beautiful-dnd - 實現元素拖拉排序
- React-responsive-carousel - 首頁橫幅圖片輪播
- React-youtube - 內崁播放 Youtube 影片
- React-lazyload - 延遲載入圖片，優化使用者體驗
- React-image-webp - 依據瀏覽器支援度顯示 next-gen 格式圖片
- Styled-components - 主題配置／動態變更樣式
- Prettier - 統一程式碼格式
- 第三方 API
- Imgur - 圖片雲端儲存
- GitHub Action - commit 後自動化部署
- RWD - 網頁排版自適應主要瀏覽器
- 前端部署於 GitHub Page 並配合自訂網域。
- 將 404 page 改為 index.html ，避免子頁面重新整理後因無指定靜態資源而產生錯誤，實現完整 SPA。
可以關鍵字搜尋課程，並自訂排序方式。
會員可更改暱稱及密碼。
欲購買課程可選擇加入購物車或直接結帳，完成結帳後會收到訂單資訊，並可於訂單紀錄中查看。
已購買課程可於 "我的課程" 頁面中查看並進入上課，教材包含影片或文字（暫以 YouTube 影片做為 DEMO ）。
一般會員申請開課後即可新增課程，老師及課程資料都可再進行修改。
├── Homepage
│ ├── RegisterPage # 註冊
│ ├── LoginPage # 登入
│ ├── CourseListPage # 所有課程列表
│ ├── CourseInfoPage # 特定課程介紹
│ ├── CartListPage # 購物車
│ ├── CheckoutPage # 結帳
│ ├── MyCoursePage # 我的課程
│ ├── MePage # 帳號設定
│ │ ├── AccountSetting # 個人資料（變更暱稱/密碼）
│ │ └── OrderHistory # 訂單紀錄
│ ├── TeacherInfoPage # 老師介紹
│ ├── TeacherApplyPage # 申請開課（上傳大頭照）
│ ├── TeacherPage # 老師後台
│ │ ├── TeacherSetting # 老師資料（變更名稱/介紹/大頭照）
│ │ └── MyTeachCourse # 課程管理
│ │ ├── NewCourse # 新增課程
│ │ └── UpdateCourse # 編輯特定課程（變更狀態/名稱/金額/敘述），新增/刪除單元
│ │ └── EditUnit # 編輯特定單元（變更名稱/敘述）
│ └── ConsolePage # 管理後台
│ ├── ConsoleCoursesPage # 課程列表
│ └── ConsoleMemberPage # 會員管理
│ └── MemberDetailPage # 特定會員資料（變更權限）
├── src/
│ ├── components/ # 放置跨頁面共用元件
│ ├── constants/ # 放置常態設定如 theme, breakpoints
│ ├── img/ # 放置各頁面所使用圖片
│ ├── pages/ # 放置具完整功能頁面
│ ├── redux/ # 放置 Redux store & reducers
│ ├── routes/ # 放置主要路由及各子路由
│ ├── WebAPI/ # 串接後端 API
│ ├── App.css # 設定通用樣式及修正 UI
│ ├── App.js # 設定主要 layout 及路由
│ ├── index.js # 程式主要入口點
│ ├── setupTests.js # 測試相關設定
│ └── utils.js # 放置跨元件使用函式
├── package-lock.json
├── package.json # module 及 script 設定
└── README.md
- Primary
- main: #3483cd
- light: #70b2ff
- dark: #00579c
- text: #000000
- Secondary
- main: #f89f3c
- light: #ffd06c85
- dark: #c07000
- text: #000000
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | xs | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
- clone 此專案至本機
$ git clone https://github.com/ahwei777/GaGiO-frontend.git
- 安裝相依套件
$ npm install
- 在本機運行專案（預設 port:3000）
$ npm run start
本專案僅作為個人練習用途，註冊時請勿使用任何真實資料。另本作品所包含之圖片與內容不作任何商業用途使用。
- 1.0 - 2021.01.28
- 完成基本功能
- 1.1 - 2021.02.27
- 增加 lazyload 參數設定，增進瀏覽體驗（offset 提前載入，placeholder 正確定位，debounce 優化）
- LOGO 設計 - Freelogodesign, Favicon.io
- DEMO 圖片 - Pixabay, Pexels, Unsplash, Freepik
- DEMO 課程內容 - MDN web docs, Wikipedia, YouTube, Lidemy 程式導師計畫