|
- 專案網址: https://gantt-chart-phi.vercel.app/
- 測試帳號: [email protected]
- 測試密碼: 123456
「GanttChart」讓你能夠直觀地在線上創建和分享你的工程甘特圖。
- Drag & Drop: 拖曳任務時間和任務順序，提升編輯效率
- 顏色自定義: 為不同的任務選擇個性化的顏色標記
- 即時編輯: 簡單的新增和刪除任務，方便調整專案任務
- PDF導出: 一鍵將你的甘特圖轉換為PDF格式
- 歷史紀錄頁面: 使用 Firebase Firestore 資料庫，儲存不同工程專案
- 會員登入系統: 使用 Firebase Authentication 作為會員登入登出功能
- 前端開發: 使用 React、Redux toolkit、styled-components，並實踐 RWD、reusable React componet
- 後端開發: 使用 Firebase 服務開發資料庫、會員系統等
- 雲端部屬: 使用 Vercel 進行雲端部屬
- 開發工具: 使用 Git/GitHub 做版本控管
以 create-next-app 建立專案目錄基礎分立 src、public，其中 src 之中分立 components、hooks、lib、pages、redux、styles 等子目錄
- components: 包含所有 UI 組件，如表單、按鈕及其他元件
- hooks: 自定義 React hook，用於實現各種功能如會員認證或資料庫管理
- lib: 主要為 Firebase 的配置和初始化
- redux: 包含 Redux 動作，用於狀態管理
- styles: 儲存 Styled Components 的元件樣式，按組件分類
以 Git 為基礎進行開發
- SPA 路由與頁面結構
- 使用 Next.js 處理 SPA（單頁應用）的路由需求
- 核心頁面包括甘特圖（Gantt Chart）、歷史紀錄、註冊頁面等，由 /pages 目錄下的對應 JS 文件控制
- 會員系統和驗證
- 利用 Firebase Authentication 實現用戶註冊、登入和登出功能
- 自訂 Hook useAuth 管理認證狀態並提供跨組件的登入狀態共享
- 資料庫和 Firestore 整合
- 使用自定義 Hook 如 useFirestoreData 和 useProjectData 來處理與 Firebase Firestore 的數據交互
- useFirestoreData 獲取用戶資訊和項目數據；useProjectData 負責管理項目相關任務和日期的狀態
- Redux Toolkit 狀態管理
- 使用 Redux Toolkit 管理應用的狀態，如日期和任務數據
- 利用 actions 和 reducers 更新和同步前端的狀態，例如 dateAction 和 taskAction
- 功能性元件
- 元件如 Calendar、TaskInput、Header 等負責呈現 UI 並與用戶互動。
- 使用 styled-components 定義元件的風格，例如 Button.styled.js 和 Header.styled.js，以確保應用的視覺一致性
- 進階功能與互動
- 提供 PDF 導出功能，利用 html2canvas 和 jspdf 套件將甘特圖頁面轉換為 PDF 文件
- Drag & Drop
- 使用 useState 和 useEffect 管理組件狀態與生命周期函數。useState 用於存儲任務的尺寸和位置，useEffect 用於根據任務的起始日期和結束日期計算這些尺寸。
- 使用原生 DOM 事件處理（mousemove 和 mouseup）實現任務的拖放功能。在用戶拖動任務兩端時，動態更新任務的寬度和位置，並在拖放結束後更新任務的起始和結束日期。
- 使用 JavaScript 原生 Date 對象計算任務的持續時間和起始/結束日期。根據用戶操作動態計算並更新日期，確保日期計算的準確性和即時性。
- 使用 HTML5 Drag and Drop API 實現任務的拖曳排序功能。通過 onDragStart、onDragOver 和 onDrop 事件處理函數，實現任務的拖放操作。使用 dataTransfer 存儲拖動任務的索引，並在 onDrop 時更新任務順序。
- 利用 Next.js 框架開發，以 React 為基礎，實現服務端渲染（SSR）和靜態站點生成（SSG），優化性能和SEO。
- 使用 Styled Components 在 React 組件中撰寫 CSS，提高元件的可重用性和封裝性
- 使用 Redux Toolkit 管理應用的狀態，包括任務和日期數據，使狀態管理更簡潔有效
- 使用 Firestore 作為非關聯式資料庫，存儲用戶數據和專案任務
- 利用 Firebase Authentication 實現用戶認證功能，包括註冊、登錄和登出
- 使用環境變數來管理敏感設定
- 使用 Vercel 進行部署
- 使用 Git 進行版本控制
- 使用 Create-next-app 快速搭建 Next.js 應用框架
- 使用 React Toastify 提供交互反饋，如成功登錄、註冊通知等
- 集成 jspdf 和 html2canvas 實現頁面到 PDF 的轉換，方便用戶導出專案的甘特圖
「GanttChart」讓你能夠直觀地在線上創建和分享你的工程甘特圖。
-
直觀的拖放操作管理任務時間，調整任務排列實現靈活專案規劃
-
可以新增、刪除任務，隨時根據專案需求增加或移除任務
-
-
選擇不同顏色，透過顏色區分不同任務項目
-
一鍵輸出網頁內容為 pdf
-
透過儲存檔案 / 另存新檔，儲存不同專案內容
-
