How to Integrate Lovable with MyFitnessPal

Go to platform.fatsecret.com/api and click 'Register'. FatSecret's registration is straightforward — you provide your name, email, and a description of how you'll use the API. There's no approval process; you receive API credentials immediately after registration. After registering, log into the developer portal and navigate to 'My Apps'. Click 'Create a new application'. Fill in the application name and description. FatSecret generates a Consumer Key and Consumer Secret for your application. Copy both — the Consumer Secret is shown on the credentials page and can be retrieved later if needed (unlike some APIs that show it only once). FatSecret uses OAuth1 for authentication, which is older than OAuth2 but straightforward in practice. Unlike OAuth2 where you redirect users to authorize access, FatSecret's food data API is public — you use your app's Consumer Key and Secret to authenticate each request without user involvement. The free tier provides 5,000 calls/day and 300,000 calls/month, which is more than sufficient for most nutrition apps. Key FatSecret endpoints: food.search (search by name), food.get (get full nutritional data by ID), food.get.v2 (returns more detailed data), foods.search.v2 (returns more structured results). All responses are available in JSON (add &format=json to requests) or XML.

Open your Lovable project, click '+', select 'Cloud', and expand Secrets. Add FATSECRET_CONSUMER_KEY with your Consumer Key value and FATSECRET_CONSUMER_SECRET with your Consumer Secret value. Also add FATSECRET_API_URL with 'https://platform.fatsecret.com/rest/server.api' as the base endpoint URL. FatSecret uses OAuth1 signature generation, which requires computing an HMAC-SHA1 signature for each request. The signature incorporates your Consumer Secret along with the request parameters and a timestamp/nonce for replay protection. Because the Consumer Secret is part of every request signature, it must never appear in frontend code. If you prefer Nutritionix over FatSecret, add NUTRITIONIX_APP_ID and NUTRITIONIX_APP_KEY instead. Nutritionix uses simple API key authentication (x-app-id and x-app-key headers) which is easier to implement than OAuth1, and their NLP endpoint ('natural' endpoint) accepts plain text descriptions like 'grilled chicken breast 6oz' and returns parsed nutritional data — a significant usability advantage for natural language input.

FatSecret requires OAuth1 request signing. Each API call needs: a timestamp (Unix epoch seconds), a nonce (unique random string per request), the request parameters sorted alphabetically, a signature base string combining HTTP method + encoded URL + encoded parameter string, and an HMAC-SHA1 signature computed using Consumer Secret + '&' (no token secret since this is app-only auth). While OAuth1 looks complex, implementing it in Deno is manageable using the built-in crypto.subtle API for HMAC-SHA1. The key steps are: collect all parameters (method params + oauth params), sort them alphabetically by key, percent-encode both keys and values, join as key=value pairs with '&', prepend the HTTP method and encoded endpoint URL, compute HMAC-SHA1 with the Consumer Secret as the key, and Base64-encode the result. For food search, the main parameters are method='food.search', search_expression (the search term), max_results (up to 50), page_number, and format='json'. The response includes a list of foods with basic info. To get full nutritional data, follow up with food.get using the food_id from search results. Build the Edge Function to support: action='search' (search by text query, returns list with basic nutrition), action='get-food' (get full nutrition by food_id), and action='log-food' (save diary entry to Supabase).

1// supabase/functions/nutrition-api/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
4
5const CONSUMER_KEY = Deno.env.get("FATSECRET_CONSUMER_KEY") ?? "";
6const CONSUMER_SECRET = Deno.env.get("FATSECRET_CONSUMER_SECRET") ?? "";
7const API_URL = "https://platform.fatsecret.com/rest/server.api";
8const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization" };
9
10function percentEncode(str: string) { return encodeURIComponent(str).replace(/!/g, "%21").replace(/'/g, "%27").replace(/\(/g, "%28").replace(/\)/g, "%29").replace(/\*/g, "%2A"); }
11
12async function fatSecretRequest(method: string, params: Record<string, string>) {
13  const nonce = crypto.randomUUID().replace(/-/g, "");
14  const timestamp = Math.floor(Date.now() / 1000).toString();
15  const allParams: Record<string, string> = { ...params, method, format: "json", oauth_consumer_key: CONSUMER_KEY, oauth_nonce: nonce, oauth_signature_method: "HMAC-SHA1", oauth_timestamp: timestamp, oauth_version: "1.0" };
16  const sortedParams = Object.entries(allParams).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${percentEncode(k)}=${percentEncode(v)}`).join("&");
17  const baseString = `GET&${percentEncode(API_URL)}&${percentEncode(sortedParams)}`;
18  const key = await crypto.subtle.importKey("raw", new TextEncoder().encode(`${CONSUMER_SECRET}&`), { name: "HMAC", hash: "SHA-1" }, false, ["sign"]);
19  const sig = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode(baseString));
20  const signature = btoa(String.fromCharCode(...new Uint8Array(sig)));
21  const url = `${API_URL}?${sortedParams}&oauth_signature=${percentEncode(signature)}`;
22  const res = await fetch(url);
23  return res.json();
24}
25
26serve(async (req) => {
27  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
28  const supabase = createClient(Deno.env.get("SUPABASE_URL") ?? "", Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "");
29  try {
30    const body = await req.json();
31    const { action } = body;
32
33    if (action === "search") {
34      const data = await fatSecretRequest("foods.search.v2", { search_expression: body.query, max_results: "20", page_number: "0" });
35      const foods = (data.foods_search?.results?.food ?? []).map((f: any) => ({ food_id: f.food_id, food_name: f.food_name, food_type: f.food_type, servings: f.servings?.serving ? (Array.isArray(f.servings.serving) ? f.servings.serving : [f.servings.serving]) : [] }));
36      return new Response(JSON.stringify({ foods }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
37    }
38
39    if (action === "log-food") {
40      const { user_id, date, meal_type, food_id, food_name, serving_size, calories, protein, carbs, fat } = body;
41      await supabase.from("food_diary").insert({ user_id, date, meal_type, food_id, food_name, serving_size, calories, protein, carbs, fat, created_at: new Date().toISOString() });
42      return new Response(JSON.stringify({ success: true }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
43    }
44
45    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
46  } catch (err) {
47    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
48  }
49});

With the Edge Function handling food data, build the calorie tracking UI. The main interface consists of three parts: a food search and logging flow, a daily diary view showing all logged items, and a nutrition summary dashboard. For the search and log flow, display a search bar that queries the nutrition-api Edge Function on each keystroke (debounced to 500ms to avoid excessive API calls). Show results as a dropdown list with food name, serving description, and calories. When a user selects a food, show a serving size selector and a 'Log to Diary' button that adds the entry via action='log-food'. For the diary view, query the food_diary Supabase table for today's entries grouped by meal_type (breakfast, lunch, dinner, snack). Show each meal section with its entries and a subtotal. Show a daily total at the top. For the summary dashboard, calculate totals from the food_diary table: total calories vs. daily goal (configurable in user settings), protein/carbs/fat macros as gram amounts and percentages of total calories, a circular progress ring for calorie goal, and a horizontal macro distribution bar. Add a nutrition settings page where users can set their daily calorie goal (default 2000) and macro targets. Store these in a user_nutrition_goals Supabase table.