How to Build a Calorie Tracker App

const DEFAULT_PROFILE: Profile = {
  sex: 'male', age: 30, heightCm: 180, weightKg: 80, activity: 'moderate', goal: 'maintain',
};

// Tutorial persistence: one dummy user in local storage.
// In production, save this to the user's row in your database instead.
const KEY = 'ymove-demo-profile';

const [profile, setProfile] = useState<Profile>(() => {
  if (typeof window === 'undefined') return DEFAULT_PROFILE;
  try { return JSON.parse(window.localStorage.getItem(KEY)!) as Profile; } catch { return DEFAULT_PROFILE; }
});

useEffect(() => {
  window.localStorage.setItem(KEY, JSON.stringify(profile));
}, [profile]);

export interface Profile {
  sex: 'male' | 'female'; age: number; heightCm: number; weightKg: number;
  activity: 'sedentary' | 'light' | 'moderate' | 'active' | 'athlete';
  goal: 'cut' | 'maintain' | 'bulk';
}

const ACTIVITY = { sedentary: 1.2, light: 1.375, moderate: 1.55, active: 1.725, athlete: 1.9 };
const GOAL = { cut: -500, maintain: 0, bulk: 300 };

function mifflinBMR(p: Profile) {
  const base = 10 * p.weightKg + 6.25 * p.heightCm - 5 * p.age;
  return p.sex === 'male' ? base + 5 : base - 161;
}

export function computeTargets(p: Profile) {
  const bmr = Math.round(mifflinBMR(p));
  const tdee = Math.round(bmr * ACTIVITY[p.activity]);
  const calories = Math.max(1000, tdee + GOAL[p.goal]);
  const protein = Math.round(2 * p.weightKg);            // 2 g/kg
  const fat = Math.round((calories * 0.25) / 9);         // 25% of kcal
  const carbs = Math.max(0, Math.round((calories - protein * 4 - fat * 9) / 4));
  return { bmr, tdee, calories, protein, fat, carbs };
}

const target = useMemo(() => computeTargets(profile), [profile]);
const pct = Math.min(100, Math.round((totals.kcal / target.calories) * 100));
const c = 2 * Math.PI * 80;

<circle r={80} cx={100} cy={100} fill="none" stroke="#10b981" strokeWidth={10}
  strokeDasharray={c} strokeDashoffset={c - (pct / 100) * c} strokeLinecap="round" />

import type { Food } from 'ymove-exercise-api';

// Food macros are PER SERVING; normalise to per-gram so any portion scales.
function foodPerG(f: Food) {
  const s = f.servingSize || 1;
  return { calories: f.calories / s, protein: f.protein / s, fat: f.fat / s, carbs: f.carbs / s };
}

// displayed kcal for a logged item = item.grams * item.perG.calories
function setGrams(id: number, grams: number) {
  setMeal((m) => m.map((e) => (e.id === id ? { ...e, grams: Math.max(0, grams) } : e)));
}

import type { NextApiRequest, NextApiResponse } from 'next';
import { ymove } from '../../lib/ymove';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const q = typeof req.query.q === 'string' ? req.query.q : '';
  if (!q) return res.status(400).json({ error: 'Missing q' });
  const result = await ymove.foods.search({ q, pageSize: 10 });
  res.status(200).json(result);   // { data: Food[], pagination }
}

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).json({ error: 'Method not allowed' });
  const { text } = req.body;
  const result = await ymove.foods.logText({ text });   // { items[], totals }
  res.status(200).json(result);
}

// Build a per-gram entry from an AI item, keeping confidence + matched name visible.
function entryFromItem(it) {
  const g = it.estimatedGrams || 1;
  const n = it.nutrition ?? { calories: 0, protein: 0, fat: 0, carbs: 0 };
  return {
    id: nextId++, name: it.name, grams: it.estimatedGrams,
    perG: { calories: n.calories / g, protein: n.protein / g, fat: n.fat / g, carbs: n.carbs / g },
    confidence: it.confidence, matchedName: it.matchedFood?.name,
  };
}

// "fix match": replace a bad match with a searched food, keep the grams.
function fixMatch(id, f) {
  setMeal((m) => m.map((e) => e.id === id
    ? { ...e, name: f.displayName, perG: foodPerG(f), confidence: undefined, matchedName: undefined }
    : e));
}

export const config = { api: { bodyParser: { sizeLimit: '20mb' } } };

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).json({ error: 'Method not allowed' });
  const { image, media_type } = req.body;            // image = base64 (no data: prefix)
  try {
    const result = await ymove.foods.logPhoto({ image, media_type });
    res.status(200).json(result);
  } catch (e) {
    res.status(e?.status ?? 500).json({ error: e?.message });  // 402/403 gate, 429 cap
  }
}

const reader = new FileReader();
reader.onload = () => {
  const base64 = String(reader.result).split(',')[1];   // strip the data: prefix
  post('/api/log-photo', { image: base64, media_type: file.type || 'image/jpeg' });
};
reader.readAsDataURL(file);