Calorie Counter App – Comprehensive Build Guide

Overview

In this tutorial, we'll build a Calorie Counter App step by step, using React Native, Expo, Firebase (Auth & Firestore) to store user data and authenticate users, and OpenAI to analyze meals (through pictures) and generate approximate macros.. This guide is beginner-friendly and includes explanations for each part of the process. Follow along to replicate the app demonstrated in the YouTube video, and feel free to customize as you go.

Prompt: "Create a detailed markdown (context.md) file clearly describing the app I'm building using React Native (Expo). The file should include a concise app overview, explicit descriptions of all features, the precise number of screens and tabs (clearly defining each screen’s purpose and functionalities), and the technical stack involved—React Native Expo for frontend, Expo Router for navigation, Firebase for authentication and Firestore database, and OpenAI API for AI-based features. Clearly outline all states managed by React’s Context API (such as Authentication and Theme), Firestore database structure, and methods for OpenAI integration. Define explicit boundaries and constraints to ensure that no additional or unsupported features, libraries, or components are added by the AI agent. Ensure clarity and completeness so the AI can follow this documentation precisely, consistently building the app from start to finish without deviating or introducing errors."

Requirements (Prerequisites)

Before we start, make sure you have the following ready:

• Cursor Editor – for writing your code.

• Firebase Account – to use Firebase Authentication and Firestore database.

• OpenAI Account – for using the OpenAI API (we'll use it to analyze food images for nutritional info).

• Expo Go - Install Expo Go mobile app on your device.

• Node.js – installed on your machine (use the LTS version).

• Expo CLI – installed globally (npm install -g expo-cli) or use npx (Expo CLI will help run and build the app).

With these in place, let’s dive into building the app.

Tech Stack

• Frontend: [React Native](https://reactnative.dev/) with TypeScript, managed by [Expo](https://expo.dev/).

• Navigation: [Expo Router](https://expo.github.io/router/docs/) for file-based routing.

• Context API: For global states (Authentication, Theme, etc).

• Backend/Database: [Firebase](https://firebase.google.com/) (Authentication + Firestore).

• AI Processing: [OpenAI API](https://platform.openai.com/docs/api-reference).

Core Functionality

1. Onboarding Flow

• Welcome Screen: Appears on app launch, provides a brief introduction. Buttons/Links to Sign Up or Log In.

• Signup & Login Screens: Users create an account or sign in using email and password. On success, user is redirected to the Home Screen.

2. Tabs

• Home Screen (Default Tab)

  • Shows logged meals (or a placeholder if none are logged).

  • Allows users to take photos or select images from the gallery to be analyzed by the OpenAI API.

• Settings Screen (Second Tab)

  • Logout

  • Delete Account

  • Toggle Light/Dark Theme

3. Image Analysis

• Users capture or select a photo.

• The app sends the image to the OpenAI service.

• The API returns approximate macros, which are then stored in Firestore (associated with the authenticated user).

4. Authentication, Data Storage & Theme

• Firebase Authentication for user sign-up and login.

• Firestore to store user data (meal logs, macros).

• Context-based state management for auth and theme.

5. Allowed React Native Components: Use built-in React Native components by default (View, Text, Button, FlatList, TextInput, etc.) for additional external UI libraries (like react-native-paper) are allowed and for which specific components (e.g., Switch, Modal, Dialog)

6. Database Structure (Firestore)

   Firestore collections/documents structure to follow:

   • Collection: mealLogs

     • Fields:

       • userId (string, required)

       • analysis (string, required)

       • imageUrl (optional, string)

       • createdAt (timestamp, required)

7. OpenAI Integration Details

   Use the latest OpenAI documentation and model ( Note: that gpt-4o-vision-preview is depreciated, use gpt-4o instead)

   Upload to Firebase storage and use URL for OpenAI API) Analyze image at provided URL and return approximate macros (calories, protein, carbs, fats).

8. Explicit Limitations & Boundaries

   • DO NOT integrate any features not listed explicitly in this documentation.

   • DO NOT use any dependency or package other than those listed explicitly in this document.

   • DO NOT implement backend or external integrations beyond Firebase Authentication, Firestore, Firebase Storage, and OpenAI API.

   • DO NOT invent or assume features beyond what is explicitly stated here.

   • DO NOT break the Expo Router conventions or React Native best practices.

Step 1: Project Setup

1. Initialize the React Native project: Expo makes it easy to bootstrap a new React Native app. Open your terminal and run the following command to create a new app (you can name it anything, e.g., "CalorieCounterApp"):

• npx create-expo-app@latest CalorieCounterApp

After the command completes, navigate into the project folder:

• cd CalorieCounterApp

Next reset the project using:

• npm run reset-project.

2. Install required dependencies: 

• npm install expo-router firebase expo-image-picker @react-native-async-storage/async-storage expo-constants react-native-paper expo-camera @expo/vector-icons expo-image react-native-modalize openai date-fns

3. Run the app:

After installing the libraries run the app by running this command:

• npx expo start 

After running the command open Expo Go on your mobile device scan the QR code to run the app.

4. Project structure:

CalN/

├── app/ # Expo Router pages and layouts

│ ├── _layout.tsx # Root layout (navigation container, providers)

│ ├── _index.tsx # Main entry point (checks auth state, routes accordingly)

│ ├── +not-found.tsx # "Not Found" screen (404 handling)

│ └── (onboarding)/ # Public routes for logged-out users

│ ├── _layout.tsx # Onboarding layout (could redirect if user is logged in)

│ ├── welcome.tsx # Welcome screen

│ ├── login.tsx # Login screen

│ └── signup.tsx # Signup screen

│ └── (tabs)/ # Protected routes (require authentication)

│ ├── _layout.tsx # Tab bar layout for Home/Settings

│ ├── index.tsx # Home screen (default tab)

│ └── settings.tsx # Settings screen

│

├── contexts/ # Context API providers

│ ├── AuthContext.tsx # Authentication context

│ └── ThemeContext.tsx # Theme context (light/dark)

│

├── hooks/ # Custom hooks

│ ├── useAuth.ts # Hook to consume AuthContext

│ ├── useTheme.ts # Hook to consume ThemeContext

│ └── useMeals.ts # Hook for fetching/syncing meal data

│

├── services/ # External services config and functions

│ ├── firebaseConfig.ts # Firebase initialization

│ └── openai.ts # Functions to call OpenAI API

│

└── .env/ # Environment variables (Firebase & OpenAI keys)

Step 2: Environment Setup (API Keys and Configuration)

The app will need configuration details for Firebase and OpenAI. It’s best practice not to hardcode API keys. Use environment variables.

1. Create a .env file: In the root of the project, create a file named .env. Add your Firebase config and OpenAI key here. Expo will automatically load environment variables that start with EXPO_PUBLIC_ into the app at runtime. For example, put the following in your .env file (replace the placeholder values with your actual keys/config):

• EXPO_PUBLIC_FIREBASE_API_KEY= YOUR_FIREBASE_API_KEY

• EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN= YOUR_FIREBASE_PROJECT.firebaseapp.com

• EXPO_PUBLIC_FIREBASE_PROJECT_ID= YOUR_FIREBASE_PROJECT_ID

• EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET= YOUR_FIREBASE_PROJECT.appspot.com

• EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID= YOUR_SENDER_ID

• EXPO_PUBLIC_FIREBASE_APP_ID= YOUR_APP_ID

• EXPO_PUBLIC_OPENAI_API_KEY= sk-YOUR_OPENAI_SECRET_KEY

These keys come from:

• Firebase: In the Firebase console, create a new project for this app. Enable Email/Password in Authentication (under "Sign-in method") and create a Firestore database. Then add a Web App in Firebase to get the Firebase config object (which provides API key, Auth domain, Project ID, etc.).

• OpenAI: Generate an API key from your OpenAI account dashboard.

Protect your keys: Make sure to add the .env file to your .gitignore if you use git, so you don't accidentally upload secrets to a repository.

Conclusion

In conclusion, this tutorial has provided a comprehensive guide to building a Calorie Counter App(Or something else) using React Native, Expo, and Firebase for user authentication and data storage, alongside OpenAI for advanced meal analysis. By following the detailed steps outlined, you should now have a functional app. Remember, the journey doesn’t end here; explore further customizations and enhancements to make the app your own.

Good Luck! Glo out!