Vue.jsTailwind CSSSupabasePiniaViteRealtimePostgreSQLOAuth
SheetChat
這是一個復刻 Google Sheets 介面的即時聊天應用。核心概念為「大隱隱於市」，利用 Vue 3 與 Tailwind CSS 的高度客製化能力，將聊天功能隱藏在試算表表格中。除了極致的視覺偽裝，更整合了 Supabase Realtime 技術實現零時差通訊，並具備每日自動銷毀訊息的機制，兼顧趣味、實用與隱私安全。
使用技術
前端框架Vue 3 (Composition API)
視覺樣式Tailwind CSS (UI 復刻)
後端與資料庫Supabase (Realtime, PostgreSQL, Auth)
上線部署Netlify
第三方登入系統Google OAuth
負責角色
此專案由我獨立開發完成，旨在展示對 Vue 生態系與後端整合技術的掌握。
- ◆UI 介面設計與實現
- ◆前後端整合架構設計
- ◆即時通訊架構設計 (Supabase Realtime)
- ◆自動化訊息清理腳本開發
- ◆前端響應式狀態管理規劃
解決的問題
在開放式環境中，傳統通訊軟體的對話氣泡容易引起旁人注意。SheetChat 解決了開放環境中私密溝通的難題，並透過以下方式強化安全性：
極致視覺偽裝
完美融入辦公軟體視覺，從工具列到選取效果皆精準復刻。
打破對話框框架
訊息以儲存格形式呈現，讓聊天內容看起來像是報表數據。
確保內容不留痕跡
所有訊息僅保留一天，凌晨自動清空，徹底執行隱密初衷。
快速身分驗證
整合 Google 一鍵登入，以協作者身分自動帶入頭像與名稱。
專案成果
技術亮點
- 利用 Supabase Realtime 實現毫秒級的訊息同步
- 精準控制 Tailwind CSS 樣式，達到與 Google Sheets 高度一致的視覺效果
- 採用 Pinia 集中管理複雜的介面狀態與協作者資訊
產品特色
- 每日凌晨 03:00 自動銷毀資料，具備極高隱私度
- 無需繁瑣註冊，支援 Google 帳號直接登入
- 創新的表格式訊息呈現方式，提供獨特的閱讀體驗
開發成果
- 成功復刻複雜的辦公軟體 UI，展現極高細節要求的開發能力
- 將即時通訊功能隱藏於日常工具中，具備高度創意與話題性
- 完成從登入、即時對話到資料清理的完整全棧開發流程