MERN

專案說明

• 網站功能: 建立了一個可供註冊登入的網站, 使用者可以註冊成為該網站的會員並提供兩種身份做選擇: 老師或者學生, 選擇老師可以在平台上發布、更改、刪除自己的課程。如果是學生的話可以選擇註冊課程

• 網站版面與功能說明:

  • 網站首頁:
  • 註冊會員功能:
    • 註冊成功畫面 並且註冊為講師:
  • 會員登入:
    • 會員註冊失敗(信箱錯誤):
    • 會員註冊失敗(密碼錯誤):
  • 登入後的講師profile:
  • 講師的課程: 可以看到自己有哪些課程、課程學生人數、價格與課程介紹
    • 講師新增課程功能與成功新增:
    • 講師更新課程功能與成功更新:
    • 講師刪除課程功能與成功刪除: 遇到兩個一樣的課名,只能刪除自己的,點選其他人的課程刪除會沒反應

• 登入後的學生profile:

  • 學生註冊課程與成功註冊:

• 學生註冊的課程頁面: 可以看到自己註冊了哪些課程、課程學生人數、價格與課程介紹

• 技術細節:

  • MERN專案技術 -> node.js 建構server-side 、 react建構client-side 、 mongodb做為資料庫管理系統 儲存用戶以及課程資料
  • React框架設計route以及網頁版並且用state lifting 技術去讓程式碼更簡潔好維護
  • 在每個特定功能選單頁面都會進行邏輯判斷使用者才會顯示或者可以使用特定的功能選單
  • 做身份認證與授權並且每個用戶都可以決定是要選擇註冊或者登入為instructor 或者 student

English Version

• Website Functionality: Created a website with registration and login capabilities. Users can register as members of the website and choose between two identities: teacher or student. Teachers can publish, edit, and delete their courses on the platform, while students can register for courses.

• Website Layout and Functionality Overview:

  • Homepage:
  • Member Registration:
    • Registration Success as Instructor:
  • Member Login:
    • Member Registration Failed (Incorrect Email):
    • Member Registration Failed (Incorrect Password):
  • Instructor Profile after Login:
  • Teacher's Courses:
    • Add Course Functionality and Success:
    • Update Course Functionality and Success:
    • Delete Course Functionality and Success: Encounters with duplicate course names will only allow deletion of the user's own courses; attempting to delete others' courses will have no effect.
  • Student Profile after Login:
    • Student Course Registration and Success:

• Technical Details:

  • MERN Project Technologies: Node.js for server-side development, React for client-side development, MongoDB as the database management system for storing user and course data.
  • Route and Web Page Design: Designed routes and web pages using the React framework and employed state lifting techniques to simplify code and maintenance.
  • User Role-Based Functionality: Implemented logic checks on specific feature menu pages to display or enable specific features based on user roles.
  • Authentication and Authorization: Implemented authentication and authorization, allowing users to choose between registering or logging in as instructors or students.