前七天都在使用 ChatGPT 釐清需求、整理 PRD、拆解任務，也討論了 Prompt 失敗時該怎麼修正。

從今天開始，要正式進入 Codex，建立這個系列接下來會持續開發的 Issue Tracker。

不過今天不會一次完成所有功能，而是先建立一個可以啟動、可以測試，也方便後續擴充的最小開發環境。

為什麼先建立專案骨架？

目前 Issue Tracker repository 還是空的。Codex 雖然可以讀取工作區、執行指令與修改檔案，但不存在的程式碼仍然無法被分析。

所以在實作「新增任務」以前，需要先準備幾個基礎條件：

• 可以在瀏覽器開啟應用程式
• 有明確的原始碼入口
• 能執行自動化測試
• 能建立正式版本
• README 記錄開發指令
• Git 能追蹤每次變更

這些內容不算使用者功能，卻會決定後續任務能不能被執行與驗證。

今天使用的技術

根據前面完成的 PRD，Issue Tracker 第一版只在瀏覽器執行，資料也會保存在瀏覽器，不需要後端、資料庫或登入系統。

這次先採用：

• React：建立使用者介面
• TypeScript：替資料與元件加入型別檢查
• Vite：提供本機開發與建置環境
• npm：管理套件與執行指令
• Vitest 與 Testing Library：建立前端測試

今天只建立專案骨架，不實作新增、編輯、刪除、搜尋、篩選、排序或拖曳。

在 Codex 開啟正確的 repository

開始前，先建立獨立的 Issue Tracker repository，再把它開啟為 Codex 的工作區。

第一次請 Codex 動手建立專案

前一天的任務刻意限制為唯讀；今天則會正式授權 Codex 建立檔案、安裝套件並執行驗證。

我使用的 Prompt 是：

目標：
把目前的空 repository 建立成可執行的 Issue Tracker 前端專案骨架。

技術選擇：
- React
- TypeScript
- Vite
- 使用 npm 管理套件
- 使用 Vitest 與 Testing Library 建立測試環境

請完成：
1. 建立必要的專案設定與原始碼目錄
2. 建立最小首頁，只顯示「Issue Tracker」標題與「目前沒有任務」的空狀態
3. 設定基本測試環境，並替首頁加入一個最小測試
4. 在 README 寫下安裝、啟動、測試與建置指令
5. 執行測試與建置，確認專案可以正常運作

限制：
- 不要實作新增、編輯、刪除、搜尋、篩選、排序或拖曳
- 不要加入後端、資料庫、登入或雲端服務
- 不要建立需求以外的頁面與抽象層
- 如果需要下載或安裝套件，先說明要執行的指令
- 只修改目前的 Issue Tracker repository

完成後請回報：
- 建立或修改了哪些檔案
- 執行了哪些指令
- 測試與建置結果
- 是否還有未完成或需要我決定的事項

這段 prompt 的回覆和執行

目前網頁的樣子：

Prompt 為什麼要限制功能範圍？

如果只說「幫我建立一個 Issue Tracker」，Codex 很可能直接產生表單、任務卡片、篩選器，甚至自行加入後端與資料庫。

畫面看起來可能比較完整，卻會讓後面的開發任務失去清楚邊界，也很難確認每個功能是在哪一次修改中加入的。

安裝套件與權限

建立前端專案通常需要從網路下載套件，因此 Codex 可能會要求額外核准。

看到核准視窗時，不應只按下允許，而要先確認：

• 指令是否在正確的 Issue Tracker repository 執行
• 要安裝的套件是否符合 Prompt 中的技術選擇
• 指令是否只影響目前專案
• 有沒有出現未要求的全域安裝或其他外部操作

如何確認專案真的建立完成？

Codex 說「完成」不代表任務已經驗收。我會從四個方向檢查。

1. 開啟畫面

啟動開發伺服器後，在瀏覽器確認頁面可以載入，並且只出現今天要求的標題與空狀態。

如果已經出現新增按鈕、搜尋欄或任務編輯功能，就代表修改超出範圍。

2. 執行測試

測試應該能正常啟動，而且至少驗證首頁的重要內容有被呈現。不能只看到 Codex 說測試通過，還要保留實際終端機輸出。

3. 執行建置

開發模式能顯示畫面，不代表正式建置一定成功。執行建置可以提早發現 TypeScript、匯入路徑或設定問題。

4. 檢查 Git diff

最後查看這次新增與修改的檔案，確認每項變更都能對應到 Prompt，並且沒有把套件產物或不必要的檔案加入版本控制。

今日完成條件

完成今天的操作後，Issue Tracker repository 應該具備：

• 可執行的 React 與 TypeScript 專案
• 一個只顯示標題與空狀態的首頁
• 可執行的最小測試
• 可成功完成的正式建置
• 記錄常用指令的 README
• 沒有提前實作的產品功能

這些條件都通過後，就可以建立專案的第一個 commit，保留乾淨的起始點。

這是我的 repo，在裡面的 commit 找到 "initial commit" 就是這篇文章寫完時的狀態。

今日小結

今天第一次讓 Codex 真正修改 Issue Tracker repository，但任務範圍只有建立最小開發環境。