Build-your-own health tea web app with an AI Tea Master, bonus points, favorites, cart, Google-style sign-in, EN/简体中文 and light/dark themes. The business case as a working website (mobile + desktop).
- 🍵 Tea builder — 8 teas, milk options, sweetness levels, healthy boosters (ginger, ginseng, goji…), toppings, hot/iced. Every ingredient shows a concise health benefit and contraindication warnings (diabetes, allergies, lactose).
- 🥤 Live cup preview — the cup fills with the real tea color, pearls sink, steam/ice animate.
- 🤖 AI Tea Master (OpenAI, floating widget) — unlocks after 3 orders; learns from order history, star ratings and its own taste memory, which it updates itself ("remember: I'm lactose intolerant" → never suggests fresh milk). Free plan: 5 AI teas/month; Nai+ subscription = unlimited (first month free, then ¥28/mo).
- 🎉 20% off the first order, ⭐ 5% bonus points that expire in 14 days.
- ❤️ Favorites — save your builds or AI recipes, reorder in one tap.
- 🛒 Cart for multiple drinks, 🔐 Google-style sign-in required to order (demo account chooser, no real OAuth needed).
- 💬 Feedback on all 9 feature aspects, 🌗 dark/light theme, 🌐 EN / 中文.
npm install
cp .env.example .env # paste your OpenAI API key into .env
npm start # → http://localhost:3000Demo data lives in the browser's localStorage ("Reset demo data" is in Profile).
OPENAI_MODEL=gpt-5-mini (default). Cheaper alternative: gpt-4o-mini.
The key stays on the server / serverless function — never sent to the browser.
- Push this folder to a GitHub repo (or use
npx verceldirectly). - In vercel.com → Add New Project → import the repo. Framework preset: Other. No build command needed.
- In Settings → Environment Variables add:
OPENAI_API_KEY= your keyOPENAI_MODEL=gpt-5-mini(optional)
- Deploy. The static site is served from
public/, andapi/ai.jsruns as a serverless function at/api/ai.
CLI alternative:
npx vercel # first deploy, answer the prompts
npx vercel env add OPENAI_API_KEY
npx vercel --prod