Skip to content

About

群組餐廳決策 App,支援海選、PK賽投票機制 | React Native + Laravel

Resources

Stars

0 stars

Watchers

0 watching

Forks

Repository files navigation

飯友 Meal Buddy — 前端

一款解決「今天吃什麼」難題的群組決策 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 已更新為你的後端位址。


後端 Repository

後端使用 Laravel 開發,請參考:meal-buddy-backend

About

群組餐廳決策 App,支援海選、PK賽投票機制 | React Native + Laravel

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages