一款解決「今天吃什麼」難題的群組決策 App,支援多人同時篩選餐廳、海選投票、PK 賽淘汰,最終共同決定用餐地點。
- 群組建立 / 加入:透過邀請碼建立或加入群組,支援複製邀請碼分享
- 個人化篩選:每位成員可獨立設定搜尋範圍、料理類型、最低評分、是否只看營業中
- 海選階段:從 Google Places 撈取候選餐廳,每位成員勾選有興趣的選項
- PK 賽:海選結果進入淘汰賽,兩兩對決直到選出最終餐廳
- 即時同步:輪詢機制確保所有成員狀態同步,自動跳轉下一階段
- 結果導航:決策完成後可直接開啟 Google Maps 導航
| 項目 | 技術 |
|---|---|
| 框架 | React Native + Expo (File-based routing) |
| 語言 | TypeScript |
| 動畫 | React Native Reanimated |
| UI 元件 | Lucide React Native、Expo Linear Gradient |
| HTTP | Axios |
| 狀態管理 | React useState / useRef |
| 其他 | Expo Image Picker、Expo Location、React Native Modal |
app/
├── login.tsx # 登入頁(含食物插圖輪播動畫)
├── register.tsx # 註冊頁
├── (tabs)/
│ └── index.tsx # 首頁(群組列表)
├── group/
│ └── [id].tsx # 群組詳情 + 篩選條件設定
└── decision/
└── [id]/
├── index.tsx # 海選頁
├── waiting.tsx # 等待其他成員
├── pk.tsx # PK 賽對決
└── result.tsx # 最終結果
utils/
└── api.ts # Axios 封裝
- Node.js 18+
- Expo CLI
- iOS Simulator 或 Android Emulator
# 安裝依賴
yarn install
# 啟動開發伺服器
npx expo start --ios後端 API 預設連接本機 ngrok,請確認
utils/api.ts內的 baseURL 已更新為你的後端位址。
後端使用 Laravel 開發,請參考:meal-buddy-backend