haotool Apps

Modern React Applications Monorepo

English · 繁體中文

---

繁體中文

專案概述

haotool Apps 是一個專業的 pnpm Monorepo，包含多個高品質的 React 19 應用程式。所有應用程式共享統一的工程標準、CI/CD 管線和開發工具鏈。

「HAO」取自中文「好」的拼音，我們的核心理念是打造真正的「好工具」。

應用程式

應用	描述	狀態	連結
RateWise	台銀即時匯率換算 PWA，支援 17 種外幣與 TWD	Live	app.haotool.org/ratewise
NihonName	日本名字產生器，探索皇民化歷史	Live	app.haotool.org/nihonname
Quake-School	互動式地震科學教育平台	Live	app.haotool.org/quake-school
Park Keeper	停車場導航工具，GPS 指引 + 多語言（i18n）	Live	app.haotool.org/park-keeper
Split Meow	貓咪主題旅遊帳單分攤計算機，支援費用分類與分享	Live	app.haotool.org/split-meow
A320neo Flight Deck	物理驅動的 A320neo 互動駕駛艙飛行模擬（WebGL）	Dev	本機 pnpm --filter @app/a320-flight-deck dev
StarPuff	吸入果凍怪、擊敗果凍王的直向 Boss Rush 小遊戲	Live	app.haotool.org/starpuff
PaperTrade	零風險模擬合約交易所，串接真實加密貨幣行情	Live	app.haotool.org/papertrade
haotool	專案展示平台，3D 互動首頁	Live	app.haotool.org

應用特色

RateWise - 匯率好工具

基於臺灣銀行牌告匯率的即時匯率 PWA 應用，顯示實際買賣價（非中間價）

• 台銀實際賣出價：顯示真正換匯成本，非市場中間價
• 17 種外幣與 TWD、4 種匯率類型（現金/即期買入賣出）
• 即時匯率：每 5 分鐘同步臺灣銀行牌告匯率
• 匯率 API v3 已公開（FX_V3_PUBLIC=true）：以支付幣別 → 取得幣別表達方向，保留來源買賣側、條件與 SHA-256 release manifest；Open Data 與 App 均使用 v3。回滾只需以一行 PR 關閉此開關，data 發佈 gate 獨立運作
• 趨勢圖表：30 天歷史匯率走勢視覺化
• PWA 支援：可安裝至手機，支援離線使用；重新整理與錯誤恢復會驗證離線資源，網路失敗保留原有離線副本與同站其他工具的資料
• 收藏管理：自訂常用貨幣快速存取
• 程序化 SEO：249 個可索引 SEO path（幣對頁 + 金額頁）

NihonName - 皇民化改姓生成器

探索 1940 年代台灣皇民化運動的歷史改姓對照

• 姓名變換所：查詢歷史上的日式改姓對照
• 歷史專區：皇民化運動、馬關條約、舊金山和約
• 諧音梗名字：500+ 趣味諧音日本名
• 和紙質感 UI：日式傳統美學設計

Quake-School - 地震知識小學堂

互動式地震科學教育網站

• 地震模擬器：互動式調整規模與深度，即時視覺化影響
• 分級課程：幼兒園到進階程度的地震知識
• 知識測驗：互動問答測驗，驗證學習成效
• 震度視覺化：台灣震度分級圖表
• 地震波動畫：P 波、S 波視覺化展示

Park Keeper - 停車場導航

GPS 輔助的停車場路徑指引工具

• GPS 即時定位：指引回到停車位的方向與步數
• 羅盤導航：設備方向感測器驅動的視覺化方向指示
• 多語言支援：繁體中文、英文、日文（i18n）
• Leaflet 地圖整合：停車紀錄與地圖標記

Split Meow - 分帳計算機

貓咪主題的旅遊帳單分攤工具

• 費用分類標籤：Emoji 分類（餐飲、交通、住宿等）
• 行程摘要分享：Web Share API + 剪貼簿備援
• 貓咪互動夥伴：爪印粒子效果 + 慶祝動畫
• 結清標記：追蹤已結算費用

haotool - 專案平台

3D 互動展示平台，介紹所有專案

• Three.js 3D 效果：沉浸式視覺體驗
• 響應式設計：完美適配各種裝置
• 極致效能：Lighthouse 95+ 全類別

---

技術棧

類別	技術
框架	React 19.2 + TypeScript 5.9
建置工具	Vite 8.0 + vite-react-ssg
樣式	Tailwind CSS 3.4
測試	Vitest 4.1 + Playwright 1.57
套件管理	pnpm 9.10.0 (Monorepo)
CI/CD	GitHub Actions (13 workflows)
部署	Cloudflare Pages + Worker
安全	Gitleaks CLI + Trivy + SARIF

品質指標

指標	數值
測試數量	1700+
測試覆蓋率	92%+
TypeScript	Strict Mode
ESLint	0 警告
Lighthouse	95+ 全類別
CI 管線	13 個 workflow

快速開始

環境需求

• Node.js: >= 24.0.0
• pnpm: >= 9.10.0

安裝與開發

# 複製儲存庫
git clone https://github.com/haotool/app.git
cd app

# 安裝依賴
pnpm install

# 啟動所有應用開發模式
pnpm dev

# 或啟動特定應用
pnpm --filter @app/ratewise dev      # RateWise (http://localhost:4173)
pnpm --filter @app/nihonname dev     # NihonName (http://localhost:3002)
pnpm --filter @app/quake-school dev  # Quake-School (http://localhost:3003)
pnpm --filter @app/park-keeper dev   # Park Keeper (http://localhost:3004)
pnpm --filter @app/split-meow dev    # Split Meow (http://localhost:3005)
pnpm --filter @app/a320-flight-deck dev  # A320neo Flight Deck (http://localhost:3010)
pnpm --filter @app/starpuff dev      # StarPuff (http://localhost:3007)
pnpm --filter @app/papertrade dev    # PaperTrade (http://localhost:5173)
pnpm --filter @app/haotool dev       # haotool (http://localhost:3000)

建置與測試

# 建置所有應用
pnpm build

# 執行測試
pnpm test

# TypeScript 檢查
pnpm typecheck

# ESLint 檢查
pnpm lint

版本與發版

# 每個 PR 都要建立 changeset，描述使用者可見影響
pnpm changeset

# release PR 由 GitHub Actions 自動建立
pnpm changeset:status

Release workflow 以 pnpm changeset:version 作為版本 SSOT，並由 scripts/get-release-metadata.mjs --changed 產生 release tag 與 GitHub release 清單。禁止手動修改版本號、手動編輯 CHANGELOG，或在 CI 內直接呼叫 pnpm changeset tag 建 tag；CI 內部 tag push 會以 HUSKY=0 單次推送，避免重複觸發 pre-push hook。

This is the beginning of the README. Read the rest at the original. Read the full README ↗