lab.huangyouci.com 交換日記是一個以「文字」與「交換」為核心的雙向數位互動實驗平台，旨在速食社交時代找回真誠且具深度的交流方式。
開發背景與痛點解決
在當前按讚只需一秒、訊息已讀不回的碎片化社交時代，人與人之間的數位溝通往往流於表面與單向輸出。大多數個人網站或部落格僅僅是站長單向的資訊發布，缺乏與讀者之間真正具備溫度與沉澱的交流。
為了解決這個社群痛點，我設計並實作了這個「數位互動實驗室」。它摒棄了傳統社群平台的按讚與即時留言功能，而是基於「價值交換」的哲學——「想看見他人的真實，先分享自己的真實」，強制要求雙方以文字進行有深度的日記交換，重新搭起一條慢節奏但高密度的互動橋樑。
產品核心功能特色
1. 以文換文的解鎖機制
這是本專案的核心遊戲規則。訪客進入網站時無法直接閱讀站長的日記，內容預設為鎖定狀態。訪客必須先沉澱心情，透過編輯器撰寫並發布自己今日的日記，才能即時解鎖並閱讀站長當天的日記。此機制每日重置，藉此鼓勵使用者培養持續記錄與自我對話的習慣。
2. 沉浸式寫作與編輯體驗
為了讓使用者能專注於文字本身，寫作介面進行了極簡化設計。全站採用低對比度的深色系（Dark Mode）視覺風格，營造如同深夜書寫般的靜謐氛圍，降低螢幕光線對思考的干擾；同時整合了輕量級 Markdown 渲染引擎，支援標題、列表、粗體等語法，讓日記排版井然有序。
3. 雙向回饋的交流迴圈
日記不僅是寫給自己的紀錄，也是寫給站長的一封信。使用者可以隨時回顧過去已解鎖的日記歷史，列表中會清楚標示哪些日記已收到站長的回覆。當站長回覆後，系統會引導使用者進入「雙欄對照」的閱讀畫面，左側為當初的日記，右側呈現站長的回饋，形成完整的對話脈絡。
4. 專屬管理者的雙欄審閱主控台
為了解決管理者審閱與回覆多個讀者日記時的效率問題，我為後台量身打造了高效審閱系統。採用雙欄分割畫面（Split View）設計，左欄顯示讀者的日記內容，右欄可即時撰寫並發送回饋，管理者無需在不同頁面間反覆跳轉，大幅提升回覆效率。
視覺與互動設計
- 聚光燈登入頁面：首頁登入畫面實作了跟隨滑鼠移動的聚光燈（Spotlight）特效，在漆黑的背景中照亮輸入框，象徵在黑暗中尋找共鳴的微光。
- 響應式佈局設計：從電腦大螢幕的雙欄對照閱讀，到行動裝置的單欄滑動適配，皆經過細緻的響應式網頁設計（RWD），確保一致的閱讀體驗。
開發技術概要
- 主要技術：Next.js 14 (App Router), Firebase (Firestore / Authentication), CSS Modules, React Hooks
- 實踐重點：利用 React Server Components 實現極致的首頁載入效能，並整合 Firebase Auth 與 Firestore 進行即時權限控管與安全日記資料讀寫；使用 React Context API 管理跨組件的登入與解鎖狀態。