吃什麼 — AI 美食推薦 App
看案例詳情 →專案背景
現代人每天平均花 30 分鐘煩惱「吃什麼」,選擇困難的真正原因不是選項太少,而是太多。本專案打造一款台灣在地的 AI 美食推薦 App,從使用者「心情」出發、結合所在位置,30 秒鎖定今日餐點,把選餐這件小事變得輕鬆又好玩。
技術方案
前端以 Next.js 16(App Router)+ React 19 + TypeScript 打造,Tailwind CSS 4 與 Framer Motion 處理樣式動畫,i18n 動態路由支援中/英雙語、文章以 react-markdown 渲染;遊戲區用 Three.js + React Three Fiber 搭配 Rapier 物理引擎與後處理特效做 3D Match3D,另以 Phaser 3 實作 2D 消消樂。後端為 Fastify 5(ESM/TypeScript),Auth.js 處理 OAuth 登入、Zod 驗證、Helmet/CORS 等安全外掛;資料層用 Drizzle ORM 操作 MySQL 8。AI 心情與方位推薦串接 OpenAI,靜態資產走 Cloudflare R2 與 Azure Blob,全棧容器化以 Docker 打包、經 Cloud Build 自動部署至 GCP Cloud Run(asia-east1)。
成果
免費即可使用 AI 心情推薦與幸運方位探索等核心功能,VIP 方案解鎖無限次數;以徽章收集、抽獎與小遊戲提升使用黏著度,並用 SEO 美食文章(午餐/晚餐/夜市等)導流。(實際營運數據待補)