/ Development

Gridos 螢跡

Timeline

2026

Tech Stack
React
Gridos 螢跡

Overview

以視覺化回饋為核心的習慣追蹤應用，靈感源自 GitHub 貢獻圖。採用玻璃擬態 UI 設計，將成長足跡轉化為直觀的熱力圖與連續紀錄。

Gridos 螢跡

「我們重複執行的行為造就了我們。因此，卓越不是一個行為，而是一個習慣。」

螢跡 Gridos：由每一道微光，記錄成長的軌跡。

📖 專案簡介 (Introduction)

Gridos (Grid + OS) 是一個專注於視覺化回饋的習慣追蹤應用程式。

設計靈感源自於 GitHub 的貢獻圖 (Contribution Graph)，我們深信 「可視化的進步」 是維持自律最強大的動力。透過直觀的熱力圖與互動式介面，Gridos 將枯燥的打卡轉化為富有成就感的視覺體驗，協助使用者建立並維持長期的正面習慣。

🚀 要解決的問題 (Problem Solved)

建立與維持新習慣往往面臨以下挑戰：

  1. 缺乏即時回饋：每天的努力容易被遺忘，難以感受到長期積累的價值。
  2. 動力難以維持：缺乏明確的進度指標，容易在幾天後放棄。
  3. 介面繁瑣：市面上的工具往往過於複雜，反而增加了執行的心理負擔。

Gridos 透過以下方式解決這些痛點：

  • 熱力圖回顧 (History Heatmap)：一目瞭然地看見過去每一天的努力軌跡，填滿格子的過程本身就是一種獎勵。
  • 連續紀錄 (Streak Tracking)：透過連續天數的統計，激發使用者「不想中斷紀錄」的心理動力。
  • 極致的 UI/UX：採用深色玻璃擬態 (Glassmorphism) 設計與流暢的微動畫 (Micro-interactions)，讓每一次操作都充滿質感與愉悅。
  • 本地端資料保存：資料安全地儲存在瀏覽器 LocalStorage，無需註冊即可立即使用。

🛠️ 使用技術 (Tech Stack)

本專案採用現代化的前端技術棧構建，不僅追求效能，更注重開發體驗與程式碼品質：

💻 使用方式 (Getting Started)

您可以將此專案 Clone 到本地端進行開發或體驗。

1. 安裝 (Installation)

確認您的環境已安裝 Node.js (建議 v18+)。

# Clone 專案
git clone https://github.com/YOUR_USERNAME/gridos.git

# 進入目錄
cd gridos

# 安裝依賴套件
npm install

2. 開發模式 (Development)

啟動本地開發伺服器：

npm run dev

啟動後，瀏覽器通常會自動開啟 http://localhost:5173。

3. 建置與部署 (Build & Deploy)

若您想將專案部署至 GitHub Pages：

# 建置生產版本
npm run build

# 部署至 GitHub Pages (需先設定好 repo url)
npm run deploy

注意：本專案已配置 gh-pages 套件與 GitHub Action 兼容的設定。在部署前，請確保 vite.config.js 中的 base 路徑與您的 Repository 名稱相符。

📂 專案結構 (Project Structure)

gridos/
├── public/              # 靜態資源
├── src/
│   ├── assets/          # 樣式與圖片資源
│   ├── App.tsx          # 主應用程式邏輯 (State Management, UI Layout)
│   ├── main.jsx         # 應用程式進入點
│   └── ...
├── index.html           # HTML 模板
├── package.json         # 專案依賴定義
├── tailwind.config.js   # Tailwind 設定 (v4 可能直接整合於 CSS)
└── vite.config.js       # Vite 設定 (包含 Base URL 設定)

✨ 主要功能特點 (Features)

  • 自訂習慣：支援自訂習慣名稱、目標次數與專屬顏色標籤。
  • 一鍵打卡：直覺的卡片式介面，點擊即可完成打卡，支援長按或多次點擊累計。
  • 進度可視化：即時顯示今日完成率、剩餘次數與進度條。
  • 歷史熱力圖：展開式的詳細月曆視圖，檢視每個習慣的長期執行狀況。
  • 每日格言：隨機顯示激勵人心的名言，為每一天注入正能量。
  • 永久習慣保存 (Persistent Habits)：自訂的習慣項目會永久保存於本地端，無需每日重複建立。每天打開 App，您的習慣清單都會自動準備好。
  • 每日進度重置 (Daily Reset)：系統會根據日期自動判斷，在跨日後自動將所有習慣的「今日完成次數」歸零，讓您迎接新的一天挑戰，而歷史紀錄則會被完整保留。

Made with ❤️ by Gridos Team.

Next Artifact //

Verified Security Report

Explore Project