How to vibe codeMyFitnessPal

Prerequisites

• Node.jsfree

  Runtime environment for building and running the full-stack application and package manager.

• Expo Accountfree

  Required for building and testing cross-platform mobile app binaries on iOS and Android.

• 

  OpenAI API Keypay-as-you-go (~$5-10/mo)

  Powers the AI Meal Scan photo recognition and Voice Log audio transcription features.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding the full mobile app architecture and writing complex database schema migrations.

• Cursor

  Ideal for fine-tuning React Native UI components, styling macro progress rings, and reviewing file diffs visually.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Expo React Native app with Expo Router and configure Turso SQLite with tables for users, daily logs, meal items, and custom foods.

   Initialize a new Expo React Native project using Expo Router and TypeScript. Set up a modular folder structure for features, components, and services. Configure a SQLite local storage layer using WatermelonDB that syncs with a Turso database backend. Write migration scripts to create tables for users (storing height, weight, activity level, goal weight), daily_logs (date, user_id), meal_entries (id, daily_log_id, meal_type enum: breakfast/lunch/dinner/snack, food_name, calories, protein_g, carbs_g, fat_g, serving_size), and saved_foods. Ensure all database operations include strict TypeScript typing and error handling boundaries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02BMR & TDEE Calculator & Onboarding

   Build onboarding screens to capture user vitals and compute daily calorie and macro targets using the Mifflin-St. Jeor formula.

   Build a multi-step onboarding flow in React Native using Expo Router. Collect user age, gender, height, weight, goal weight, weekly weight change target, and physical activity level. Implement a utility function that calculates Basal Metabolic Rate (BMR) using the Mifflin-St. Jeor equation and scales it by activity multiplier to determine Total Daily Energy Expenditure (TDEE). Adjust TDEE by +/- 500 calories per desired pound of weekly change to establish a daily net calorie budget. Save these targets to the user profile table in Turso and display them on the main dashboard screen.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Food Search & Nutrition Database Integration

   Implement a food search interface that queries the USDA FoodData Central API and allows users to log items into specific meals.

   Create a search screen with a debounced input that queries an external nutrition database API (such as USDA FoodData Central or Edamam) alongside local custom user foods. Render search results with macro splits (calories, protein, carbs, fat). When a user selects an item, open a modal to adjust serving size and select a meal category (Breakfast, Lunch, Dinner, Snack). Write mutations to save the entry to the database and update local state instantly, ensuring offline creation queues successfully via WatermelonDB.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Dashboard & Macro Progress Rings

   Develop the primary dashboard showing remaining calories, macro progress bars, and water intake counters.

   Build the main diary dashboard screen displaying the active date selector, total calorie budget, calories consumed, calories burned from exercise, and remaining calorie allowance. Add visual progress bars or rings for protein, carbohydrates, and fat tracking against daily macro grams targets. Include a quick water intake tracker component with add/subtract buttons that persist water ounces to the daily log. Ensure all computations update dynamically when a new meal entry is added or deleted.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Meal Scan & Voice Log Integration

   Integrate camera photo capture and audio recording to parse meal logs automatically using OpenAI Vision and Whisper.

   Implement two AI logging modalities using OpenAI APIs. First, build a camera screen using Expo Camera that captures a meal photo, sends it to OpenAI GPT-4o Vision API with a strict JSON system prompt to identify food items, estimated portions, and macro breakdowns, and returns structured fields to pre-fill the logging modal. Second, build a voice recording utility using Expo AV that records user speech, sends the audio file to the OpenAI Whisper API for transcription, and uses an LLM extraction pass to parse conversational food descriptions (e.g., 'I ate two eggs and a piece of toast') into structured meal entries.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, Offline Sync, and Local Testing

   Refine UI styling, handle offline network dropouts, and verify end-to-end logging flows on iOS and Android simulators.

   Audit the entire React Native codebase for UI polish, ensuring consistent dark/light theme styling, smooth modal transitions, and accessible touch targets. Implement network connectivity listeners to handle offline logging gracefully, storing mutations in a local queue and executing sync synchronization against Turso when connectivity restores. Write unit tests for the Mifflin-St. Jeor calculation engine and verify that all screens render correctly across both iOS and Android simulator devices.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for MyFitnessPal