「架構不是炫技，而是為了讓產品能真正跑起來。」

在前十天，我們談了理念、使用者、情境與需求。今天，正式踏進技術篇的第一步：
要用什麼樣的系統架構，才能支撐「防災避難包智慧推薦平台」？

為什麼要談「架構」？

對一個 side project 來說，最常見的迷思是：

「是不是要用最潮、最先進的技術，才顯得厲害？」

但實際上，架構設計不是堆疊 buzzword，而是找到「能跑得動、能維護、能迭代」的組合。
尤其這個專案核心在於「推薦清單」與「資訊可及性」，重點不是打造一個完美的系統，而是讓用戶可以快速獲得實用的防災建議。

架構全覽：六個組件

以下是我為這個專案選擇的技術組合，並附上思考過程：

1. 前端：React / Next.js + Tailwind CSS

   • 理由：快速開發、社群資源豐富，Next.js 讓 SEO 與 Server-Side Rendering 更容易。
   • vibecoding觀點：UI 要「乾淨清晰」，讓用戶專注在清單，而不是被花俏的設計分散注意。

2. 後端：Node.js / Express

   • 理由：輕量、快速建 API，對接前端與資料庫最合適。
   • vibecoding觀點：避難包不是「一次買斷」，而是會隨場景、時間更新的資料，API 必須能動態回應。

3. 資料庫：MongoDB Atlas

   • 理由：雲端託管、文件型結構彈性高，方便儲存不同情境的物資清單（如地震 vs 颱風）。
   • vibecoding觀點：使用者輸入的世代、家庭型態、是否有寵物，對應到「物資集合」時，需要靈活結構。

4. AI 模組：OpenAI API

   • 理由：處理推薦邏輯、解釋說明，甚至將艱澀的官方清單轉化為「人能看懂」的文字。
   • vibecoding觀點：AI 不只是推薦，而是把「冷冰冰的清單」翻譯成「溫暖的指引」。

5. 外部服務：momo / 蝦皮 / PChome API（電商串接）

   • 理由：直接把清單轉化為「購買入口」，從指南到行動一氣呵成。
   • vibecoding觀點：災難準備常因「懶得去買」而中斷，直接串購物平台降低阻力。

6. 部署：Vercel + MongoDB Atlas（雲端組合）

   • 理由：Vercel 天然適合 Next.js 部署，與 MongoDB Atlas 一起讓 side project 無痛上線。
   • vibecoding觀點：部署要像「防災演練」一樣簡單快速，而不是困在設定裡。

決策邏輯：為什麼不是別的？

• 不用Django/Rails？
  太重，對小型專案來說維護成本過高。
• 不用SQL資料庫？
  防災物資清單結構多變，NoSQL 彈性更大。
• 不用本地部署？
  這是要分享的 side project，不是企業內網系統，快速上雲更符合需求。

小結

這個組合的核心精神是：

• 前端簡單易用
• 後端輕巧穩定
• 資料庫彈性足夠
• AI提升使用者體驗
• 部署快速、維護低成本

接下來的幾天，我會依序拆解每一塊，從前端開始，帶大家走進「如何把韌性生活指南，變成一個能實際體驗的網站」。

明日預告(Day 12)： 我將分享「前端設計：React/Next.js與頁面設計」，並公開第一版UI草圖。