交換日記 (Exchange Diary)

一個以「文字」與「交換」為核心的數位互動實驗室。

專案緣起與核心概念

在這個按讚只需一秒、訊息已讀不回的速食社交時代，「Exchange Diary」試圖找回網路初期那種真誠且具深度的交流方式。這不是一個單向輸出的部落格，而是一個基於 「價值交換」 的雙向平台。核心哲學很簡單：「想看見他人的真實，先分享自己的真實。」

功能

交換機制：Write to Unlock

這是本專案最核心的遊戲規則。訪客無法直接閱讀站長（Host）的日記內容，內容預設為「鎖定」狀態。

• 以文換文：用戶必須先沉澱心情，透過編輯器撰寫並發布自己今日的日記。
• 即時解鎖：一旦系統確認用戶完成今日日記，站長的日記內容將立即解鎖呈現。
• 每日重置：這個機制每日刷新，鼓勵用戶培養持續記錄與自我對話的習慣。

沉浸式寫作體驗

為了讓用戶專注於文字本身，介面設計極簡化：

• 黑夜模式 (Dark Mode)：全站採用低對比度的深色系設計，提供如深夜書寫般的靜謐氛圍，降低螢幕光線對思考的干擾。
• Markdown 支援：整合了輕量級 Markdown 渲染引擎，支援標題、清單、粗體等語法，讓日記排版井然有序。

雙向回饋迴圈

這不只是寫給自己的日記，也是寫給站長的一封信。

• 歷史紀錄與狀態：用戶可以隨時回顧過去的日記，列表中會清楚標示哪些日記已收到站長的回覆。
• 查看回饋：當站長閱讀並回覆後，用戶會在介面上看到通知。點擊進入後，左側顯示當初的日記，右側則呈現站長的回饋，形成完整的對話脈絡。

站長主控台

專為管理者打造的高效審閱系統，不對外公開：

• 用戶管理：即時搜尋與瀏覽所有參與交換日記的讀者。
• 高效審閱模式：採用 「雙欄對照」 (Split View) 設計。左欄顯示讀者日記，右欄即時撰寫回饋，無需在頁面間跳轉，大幅提升回覆效率。
• 即時發布：站長亦擁有一套獨立的日記發布系統，內容即時同步至所有已解鎖用戶的終端。

視覺與互動設計

• 聚光燈登入頁：Landing Page 實作了跟隨滑鼠移動的聚光燈 (Spotlight) 特效，象徵在黑暗中尋找共鳴的微光。
• 響應式佈局 (RWD)：從電腦的大螢幕雙欄閱讀，到手機端的單欄滑動，皆經過細緻的適配調整。

技術架構

本專案採用現代化 Serverless 架構構建，確保高效能與易維護性：

• Core Framework: Next.js 14 (App Router) - 利用 React Server Components 實現極致的首頁載入速度。
• Database & Backend: Firebase Firestore - NoSQL 資料庫處理日記與用戶資料的即時存取。
• Authentication: Firebase Auth - 安全整合 Google 登入機制。
• State Management: React Hooks (Context API) - 處理全域用戶狀態與權限控管。
• Styling: CSS Modules (Nested CSS) - 結構化的樣式管理。
• SEO Optimization: 動態生成 Open Graph Meta Tags，優化社群分享預覽圖 (OG Image)。