How to Integrate Bolt.new with MyFitnessPal

Since MyFitnessPal has no API, choose one or more of these alternatives. For natural language food search (the closest experience to MyFitnessPal): go to developer.nutritionix.com, click 'Get API Keys', register a free account, and you'll receive an App ID and App Key. The free tier allows 500 requests per day. For scientific/government food data (free, no limits): go to fdc.nal.usda.gov/api-guide.html and request a free API key — basic searches work without a key, but a key increases rate limits. For recipe analysis: go to developer.edamam.com, choose the Nutrition Analysis API, register, and get an App ID and App Key. The free tier allows 5,000 calls per month. Add your chosen credentials to your .env.local file. Nutritionix requires both the App ID and App Key in request headers. USDA requires just the API key as a query parameter. Edamam requires both App ID and App Key as query parameters. All three APIs use HTTPS — outbound calls work in Bolt's WebContainer during development. Because Nutritionix and Edamam restrict browser origins for CORS, proxy all calls through a Next.js API route rather than calling from client-side code.

1// .env.local
2NUTRITIONIX_APP_ID=your_app_id_here
3NUTRITIONIX_APP_KEY=your_app_key_here
4USDA_API_KEY=your_usda_api_key_here
5EDAMAM_APP_ID=your_edamam_app_id_here
6EDAMAM_APP_KEY=your_edamam_app_key_here

Create a Next.js API route that accepts a food search query and returns structured nutritional data. The Nutritionix Instant Search endpoint (`/v2/search/instant`) accepts natural language input and returns both branded products and common foods. For each result it returns serving size, calories, protein, carbohydrates, fat, and fiber. The USDA FoodData Central search endpoint (`/v1/foods/search`) returns more detailed data including vitamins and minerals but requires mapping the response to a simpler structure for display. Your API route should normalize the response from whichever provider you use into a consistent shape: food name, brand (if applicable), serving size with unit, calories, protein, carbs, fat. This normalized shape keeps your frontend components provider-agnostic — you can swap providers without changing the UI.

1// app/api/nutrition/search/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4interface NutritionixFood {
5  food_name: string;
6  brand_name?: string;
7  serving_qty: number;
8  serving_unit: string;
9  nf_calories: number;
10  nf_protein: number;
11  nf_total_carbohydrate: number;
12  nf_total_fat: number;
13  nf_dietary_fiber: number;
14  nix_item_id?: string;
15  tag_id?: string;
16}
17
18export async function GET(request: NextRequest) {
19  const query = request.nextUrl.searchParams.get('q');
20  if (!query || query.length < 2) {
21    return NextResponse.json({ results: [] });
22  }
23
24  const res = await fetch(
25    `https://trackapi.nutritionix.com/v2/search/instant?query=${encodeURIComponent(query)}&detailed=true`,
26    {
27      headers: {
28        'x-app-id': process.env.NUTRITIONIX_APP_ID!,
29        'x-app-key': process.env.NUTRITIONIX_APP_KEY!,
30        'Content-Type': 'application/json',
31      },
32    }
33  );
34
35  if (!res.ok) {
36    return NextResponse.json({ error: 'Search failed' }, { status: res.status });
37  }
38
39  const data = await res.json();
40  const foods: NutritionixFood[] = [
41    ...(data.common ?? []),
42    ...(data.branded ?? []),
43  ];
44
45  const results = foods.slice(0, 20).map((food) => ({
46    id: food.nix_item_id ?? food.tag_id ?? food.food_name,
47    name: food.food_name,
48    brand: food.brand_name ?? null,
49    servingSize: food.serving_qty,
50    servingUnit: food.serving_unit,
51    calories: Math.round(food.nf_calories ?? 0),
52    protein: Math.round((food.nf_protein ?? 0) * 10) / 10,
53    carbs: Math.round((food.nf_total_carbohydrate ?? 0) * 10) / 10,
54    fat: Math.round((food.nf_total_fat ?? 0) * 10) / 10,
55    fiber: Math.round((food.nf_dietary_fiber ?? 0) * 10) / 10,
56  }));
57
58  return NextResponse.json({ results });
59}

With food search working, build the logging interface. Users search for a food, select a result, optionally adjust the serving size (e.g., 2 servings instead of 1), and log it to their daily diary. Store food log entries in Bolt Database or Supabase in a table with: user_id, food_name, brand, serving_size, serving_unit, servings_consumed, calories, protein, carbs, fat, logged_at (timestamp). Calculate macros by multiplying the per-serving values by the servings_consumed. Query the database to get all entries for today (where logged_at is today's date) and sum the totals. Display these totals as progress bars toward the user's daily goals. A standard 2000 calorie diet with typical macro splits is 150g protein, 225g carbohydrates, 67g fat — use these as default goals but let users customize. For the charting component, a horizontal bar chart showing each macro's progress toward the daily goal works well and renders clearly on mobile.

The USDA FoodData Central API is a valuable complement to Nutritionix — it's completely free, requires no API key for basic use, covers 300,000+ foods with lab-tested nutrient values including vitamins and minerals, and has no enforced rate limits (though fair use applies). It's particularly useful for educational nutrition apps, detailed micronutrient analysis, or as a fallback when the Nutritionix free tier is exhausted. The search endpoint is `https://api.nal.usda.gov/fdc/v1/foods/search?query={term}&api_key=DEMO_KEY`. DEMO_KEY allows 30 requests per IP per hour — register a free key for higher limits. The USDA response includes detailed nutrient arrays for each food item. Map the nutrient array to named values using the nutrient ID numbers: 1008 = Energy (kcal), 1003 = Protein, 1004 = Total fat, 1005 = Carbohydrates, 1079 = Dietary fiber. Since outbound HTTPS calls work in Bolt's WebContainer, you can test USDA searches directly in the preview.

1// app/api/nutrition/usda/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4interface UsdaNutrient {
5  nutrientId: number;
6  value: number;
7}
8
9const NUTRIENT_MAP: Record<number, string> = {
10  1008: 'calories',
11  1003: 'protein',
12  1004: 'fat',
13  1005: 'carbs',
14  1079: 'fiber',
15};
16
17export async function GET(request: NextRequest) {
18  const query = request.nextUrl.searchParams.get('q');
19  if (!query) return NextResponse.json({ results: [] });
20
21  const apiKey = process.env.USDA_API_KEY || 'DEMO_KEY';
22  const url = `https://api.nal.usda.gov/fdc/v1/foods/search?query=${encodeURIComponent(query)}&pageSize=15&api_key=${apiKey}`;
23
24  const res = await fetch(url);
25  if (!res.ok) return NextResponse.json({ error: 'USDA search failed' }, { status: res.status });
26
27  const data = await res.json();
28  const results = (data.foods ?? []).map((food: {
29    fdcId: number;
30    description: string;
31    brandOwner?: string;
32    servingSize?: number;
33    servingSizeUnit?: string;
34    foodNutrients: UsdaNutrient[];
35  }) => {
36    const nutrients: Record<string, number> = {};
37    food.foodNutrients.forEach((n) => {
38      const key = NUTRIENT_MAP[n.nutrientId];
39      if (key) nutrients[key] = Math.round(n.value * 10) / 10;
40    });
41    return {
42      id: String(food.fdcId),
43      name: food.description,
44      brand: food.brandOwner ?? null,
45      servingSize: food.servingSize ?? 100,
46      servingUnit: food.servingSizeUnit ?? 'g',
47      calories: nutrients.calories ?? 0,
48      protein: nutrients.protein ?? 0,
49      carbs: nutrients.carbs ?? 0,
50      fat: nutrients.fat ?? 0,
51      fiber: nutrients.fiber ?? 0,
52    };
53  });
54
55  return NextResponse.json({ results });
56}