{"id":29328742,"url":"https://github.com/nick-jy-huang/quotation-app","last_synced_at":"2026-04-10T23:02:43.964Z","repository":{"id":303452342,"uuid":"1015424278","full_name":"nick-jy-huang/quotation-app","owner":"nick-jy-huang","description":"Make quotations easily.","archived":false,"fork":false,"pushed_at":"2025-07-07T17:21:57.000Z","size":286,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-07T18:45:24.355Z","etag":null,"topics":["makemoney","nextjs","quotation","react","tailwind"],"latest_commit_sha":null,"homepage":"https://quotation-app-zeta.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nick-jy-huang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-07T13:33:25.000Z","updated_at":"2025-07-07T17:23:03.000Z","dependencies_parsed_at":"2025-07-07T18:45:32.273Z","dependency_job_id":"7323dd21-095e-466c-9c6d-f230735cdd4e","html_url":"https://github.com/nick-jy-huang/quotation-app","commit_stats":null,"previous_names":["nick-jy-huang/quotation-app"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/nick-jy-huang/quotation-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-jy-huang%2Fquotation-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-jy-huang%2Fquotation-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-jy-huang%2Fquotation-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-jy-huang%2Fquotation-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nick-jy-huang","download_url":"https://codeload.github.com/nick-jy-huang/quotation-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick-jy-huang%2Fquotation-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264155081,"owners_count":23565300,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["makemoney","nextjs","quotation","react","tailwind"],"created_at":"2025-07-07T22:37:01.229Z","updated_at":"2026-04-10T23:02:43.957Z","avatar_url":"https://github.com/nick-jy-huang.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://quotation-app-zeta.vercel.app/favicon.png\" width=\"120\" alt=\"Quotation App Logo\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eQuotation App 👨‍💻\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n一款簡單好用的線上報價單編輯與預覽工具，支援多欄位填寫、即時計算與美觀的預覽畫面，適合各類型專案報價需求。\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/nick-jy-huang/quotation-app/blob/main/public/bg_light.png\" width=\"49%\" alt=\"Quotation App Light Preview\" style=\"border-radius: 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.15);\" /\u003e\n  \u003cimg src=\"https://github.com/nick-jy-huang/quotation-app/blob/main/public/bg_dark.png\" width=\"49%\" alt=\"Quotation App Dark Preview\" style=\"border-radius: 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.15);\" /\u003e\n\u003c/p\u003e\n\n## ✨ 特色功能\n\n- 📝 報價單編輯與即時預覽\n- 🧑‍💼 輕鬆填寫基本資料、接案人資料、客戶資料與工作內容\n- 🧮 報價單小計、總計自動計算\n- ⏳ 支援 Input Debounce，提升輸入體驗\n- 🌐 社群分享自動顯示預覽圖（Open Graph）\n- ♿ Axe-core 驗證無障礙設計\n- 📄 匯出 PDF 並自動儲存匯出紀錄於 localStorage，支援歷史紀錄載入與清除\n- 📱 RWD 浮動匯出按鈕與匯出紀錄，手機／平板體驗佳\n- 🎨 Prettier 程式碼格式化與 TypeScript 嚴謹型別\n- 🧩 元件結構清楚，易於維護與擴充\n- 🌏 多語系支援\n- 🌙 支援 Dark mode 主題切換，夜間閱讀更舒適\n\n## 🛠️ 技術架構\n\n- ⚡ Next.js 15\n- ⚛️ React 18\n- 🦾 TypeScript\n- 💨 Tailwind CSS\n- 🌍 next-intl\n- 🗃️ Zustand 狀態管理\n- 📅 dayjs 處理日期\n- 🖨️ html2canvas + jsPDF 匯出 PDF\n- ♿ axe-core 無障礙檢查\n\n## 🌏 i18n 多語系支援\n\n- 🇹🇼🇺🇸 支援中英文（zh-TW / en-US）介面切換\n- 🔄 語言切換按鈕可即時切換所有 UI 文字\n- 🛣️ 語系路由自動化，middleware 會根據支援語言自動產生白名單\n- ✅ 所有主要元件皆有多語系測試，確保不同語言下顯示正確\n- ➕ 新增語言只需於 `constants/locale.ts` 設定，無需手動調整 middleware\n- 🗂️ message 新增語系表\n\n## 🌙 Dark mode\n\n- 自動偵測系統偏好（`@media (prefers-color-scheme: dark)`）。\n- 報價單預覽區（QuotationPreview）強制亮色顯示，列印與分享時不受 dark mode 影響。\n- 所有主色藍在深色主題下自動調整，確保對比度與無障礙。\n- 格線、陰影、隔線等細節皆針對 dark mode 優化，夜間閱讀更舒適。\n\n## 🚀 安裝與啟動\n\n1. ⬇️ 下載專案\n\n```bash\ngit clone https://github.com/nick-jy-huang/quotation-app.git\ncd quotation-app\n```\n\n2. 📦 安裝相依套件\n\n```bash\npnpm install\n```\n\n3. ▶️ 啟動開發伺服器\n\n```bash\npnpm dev\n```\n\n4. 🌐 開啟瀏覽器並前往 [http://localhost:3000](http://localhost:3000)\n\n## 🖥️ Node.js 版本需求\n\n本專案建議使用 Node.js 20 以上版本（Next.js 15 需 Node.js 18+，建議 20 以上）。\n\n## 🧪 測試\n\n本專案採用 Vitest + Testing Library 進行單元與元件測試，涵蓋主要元件、流程、無障礙、RWD、localStorage、副作用等情境。\n\n- 🧪 使用 [Vitest](https://vitest.dev/) 作為測試框架，支援 TypeScript 與 Vite 專案。\n- 🧑‍💻 使用 [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) 進行元件渲染與互動測試。\n- 📊 覆蓋率報表自動產生於 `coverage/` 目錄，可用瀏覽器開啟 `coverage/index.html` 查看詳細覆蓋情況。\n- ✅ 重要元件皆有 smoke test、props 傳遞、互動、無障礙、RWD 等測試案例。\n- 🗃️ PDF 匯出、localStorage 等副作用皆有 mock 處理，確保測試穩定。\n\n### 🏃‍♂️ 執行測試\n\n```bash\npnpm test\n```\n\n### 🧰 相關測試指令\n\n- `pnpm test`：執行所有單元測試，執行測試並產生覆蓋率報表，**coverage** 資料夾中點擊 **index.html**\n\n## 📄 授權\n\n- 本專案採用 MIT License 授權，詳見 [LICENSE](./LICENSE)。\n- 作者：nick-jy-huang\n- 本專案部分圖示素材來自 [Flaticon](https://www.flaticon.com/)。\n- 本專案 icon 來自 [fontawesome](https://www.fontawesome.com/)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnick-jy-huang%2Fquotation-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnick-jy-huang%2Fquotation-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnick-jy-huang%2Fquotation-app/lists"}