godmmt / mern-app

My first MERN app.

This is my first MERN app.

• MongoDB - document database
• Express - Node.js web framework
• React - a client-side JavaScript framework
• NodeJS - JavaScript web server

mern-app's Issues

Refactor: 刪除Enroll頁面

Enroll頁面功能與All Courses頁面相同
故把功能移植到All Courses頁面後即可刪除

串接 subscribe-newsletter, unsubscribe-newsletter, forget-password 的APIs

Nodemailer

feat: modify footer styling with RWD

依照示意圖完成footer排版

• 上半部
• 下半部
• RWD

---

[ 上半部 ]
示意圖: 左->中->右

左
logo
description
(small icons)twitter/instagram/facebook/youtube

中
Topics
(子項目)HTML/CSS...

右
聯絡方式(地址/電話/信箱)

[ 下半部 ]
copyright

Feature: All Courses page UI

• 保留Banner背景圖
• 去掉副標題
• 搜尋欄位
• 可以顯示所有課程

feat: modify header styling with RWD

1. 最左側加一個 logo
2. header 裡面塞一個 navbar：其中包含 about us、course、postCourse
3. login、register、logout 移到最右側，並加上一個 user avatar，點擊進入 profile
4. 手機版時，將 navbar、login、register、logout、avatar合併成 hamburger menu

Feature: btn-req-loading

Originally posted by @Alanwei0502 in #40 (comment)

但是按鈕的部分建議可以做一個Loading，就是發出 request 之後，response 還沒回傳的期間都不可以點擊。
這個概念跟「防抖 debounce」、「節流 throttle」有點類似，避免client端瘋狂對server發請求。
你可以想一下這個要怎麼寫。不會沒關係，就發 issue 之後再來改～
備註：防抖節流也是面試常考題之一

Feature: register-component-role-setting

將註冊頁面的角色(role) 由原先 文字輸入 改成 下拉式選單
只有兩個選項(student / instructor)

創建課程的規則沒有被驗證

refactor: Add a new pages folder under src and put Home in it

畫面檔案都放在pages底下，e.g. Home, About, Course, Profile, etc.

Refactor: Component files structure

重構組件結構，並使用 .jsx 為副檔名，非組件檔案用 .js 即可，方便區分

• components
  • course
    • index.jsx
  • enroll
    • index.jsx
  • home
  • login

Feature: Contact page UI

Feature: Profile page UI

使用者登入後於導覽列出現"Profile"btn
點擊進入profile頁面
頁面內容是呈現使用者的個人資料

預計項目有:

1. 姓名
2. Email
3. 角色Role
4. 註冊日
5. （未來補上功能）上傳個人大頭照

統一API回傳格式

{
  "success": "boolean",
  "value": "object",
  "message": "string",
}

將 passport 自定義設置檔案(config)在主應用程式(index.js)初始化， 非 index.js 的檔案就不需要再各自引入， 而是直接使用 passport 物件即可。

將 passport 自定義設置檔案(config)在主應用程式(index.js)初始化， 非 index.js 的檔案就不需要再各自引入， 而是直接使用 passport 物件即可。

主線任務失敗 😥😣😭
不曉得要怎麼做比較好～
先列入待解決 issue，未來再試試看。

Originally posted by @godmmt in #99 (comment)

串接：取消訂閱電子報API

API: api/mailer/unsubscribe-newsletter

body

{
  "email": "直接用 queryString 上的被轉成base64的email"
}

Feature: add refresh-token and axios config

feat: home page content

• feedback (WHAT OUR HAPPY STUDENT SAY)
• FEATURED COURSE
• cards (特別課程卡片)
• TESTIMONIALS (Trusted by Thousand of Students and Tutors) (輪播學生感言)
• 訂閱電子報

課程詳細頁面權限問題

不論學生或老師應該都要可以進到「課程詳細頁面」，只是老師的畫面沒有enroll按鈕

Refactor: add file extension in all import path and remove NODE_OPTIONS='--experimental-specifier-resolution=node' in script

Reference:

1. https://stackoverflow.com/questions/72491392/when-do-we-need-to-add-file-extension-when-importing-javascript-modules
2. https://dmitripavlutin.com/ecmascript-modules-nodejs/

使用 react-toastify 取代 window.alert

npm

playground

Feature / All Course: Sending Waiting Notification During API Data Retrieval

Contact 頁面的地圖大一點

feature: Course Content UI

• #65
• #71

對於登入後才能查看的page，新增 ProtectRoute

Profile, PostCourse

refactor: Initialize passport in the main application (index.js)

主線任務

將 passport 自定義設置檔案(config)在主應用程式(index.js)初始化，
非 index.js 的檔案就不需要再各自引入，
而是直接使用 passport 物件即可。

分支任務

• 整理首頁的所有 Button 功能，刪除沒有用處的 Button
• Header Logo點擊除了回到首頁後，也提供回到頁面頂端功能（就像Youtube）
• 所有 pending 的吐司不可以被人為關閉，等成功失敗吐司回來才可以被人為關閉
• 製作 top 懸浮按鈕，讓使用者可隨時回到頁面頂端

Feature: login & register modal

• 登入功能
• 註冊功能
• 畫面styling

feat: 首頁的 start course 和 start learning 按鈕功能

isLogin
=> true: navigate to profile page
=> false: pop out login modal

Profile 裡面的 courses Api response 還沒回來前，會閃一下「沒有課程前往post course」的文字

2023-09-08.12.47.35.mov

Bug: Link doesn't work after change react-18 render way

可能跟react-router-dom的版本有關，或許升級到 version 6 看看。

請參考 Link is not working in react-router-dom in version 5.3.0. Please anyone resolve this issue

未登入者一進入 private routes 後要先導入 Modal 讓使用者登入

重複使用Modal組件
不讓使用者可以關閉Modal

• 關閉的icon要隱藏
• 點取Modal backdrop的關閉Modal功能也要隱藏

等使用者登入後才渲染底下的Routes

所有頁面內容請加上最小高度

Feature: Post Course page UI

Post Course page只有在instrutor登入後才會於nav bar出現按鈕進入

Post Course頁面可以讓講師註冊自己要開課的課程內容
表單可以讓使用者填入:

1. 課程標題
2. 課程內容
3. 課程價格
   (課程影片?)

最後是"提交按鈕"讓使用者送出表單

feat: 新增下架課程與刪除課程的功能

刪除功能：

1. 是對DB進行軟刪除，不要真的把資料刪掉
2. 刪除後的課程，學生老師都搜尋不到

下架功能：

1. 必須新增一個欄位（e.g. isLaunched）開關，控制該課程是否上下架
2. 學生找不到下架的課程
3. 該課程老師找得到下架的課程，並且有權限可以控制

Feature: My Courses page UI

My Courses頁面的內容是"我的課程"

• 使用者登入後才會於導覽列出現"My Courses"btn
• 登入者身分:學生
  呈現所有學生購入的課程
• 登入者身分:講師
  呈現所有講師創辦的課程
• 功能 -> 詳見 #42 / #53
• Styling

Feature: Register add validation for role

Add validation for the dropdown menu on the registration page.

value改為0 & 1，取代原先直接輸入的student & instructor -->先不做

似乎不需要做驗證(?)

Feature: About page UI

切換頁面時，起始位置應位於頁面頂部

bug: unsubscribe-newsletter page is not found in PROD

feat: It's not recommended to use a page for login or register, use a modal for it instead.

feat: 新增購物車功能，並串接金流購買課程

1. 購物車畫面
2. 串接藍新或綠界功能

manage currentUser in custom hook (e.g. useCurrentUser)