前言

嗨，我是前端工程師 Jimmy，於 22 年初轉職，轉職後沒多久 GitHub Copilot 發布，在開發領域掀起不小的話題，同年底 OpenAI 發布 ChatGPT，徹底引爆了 AI 的浪潮。

我在這三年見證了 AI 從功能簡單到複雜，從被懷疑、褒貶不一到現在被廣泛認為是未來趨勢，我看到了 AI 正在起飛。

現在每分每秒都有新的研究、新的工具、新的應用出現，盛世已經來到，每個人都說要跟緊潮流，不然只會被淘汰，但我是多疑者，雖然我從 Copilot 上線第一天就成為了付費使用者，對我對這是存疑的：

我相信 AI 是未來趨勢，我也相信它正在高速成長，可正因為在高速成長，現在的這些工具一定會被快速取代，prompt、context、RAG、Agent、n8n、多模態、多模型混用，我相信不用很久這些就不是我們需要去煩惱的事情了，因此我認為比起煩惱 AI 工具，不如回歸本質，學習怎樣寫好程式、怎樣把產品完成，而要完成產品，就無法止步於前端，因此我想透過這個專案，磨練我的全端能力，提高我對每個環節的掌握能力，這樣不管 AI 工具怎麼變，我都能應對自如。

挑戰內容

如標題所示，這會是一個仿照 Instagram 的全端專案，內容會包含前端功能、後端 API、資料庫設計與操作、部署，如果時間允許也會擴充包含自動化測試、CI/CD、DevOps 等。

使用工具（暫定）

• 前端：Next.js（App Router）+ TypeScript + Tailwind CSS
• 後端：Next.js Route Handlers / Edge Functions（先簡單，之後再視需要拆出獨立服務）
• 資料庫：PostgreSQL（本機用 Docker，雲端選 Supabase / Neon 其一）
• ORM：Drizzle（同場加映：產生 SQL、migration、型別安全）
• 驗證：Auth.js（原 NextAuth），Email/Password 起步，之後可加 OAuth
• 檔案儲存：S3 相容（Cloudflare R2 或 Supabase Storage）
• 圖片處理：sharp（產生縮圖、壓縮），前端用 最佳化
• 上傳：UploadThing 或直傳 S3（先 MVP 再優化權限）
• 快取：Upstash Redis（之後用於熱門榜單 / 計數器）
• 測試：Vitest（單元） + Playwright（E2E；擴充階段）
• 品質：ESLint、Prettier、Husky + lint-staged、commitlint（可選）
• 部署：Vercel（前後端同倉），備選 Render/Fly（若需長連線或背景任務）

目標

MVP

• 使用者可以註冊、登入、登出
• 使用者可以發布貼文（含圖片上傳，先支援單張）
• 使用者可以瀏覽貼文（首頁動態）
• 首頁無限滾動（分頁 API + 前端 infinite scroll）
• 使用者可以留言
• 使用者可以按讚
• 使用者可以追蹤其他使用者 / 被追蹤
• 使用者可以設置個人資料

擴充

• 首頁動態「混合排序」：時間 + 互動數加權 + 追蹤關係（工程版演算法）
• 追蹤建議：friend-of-friend / 共同追蹤
• 熱門貼文榜單：滾動 24h 互動數（like+comment）聚合
• 搜尋：使用者 / 標籤 / 貼文文字（簡易）
• 權限與隱私：私帳號、僅追蹤者可見
• 通知：站內通知 + 推播（Web Push）
• E2E 測試（Playwright）
• CI/CD：自動測試、型別檢查、lint、部署
• 可觀測性：Log、Metrics、基礎監控（例如 Vercel Analytics / Sentry）

粗略規劃（4 週）

• Week 1 – 基礎骨架：專案初始化、Auth.js、Profile、Post Schema、發文（文字+單張圖）、首頁列表、無限滾動、資料庫 migration 流程打通。
• Week 2 – 社交互動：追蹤/取消追蹤、按讚、留言、個人頁、簡單通知（站內）、圖片直傳優化（S3 簽名直傳/權限）。
• Week 3 – 工程版演算法 & 探索：混合排序首頁、熱門貼文榜單、追蹤建議、基本搜尋、快取（Redis）導入與失效策略。
• Week 4 – 強化與自動化：E2E 測試、CI/CD、錯誤追蹤/監控、效能與查詢優化、可無痛擴充（多圖上傳、國際化）。

Day 1 實際進度 & 明日預告

今天完成

• 決定技術棧與雲端服務（Next.js + TS、Postgres、Drizzle、Auth.js、R2/Supabase Storage、Vercel）。
• 撰寫初步的 MVP / 擴充功能清單。
• 規劃四週粗略 Roadmap。
• 列出開發環境需求（Docker Postgres、.env.example、lint/prettier 配置等）。