此專案的主題為線上教育平台
使用者可以：
- 註冊及登入
- 修改會員資料
- 課程加入購物車
- 購買課程
- 觀看購買課程
管理員可以：
- 製作課程
- 改變使用者權限
此為前端 repo，後端部分請見 後端 repo。
- React
- React-Router
- Redux
- styled-components
- nanoid
- react-beautiful-dnd
- ant design
- prettier
├── Homepage
│ └── 後台管理(ConsolePage) # 管理功能的源頭
│ ├── 課程列表(ConsoleCoursesPage) # 列出該使用者目前所有課程
│ │ ├── 新增課程(NewCoursePage) # 在此頁面新增課程
│ │ └── 課程管理(SpecificCoursePage) # 特定課程的管理頁面
│ │ ├── 課程設定(CourseSettingPage) # 編輯課程名稱、金額、狀態等等
│ │ └── 編輯單元(EditUnitPage) # 特定單元的管理頁面
│ └── 會員管理(ConsoleMemberPage) # 列出所有網站所有會員
│ └── 會員資料(MemberDetailPage) # 特定會員的詳細資料
├── src/
│ ├── containers/ # [暫時]放置各 Routes
│ ├── pages/ # 放置各完整功能頁面
│ ├── components/ # 放置跨頁面共用元件
│ ├── redux/ # 放置 Redux store & reducers
│ ├── constants/ # 放置不會頻繁改動的設定如 theme, breakpoints
│ ├── styles/ # 放置樣式檔
│ ├── index.js # 程式入口
│ ├── serviceWorker.js
│ └── setupTests.js # 測試相關設定
├── public/img # 放置靜態檔如圖片
├── WebApi.js # 串接後端 API
├── utils.js # 放置功能或跨元件使用函式
├── package-lock.json
├── package.json # module 設定檔
└── README.md
User Flow, Wireframe: Figma
Ant Design - The world's second most popular React UI framework
- Primary
- main: #689f38
- light: #99d066
- dark: #387002
- text: #000000
- Secondary
- main: #fff59d
- light: #ffffcf
- dark: #cbc26d
- text: #000000
- 中文
- Noto Sans TC
- 英文
- Roboto
font-family: Noto Sans TC, Roboto, arial, sans-serif
參考 Breakpoints · Bootstrap v5.0
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |