<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>React | 蔣濤</title><link>https://dylanchiang-dev.github.io/tags/react/</link><atom:link href="https://dylanchiang-dev.github.io/tags/react/index.xml" rel="self" type="application/rss+xml"/><description>React</description><generator>Hugo Blox Builder (https://hugoblox.com)</generator><language>zh-TW</language><lastBuildDate>Thu, 02 Oct 2025 00:00:00 +0000</lastBuildDate><image><url>https://dylanchiang-dev.github.io/media/icon_hu_982c5d63a71b2961.png</url><title>React</title><link>https://dylanchiang-dev.github.io/tags/react/</link></image><item><title>家庭任務管理系統：Cloudflare 全棧協作平台</title><link>https://dylanchiang-dev.github.io/project/family-task-manager/</link><pubDate>Thu, 02 Oct 2025 00:00:00 +0000</pubDate><guid>https://dylanchiang-dev.github.io/project/family-task-manager/</guid><description>&lt;p>家庭任務管理系統是一套面向家庭與小型團隊的開源協作平台。它將任務、日曆、靈感箱、週期安排、成員分工與通知整合在同一個介面，並以 Cloudflare 的邊緣服務完成前後端與資料層部署。&lt;/p>
&lt;h2 id="我在項目中負責的工作">我在項目中負責的工作&lt;/h2>
&lt;p>這是由我主導設計、開發與維護的全棧開源項目。我完成了從早期 PHP 版本到端到端 TypeScript 架構的整體重構。&lt;/p>
&lt;ul>
&lt;li>&lt;strong>產品定義&lt;/strong>：從家庭成員共同管理日常任務的需求出發，設計工作台、任務、日曆、靈感箱、分類、成員與個人設定等核心流程。&lt;/li>
&lt;li>&lt;strong>架構重構&lt;/strong>：將 PHP 與 MySQL 單體系統重構為 React、Hono、Cloudflare Workers、D1、KV 和 R2 組成的邊緣原生架構。&lt;/li>
&lt;li>&lt;strong>資料與 API&lt;/strong>：設計團隊、任務、分類、評論、通知、週期任務與日程區塊的資料模型、驗證規則和 API。&lt;/li>
&lt;li>&lt;strong>複雜任務邏輯&lt;/strong>：實作週期任務生成、時間窗口、積壓任務、日曆檢視與排程更新，處理跨層資料一致性。&lt;/li>
&lt;li>&lt;strong>身份與權限&lt;/strong>：建置 JWT 存取權杖、KV refresh session、團隊隔離與角色權限。&lt;/li>
&lt;li>&lt;strong>工程品質&lt;/strong>：採用 monorepo、前後端共享 Zod schema、型別檢查、單元測試與 Cloudflare 自動部署。&lt;/li>
&lt;/ul>
&lt;h2 id="核心創新">核心創新&lt;/h2>
&lt;h3 id="1-從個人待辦轉向家庭協作">1. 從個人待辦轉向家庭協作&lt;/h3>
&lt;p>系統不只管理單一使用者的清單，而是以家庭或小型團隊為單位，支援成員指派、分類、評論、通知與多視角工作台。&lt;/p>
&lt;h3 id="2-以時間語義統一多種任務">2. 以時間語義統一多種任務&lt;/h3>
&lt;p>一般任務、週期任務、時間窗口、行程與靈感箱各自有不同的生命週期。系統透過共享資料契約與日曆視圖，讓不同任務能在一致的操作模型中管理。&lt;/p>
&lt;h3 id="3-端到端-typescript-契約">3. 端到端 TypeScript 契約&lt;/h3>
&lt;p>前端、後端與共享套件位於同一個 pnpm workspace，並以 Zod schema 和型別共享降低 API 欄位漂移，使輸入驗證與型別安全從介面一路延伸至資料層。&lt;/p>
&lt;h3 id="4-邊緣原生的低維運架構">4. 邊緣原生的低維運架構&lt;/h3>
&lt;p>前端部署於 Cloudflare Pages，API 運行於 Workers，資料使用 D1、KV 與 R2。這套架構減少傳統伺服器維護，同時保留資料庫、快取、檔案與排程能力。&lt;/p>
&lt;h2 id="技術架構">技術架構&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>前端&lt;/strong>：React、TypeScript、Vite、Tailwind CSS、shadcn/ui、PWA&lt;/li>
&lt;li>&lt;strong>後端&lt;/strong>：Hono、Cloudflare Workers、Zod&lt;/li>
&lt;li>&lt;strong>資料層&lt;/strong>：Cloudflare D1、Drizzle ORM、KV、R2&lt;/li>
&lt;li>&lt;strong>工程化&lt;/strong>：pnpm workspace、Vitest、MSW、Cloudflare Pages&lt;/li>
&lt;li>&lt;strong>授權&lt;/strong>：MIT License&lt;/li>
&lt;/ul>
&lt;p>
·
&lt;/p></description></item></channel></rss>