首頁專案關於我

Teamie

Teamie 致⼒為學⽣及初⼊職場的新鮮人媒合專案夥伴,打造跨專業、跨地區的合作機會。

Next.js + React + Tailwind CSS + TypeScript + Headless UI + React Hook Form

Teamie 專案主視覺

成員

夥伴

行政財務

夥伴

設計行銷

陳子涵的照片

網站前端

夥伴

網站後端

夥伴

網站前端

時間軸

開始

2022/09

時程

進行中

結束

進行中

產出

使用者訪談

流程規劃

介面設計

網站

緣起

  加入此專案前的某一天,偶然在社群媒體上看到核心夥伴的貼文,內容包括專案簡介以及正在招募夥伴的訊息。這個專案的目標是想要打造一個平台以協助學生、社會新鮮人以及新創團隊,在這個平台上發布專案、招募夥伴、展示專案成果,促成跨專業、跨地區的合作機會。因為我自己有在求學階段注意到專案實作和跨領域合作的重要性,於是報名加入,期望能夠在參與專案的過程中提升自我能力,同時幫助到有相同需求的人們。


專案開發流程

使用者訪談

整理訪談大綱,內容包括自行撰寫訪談前的計畫說明、調整團隊夥伴列出的訪談問題順序、自行撰寫訪談後的感謝文案,完成後再由團隊夥伴接手去做訪談。

人物誌

所有團隊夥伴將訪談結果拆解成多個關鍵字並分類,每個人製作一個人物誌。大家一起投票選出最重要的資訊,整合成一個目標客群的人物誌。

功能規劃

根據人物誌的使用者需求與團隊夥伴們的期望,製作顧客旅程地圖,發散出各種可以做的功能,收斂成確定要做的功能,劃分數個版本與各版本的目標。網站初期版本以刊登專案的功能為核心目標。

主打功能

資料架構

針對需要儲存的資料製作資訊架構樹狀圖,規劃後端資料庫需要的資料表欄位與格式。

流程規劃

製作功能流程圖和介面流程圖,以描述頁面與功能的操作流程。平台相關頁面、專案一覽和資訊等頁面不需要登入,任何人皆可檢視,帳號相關頁面、專案新增與編輯頁面需要登入後才可使用。

品牌識別

和夥伴們討論後確定品牌調性關鍵字為"溫度與效率",參與平台名稱與標誌的發想和投票過程。

關於提米

介面設計

針對夥伴製作的介面設計稿提出建議,包括調整各區塊的位置和間距、 根據互動功能的實作方法建議調整設計稿畫面、說明響應式網頁設計的基本做法、根據重要度使用灰階或彩色等等。

後端開發

後端夥伴根據之前規劃的資料表欄位與格式,使用 Nest.js + PostgreSQL + Google Cloud 開發後端服務。


前端開發

使用 Next.js App router 作為網站框架。

製作畫面時使用 Tailwind CSS,以 Headless UI 為基礎自訂外觀製作客製化元件。如果需要管理較複雜的 className 再用 clsx。圖示選用 Feather Icons。

使用 TypeScript 管理資料型別。

所有表單都有利用 React Hook Form 檢查格式、顯示錯誤訊息、處理送出狀態。

使用 Zeabur 在一個專案中建立兩個前端服務,分別指定同一個 GitHub repository 的兩個分支,部署測試網站和正式網站。

閱讀後端夥伴提供的 Swagger 文件,利用 Postman 測試再串接 RESTful API,溝通調整 API 的功能和 JSON 內容格式。

登入畫面

專案資訊

個人資訊