這是一個使用 React 建立的前端專案，希望整合贈物社團上不一致的資訊規格與繁瑣的贈送流程，打造一個方便管理的贈物平台。
- Demo - 專案展示
- Initial - 專案緣起
- Features - 專案功能
- Technical Skills - 專案使用的技術
- Content - 專案內容
- Execution - 專案執行
- Links - 專案相關連結
- Contributor and Responsibility - 開發人員與職責分工
Trade On 贈物網站：前台沒有權限限制，後台僅限管理員進入
管理員
帳號：admin123@mail.com
密碼：admin123
這個專案源於程式導師實驗計畫第五期的期末專題，以 Jane 發想的贈物平台做為主題。
在斷捨離物品時，雖然有 FB 社團提供大家贈物，不過發文與留言格式混亂，而且一次贈送 / 索取多個物品，自己還要另外紀錄每個物品的交易情況。
為了解決上述問題，我們建立了 Trade On 贈物平台。Trade On 有格式統一的物品資訊，以及清楚的贈物流程，可以方便管理每一筆贈物 / 索物交易。另外，我們還有提供交易的一對一留言功能，增進會員的贈物 / 索物使用者體驗。
專案核心價值
- 對於贈物者：減少贈物的時間成本，能夠輕鬆上架物品，並且方便管理物品資訊
- 對於索物者：快速瀏覽格式一致的物品資訊，方便找到自己需要的物品
- 對於雙方：直接留言互動讓溝通更方便，以及藉由清楚的贈物 / 索物紀錄，更好掌握交易進度
-
前台
- 贈物物品展示
- 新增、編輯贈物物品
- 成立交易，包含索取者留言、贈物者決定受贈者
- 查看交易紀錄，可透過交易類別（贈物、索物）與交易進程（待填資料、待付運費、交貨中、已完成、已取消）做篩選
- 管理單筆交易，可推進交易進程、與交易者聯繫
- 查看個人資料，瞭解他人的贈與、索取紀錄
- 編輯個人資料，包含更改密碼、編輯大頭照、設定個人交易偏好
- 查看常見問題，瞭解贈物網站的交易流程
- 會員登入與註冊
-
後台
- 會員權限管理，包含更改身份（一般會員、管理員）、更改發文與留言權限
- 贈物文管理，可上架或下架贈物文
- 物品分類管理 (CRUD)
- 常見問題管理 (CRUD)
| 套件 | 敘述 |
|---|---|
| React Hooks | 具有彈性的 JavaScript 函式庫，用以建立使用者介面 |
| React Router | 使用 HashRouter 建立路由 |
| styled-components | JSX 語法撰寫 CSS 樣式 |
| Formik | 表單函式庫，幫助管理表單狀態 |
| Yup | 設置表單驗證規則 |
| React Slick | 圖片輪播功能 |
| slick | 圖片輪播功能 |
| react-responsive-carousel | 圖片輪播功能 |
| react-images-uploading | 圖片上傳功能 |
| react-image-crop | 圖片裁切功能 |
| jwt-decode | 解碼 Base64Url 編碼的 JWT token |
| axios | HTTP 請求工具，可以用在瀏覽器和 node.js 中 |
| sweetalert2 | 替代 JavaScript 原生的彈跳視窗 |
| 其他 | 敘述 |
|---|---|
| prettier | 統一程式碼格式 |
| ESLint | 統一程式撰寫風格 |
| Netlify | 前端部屬工具 |
| Figma | 設計稿繪製 |
| miro | User Flow 與 Wireframe 繪製 |
平台使用者分為一般會員和管理員，一般會員可在前台網站「贈物」、「索物」、「查看交易紀錄」、「與交易者聯繫」、「編輯個人資料」，而管理員則可以在後台針對「會員」、「贈物文」、「物品分類」以及「常見問題」做管理。
前台
-
登入
-
新增贈物文
-
索取者留言索物
-
贈物者決定受贈者，同時成立交易紀錄
-
交易過程
-
索物者視角，主要推進交易進程
-
贈物者視角，等待索物者推進交易進程
-
-
編輯、查看個人資料
後台
-
管理會員權限、上架與下架贈物文
-
新增、編輯、刪除物品分類
npm install 安裝專案所需套件
npm start 啟動專案
- 負責團隊資源協調與協作機制建立，實踐各階段的產品開發目標
- 負責前台功能開發，包含新增或編輯贈物文頁、個人資料頁、交易紀錄頁、交易詳情頁、登入頁、註冊頁
- 協同前台功能開發，包含編輯個人資料頁、常見問題頁
- 協同後台管理常見問題頁的功能開發
- 協同團隊建立 router
- 協同團隊進行 Netlify 部署
- 協同團隊確立專案規格（User Story、設計稿）
- 負責前台功能開發，包含禮物貼文頁、常見問題頁
- 負責後台功能開發，包含會員管理頁、贈物文管理頁、分類管理頁、常見問題管理頁
- 協同團隊建立 router
- 協同團隊確立專案規格（User Flow、Wireframe、設計稿）
- 負責前台編輯個人資料頁的功能開發
- 協同前台功能開發，包含物品圖片上傳、表單驗證
- 協同團隊建立 router
- 協同團隊進行 Netlify 部署
- 協同團隊確立專案規格（User Flow、Wireframe、設計稿）
- 負責後端的開發，包含
- 登入、註冊，編輯使用者資料，包含密碼修改、頭像上傳等
- 贈送文章的刊登、編輯與刪除
- 新增、編輯或刪除刊登文上的留言和回覆，以及交易進程中 1:1 的留言與回覆
- 建立或取消交易（會依照流程階段進行限制取消的機制）
- 後台管理員身份驗證 endpoint、發文和留言權限操作等功能
- 負責建立資料庫架構與設定種子資料
- 進行 AWS EC2 部署，並設定 nginx 和 pm2
- 協同團隊確立專案規格（User Flow、Wireframe、設計稿）