在今天，我會把整個系統的運作邏輯整理清楚，這篇文章會介紹專案目的、整體架構、使用技術，以及我設計的資料流。

一、專案目的

FlowNest 是一個讓我自己「專心做完一件事」的工具，也希望能讓別人一起用；我常覺得專注這件事太困難，明明想做，卻沒有實際執行；所以我想做一個能「陪你專心、也幫你紀錄」的應用：

• 當開始一段專注，它會幫你計時、顯示 3D 呼吸動畫。
• 結束後，AI 會自動送上一句鼓勵的話、一張療癒的圖片。
• 可以把成果發到留言牆，看到其他人今天完成了什麼，也可以傳送訊息給他人。
• 就像一個安靜又有連結的專注社群。

整個 FlowNest 的概念是：

專注 → 回饋 → 分享 → 激勵彼此

這四個步驟形成一個循環，讓「專心」不再只是個人行為，而是一種社交能量。

二、使用技術

採前後端分離的PWA架構，可以在電腦或手機上直接使用。

• 前端：
  • Vue 3（Composition API）+ TypeScript + Vite
  • Tailwind CSS 控制版面與顏色設計，Vue Router 管理頁面切換
  • Pinia 處理登入狀態與任務資料
  • Three.js 做 3D 呼吸球動畫
• 後端：
  • Firebase Authentication：登入、註冊、重設密碼
  • Firestore Database：存放任務紀錄、留言牆貼文、使用者資料
  • Storage：保存 AI 生成的圖片與頭像
  • Firebase Cloud Functions：串接外部 AI API
• AI 模組與 API 來源(都透過hugging face)：
  • 文字生成（鼓勵語句）→ zai-org/GLM-4.6
  • 圖片生成（療癒插畫）→ stabilityai/stable-diffusion-xl-base-1.0
• 部署：
  • 前端與後端都使用 Vercel + Firebase Hosting，自動化部署（push → build → 上線）。

三、資料流程與應用邏輯

整個應用的流程主要分成四個核心路徑：

1. 專注任務 → 成果生成

1. 使用者進入計時頁，選擇 30、45 、60或自訂分鐘數後開始專注。
2. 若已登入，前端會先在 Firestore 建立一筆「進行中任務」。
3. 倒數同時啟動 Three.js 動畫（3D呼吸球）。
4. 時間結束後，前端呼叫 Cloud Functions：
   • 向 GLM-4.6 API 發送 prompt，生成鼓勵文字。
   • 向 Stable-Diffusion-XL API 發送 prompt，生成圖片。
5. 生成完成後，系統會：
   • 將文字與圖片 URL 一起更新到該任務紀錄中。
   • 在畫面顯示「任務完成」畫面，附上 AI 的文字與圖片。

2. 成果發布 → 社群留言牆

1. 使用者在完成畫面點「分享至留言牆」。
2. 前端把任務內容（描述、鼓勵語、圖片、完成時間等）打包成一筆貼文，寫進 Firestore 的 posts 集合。
3. 所有登入的使用者在留言牆頁面都會即時看到這筆貼文(使用 Firebase 的 onSnapshot 監聽機制)。
4. 使用者可以在留言牆對貼文按讚或留言，形成簡單的互動回饋。

3. 追蹤與社群圈

1. 每個使用者可以追蹤其他人（Firestore 中的 follows 集合）。
2. 在「社群圈」頁，只會顯示你追蹤的對象貼文，類似 Dcard 好友圈。
3. 如果完成任務並發布，追蹤你的朋友會立即看到新的內容。

4. 個人帳戶與 AI 頭像

1. 帳戶設置頁整合：顯示名稱編輯、重設密碼、AI 頭像工作室。

2. 使用者輸入 prompt（例如「明亮風格、藍色背景」），

   前端呼叫 Hugging Face Stable Diffusion API 生成頭像。

3. 確認後上傳至 Firebase Storage 並更新使用者資料，全站頭像即時刷新。

4. 如果快取還沒更新，系統會提示「重整即可看到最新頭像」。

四、FlowNest 的兩條主要資料流

下圖整合了前面提到的四條流程，分為「專注任務資料流」與「社群互動資料流」兩側。
(可以看到使用者從專注開始，到 AI 回饋、再到社群分享，構成完整的回饋循環。)

五、成果與連結

從構想到落地，系統已經能完整運作；以下是 FlowNest 的原始碼與實際上線版本，歡迎大家體驗：

Github

Flownest