/Task-Manager

A Task (github issue) management tool built with React.js and Bootstrap5

Primary LanguageSCSS

Task-Manager

image

此專案為 Dcard 2023 Frontend Intern Homework，是一個串接 Github API，讓使用者能「新增」、「更新」、「搜尋」Task，並能夠更新 Task 狀態的專案管理工具。

功能

需使用自己的 Github 帳號登入

  • 登入(Github OAuth)
  • 登出
  • 顯示 task 列表 (即 issue 列表)
    • 此處顯示的是 assign 給使用者的所有 issue，issue 顯示的狀態為 issue 的 label，label 分別為：Open、In Progress、Done
  • task 篩選：依據狀態、建立時間、關鍵字內容篩選
  • 顯示 task 詳情頁
  • 編輯 task，可編輯 title、body、state
  • 刪除 task (即 close issue)
  • 新增 task
  • 新增/編輯欄位的表單驗證

畫面

  • Task List image

  • Task Info image

  • Edit Task image

安裝

以下將會引導你如何安裝此專案到你的電腦上。

請先安裝 Node.js，Node.js 版本建議為：18.12.0 以上

取得專案

git clone https://github.com/linyawun/Task-Manager.git

移動到專案內

cd Task-Manager

安裝套件

npm install

環境變數設定

請在終端機輸入 cp .env.example .env 來複製 .env.example 檔案，並依據 .env 內容調整相關欄位。

運行專案

npm start

開啟專案

在瀏覽器網址列輸入以下即可看到畫面

http://localhost:8000/

環境變數說明

  1. 請先申請 Github OAuth2 認證，到 Register a new OAuth application 註冊成為 OAuth 使用者
  • 必填欄位 “Application name”、“Authorization callback URL”、“Homepage URL”
    • Application name：Application 名字(隨意的字串，方便管理即可)
    • Authorization callback URL：請填入 http://localhost:8000/
    • Homepage URL：隨意的 URL
  1. 取得 Client ID 和 Client Secret，填入 .env 內的環境變數

相關教學可參考：申請 GitHub OAuth 權限紀錄

REACT_APP_CLIENTID = #github oauth app client ID
REACT_APP_CLIENTSECRET = #github oauth app client secret
...

資料夾說明

  • public - 靜態檔案放置處
  • src - JavsScript 檔案放置處
    • assets - scss 檔案與圖片放置處
    • components - React 元件放置處
    • pages - 頁面元件放置處
    • utilities - 共用函式放置處

專案技術

  • Node.js v18.12.0
  • React v18.2.0
  • React-router-dom v6.9.0
  • React-Hook-Form v7.43.5
  • React-markdown-editor-lite v1.3.4
  • Axios v1.3.4
  • Bootstrap v5.2.3
  • SweetAlert2 v11.7.3
  • marked v4.2.12

聯絡作者

你可以透過以下方式與我聯絡