Cal AI

Prerequisites

• Node.jsfree

  Runtime environment for building the full-stack web and mobile application.

• GitHubfree

  Source control and deployment pipeline integration.

• 

  OpenAI or Anthropic API Keypay-as-you-go

  Required for multimodal vision analysis of meal photos.

AI coding tools

• Claude Code

  Agentic terminal coding tool to scaffold and build the full-stack nutrition app end-to-end.

• Cursor

  AI-native code editor for fine-tuning UI components, camera integrations, and charts.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a full-stack Next.js project with Tailwind CSS and Supabase integration, setting up tables for users, meals, food items, and daily goals.

   Scaffold a new Next.js 16 project with Tailwind CSS v4, TypeScript, and Supabase client configuration. Create a Supabase SQL migration file for a nutrition tracking app with tables: 'profiles' (id, user_id, target_calories, target_protein, target_carbs, target_fat), 'meals' (id, user_id, meal_type, image_url, logged_at, total_calories, total_protein, total_carbs, total_fat), and 'food_items' (id, meal_id, name, portion_grams, calories, protein, carbs, fat). Implement Supabase Auth helpers for email/password sign-in. Ensure all configurations are clean and ready for deployment.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Camera Capture & Mobile-First UI Dashboard

   Build a responsive, mobile-first dashboard featuring a bottom navigation bar, daily progress rings for calories and macros, and a prominent camera capture button.

   Create a mobile-first dashboard page in Next.js styled with Tailwind CSS. Include a header showing daily streak and date, circular progress bars for calories remaining and macros (protein, carbs, fat), a chronological list of logged meals for today, and a prominent floating action button (+ button) to log a new meal. Build a responsive modal or dedicated view for capturing photos directly from a mobile device camera or uploading an image file from the gallery. Implement proper loading skeletons and error states.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Multimodal AI Vision Integration

   Implement a backend API route that accepts food photos, sends them to OpenAI GPT-4o with structured prompt engineering, and returns parsed nutritional data.

   Build a server-side API endpoint in Next.js that accepts a base64 image or image URL of a meal. Use the OpenAI SDK to call GPT-4o with a specialized prompt instructing the model to act as an expert nutritionist and calorie estimator. The model must return a strictly validated JSON response containing: meal description, estimated total weight in grams, total calories, protein (g), carbs (g), fat (g), and an array of individual food items detected with their respective macro breakdown. Handle invalid images, network timeouts, and malformed JSON fallbacks gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Meal Logging & Confirmation Flow

   Connect the AI vision analysis output to an interactive review screen where users can inspect detected items, adjust portion sizes, and save the meal to Supabase.

   Implement the meal logging confirmation flow. When the vision API returns macro data from a photo, display an interactive review screen showing the preview image, estimated totals, and an editable list of detected food items. Allow users to edit item names, portion sizes, or delete items, which dynamically recalculates total calories and macros. Add a 'Save Meal' button that writes the record and associated items into the Supabase 'meals' and 'food_items' tables, then redirects back to the dashboard with an updated daily summary.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Barcode Scanner & Manual Search Fallback

   Integrate barcode scanning capabilities and manual text search using public food databases to handle packaged goods and items unsuitable for photo estimation.

   Add alternative logging methods: a barcode scanner using the browser's camera (via html5-qrcode or equivalent lightweight library) that queries the Open Food Facts API to retrieve product nutrition, and a manual search input that queries a mock or external food database. When a food item is found via barcode or manual search, allow the user to adjust serving sizes and save it directly to their daily log using the same data structure as the photo scanner.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Dashboard Analytics & Polish

   Add historical weekly charts, dark mode styling, and data export features to round out the personal tracker experience.

   Enhance the application with a weekly analytics tab showing calorie and macro trends over the last 7 days using simple SVG charts or Tailwind-based progress bars. Ensure full support for a sleek dark mode theme matching modern fitness apps. Add user settings to update daily calorie and macro goals, and implement a data export feature to download nutrition logs as CSV or JSON.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Cal AI