Social Feed UI Prototype

以 React + TypeScript 製作的社群動態網站前端原型，練習把首頁動態、發文、貼文詳情、留言、個人帳戶與其他使用者頁面組成一致的多頁體驗。

專案範圍

這是一個純前端 UI prototype。資料與登入狀態目前為靜態展示，用來驗證元件拆分、路由、互動狀態與響應式版面；尚未串接正式 API 或資料庫。

已完成頁面與互動

• 動態牆與可重用的貼文卡片
• 建立貼文頁面
• 貼文詳情與留言輸入區
• 個人帳戶頁面與登入狀態切換
• 其他使用者個人頁面與追蹤按鈕狀態
• 共用導覽、按鈕與留言元件
• React Router 動態路由（/post/:id、/user/:id）

技術棧

React 19 · TypeScript · Vite · React Router · Heroicons · 原生 CSS

本地開發

npm install
npm run dev

建置與檢查：

npm run build
npm run lint

專案結構

src/
├── components/  # Navigation, PostCard, CommentCard, Button
├── pages/       # Home, CreatePost, Post, Account, UserProfile
├── App.tsx      # Route definitions
└── main.tsx     # Application bootstrap

若要產品化

下一步可加入正式身分驗證、貼文與留言 API、圖片上傳、分頁載入、錯誤處理與自動化測試。README 明確標示目前範圍，避免把靜態原型誤認為已完成的全端產品。