WhatFood 🍜

選擇困難救星！用幸運轉盤幫你決定今天吃什麼、喝什麼，並透過 Google Places 找出附近的店家。

功能

• 🎡 幸運轉盤：找吃的 / 找喝的，轉一下就幫你決定
• 📍 附近店家：取得目前位置後，透過 Google Places API 搜尋附近的餐廳與飲料店
• 🖼️ 店家照片與資訊：顯示店家照片、評分等資訊
• 🔒 API Key 保護：Google Places API Key 僅存在伺服器端，透過 server/api 代理呼叫，不會暴露於前端

技術棧

• Nuxt 4（SPA 模式）+ Vue 3
• Vuetify 3 UI 框架
• @lucky-canvas/vue 幸運轉盤
• SweetAlert2 彈窗提示
• ESLint（@antfu/eslint-config）

開始使用

1. 安裝依賴

yarn install

2. 設定環境變數

複製 .env.example 為 .env，並填入你的 Google Places API Key：

cp .env.example .env

NUXT_GOOGLE_PLACEAPI_KEY='your-google-places-api-key'

建議在 Google Cloud Console 為金鑰設定 API 限制（僅允許 Places API）。部署時（如 Vercel）請在平台的環境變數設定同名的 NUXT_GOOGLE_PLACEAPI_KEY，Nuxt 會在執行時覆蓋 runtimeConfig。

3. 啟動開發伺服器

yarn dev

開發伺服器會在 http://localhost:3001 啟動。

其他指令

yarn build      # 建置正式版
yarn preview    # 預覽建置結果
yarn generate   # 靜態生成
yarn lint       # 執行 ESLint 檢查

專案結構

app/
├── components/     # 元件（Base / Layout / Page）
├── composables/    # 組合式函式（定位等）
├── pages/          # 頁面（首頁、whatTo/food、whatTo/drink）
└── assets/         # 樣式資源
server/
└── api/            # 伺服器端 API 代理（Places 搜尋、店家照片）

License

MIT