30天用React打造AI工具箱 Day28

前端架構跟資料管理小總結：從亂糟糟到有系統

這幾天把「AI工具箱」慢慢做成一個能真的用的應用，我覺得差不多該來回顧一下整個架構怎麼長大的。以前只是做個小功能隨便塞在一起就好，後來越加越多才發現「架構」真的很重要。

React架構怎麼設計

整個專案的基礎就是用Layout去包一堆分頁，每個功能像是待辦清單、聊天、翻譯、筆記，都獨立成一個component。
大致上的架構長這樣

src/
 ├── components/
 ├── pages/
 │    ├── ChatBox.jsx
 │    ├── TranslationTool.jsx
 │    ├── NoteManager.jsx
 │    └── TodoApp.jsx
 ├── Layout.jsx
 └── main.jsx

這樣的做法比較方便，因為：

• 每個功能都能自己改，不會互相干擾
• Layout只管導航跟頁面切換
• 要加新功能的時候，import一次就能顯示

資料管理：localStorage救了我

一開始的筆記和待辦的資料都放在state裡面，結果重整就全沒了。後來我改用localStorage存。
其實流程非常簡單：

每次資料變動的時候，就存進去

useEffect(() => {
  localStorage.setItem("notes", JSON.stringify(notes))
}, [notes])

打開頁面時再載回來

useEffect(() => {
  const saved = JSON.parse(localStorage.getItem("notes") || "[]")
  setNotes(saved)
}, [])

雖然這只是個前端小技巧，但讓整個app「有記憶」的感覺，實用度直接上升。

搜尋跟分類的升級

Day27那天我改進了搜尋功能，讓它可以針對主題跟標籤去找，而不是整段內容亂搜。
另外還補上了一個防呆：

(note.tags || []).some(tag => tag.includes(searchTerm))

這樣舊的筆記就算沒有標籤也不會報錯。