Back to Overview
03 / 06
CASE STUDY · 03React Native & Expo SDK 542025

NutriLens AI

Multimodal vision nutrition & clinical metabolic intelligence mobile engine.

Screen 1 of 12Auto-scrolling every 3s
NutriLens AI — 01 Auth & Access
01 Auth & Access

Secure multi-session authentication with credential caching and partitioned profile binding

Application Screen Flow (Click any tag to jump to that screen)
Executive Architecture

System Overview & Engineering Longevity

A full-stack cross-platform mobile intelligence engine built with React Native and Expo SDK 54, integrating multimodal AI vision, zero-latency grocery barcode scanning, and dynamic Mifflin-St Jeor metabolic expenditure calculations. Designed to eliminate calorie logging friction, NutriLens routes in-memory Base64 image buffers through OpenRouter with an automated offline heuristic dataset fallback. Daily caloric expenditure, BMR, and TDEE adapt dynamically to activity levels and goal pacing, while an embedded clinical nutrition AI coach analyzes real-time daily intake to provide actionable dietary guidance without syntax clutter.

Core Capabilities

Key Engineering Highlights

In-memory camera vision pipeline with zero-latency Base64 streaming
Multimodal food segmentation with offline heuristic knowledge fallback
Zero-latency UPC/EAN barcode scanner backed by OpenFoodFacts API (3M+ items)
Clinically validated Mifflin-St Jeor metabolic physics engine (BMR & TDEE)
NutriLens AI Dietitian: goal-oriented nutrition chatbot with live context injection
Native markdown regex sanitizer eliminating asterisks and raw formatting
90-day interactive compliance calendar, trajectory charts & meal telemetry
Zustand 5 reactive state orchestration with user-partitioned Firebase RTDB
Deployment & Repository
Inspect GitHub Source
Technologies & Protocols
React NativeExpo SDK 54TypeScriptZustand 5OpenRouter AIFirebase RTDBOpenFoodFacts APIMifflin-St Jeor EngineReanimatedExpo Camera
Production Standard

Architected with clean domain separation, strict TypeScript contracts, and automated telemetry logging.

< 2.2s

Vision Inference Latency

End-to-end photo capture to itemized meal segmentation and macro breakdown.

3M+

Grocery Barcode Database

Instant OpenFoodFacts lookup across global UPC, EAN-8, and EAN-13 barcodes.

100%

Offline Availability

Guaranteed heuristic dataset fallback during connectivity interruptions.

0ms

Filesystem Cache Overhead

Direct in-memory Base64 streaming bypassing temporary storage writes.

Execution Pipeline

End-to-End System Data Flow

How user inputs, computer vision pipelines, and transaction protocols flow across the stack.

STEP 01

In-Memory Image Ingestion

Camera or gallery captures photo with direct base64: true buffer generation, bypassing local disk I/O and eliminating file latency.

STEP 02

OpenRouter Vision Routing

Multimodal payload dispatches to AI vision models, with automated circuit-breaker fallback to local clinical dataset if network drops.

STEP 03

Segmented Nutrition Normalization

AI-detected food items and portion weights are normalized into standard grams, caloric values, and precise P/C/F splits.

STEP 04

Mifflin-St Jeor Budget Validation

Metabolic engine computes meal impact against dynamic BMR/TDEE targets, updating remaining budget and surplus warning states.

STEP 05

Zustand & Cloud State Synchronization

Meal draft commits to Zustand reactive store and synchronously syncs to Firebase Realtime Database under partitioned user path.

Module Architecture

System Capabilities & 6+ Functional Modules

6+ Integrated Modules
Computer Vision & Inference

Multimodal AI Food Vision

In-memory image capture and segmentation pipeline converting plate photography into structured macronutrient telemetry without intermediate disk I/O.

Direct Base64 memory buffer piping via expo-camera eliminating filesystem caching latency
Dynamic OpenRouter AI routing with structured JSON extraction and portion estimation
Hardware Integration & Telemetry

Zero-Latency Barcode Scanner

High-throughput barcode scanning engine utilizing native camera sensors to identify packaged grocery items and fetch official nutrition facts.

Instant UPC-A, UPC-E, EAN-8, and EAN-13 hardware symbology recognition
Direct OpenFoodFacts REST API integration querying over 3,000,000 global products
Metabolic Science & Calculations

Mifflin-St Jeor Physics Engine

Clinically validated mathematical engine computing exact Basal Metabolic Rate and Total Daily Energy Expenditure based on dynamic biometrics.

Gender-specific BMR computation incorporating current weight, height, and age
5-tier physical activity multipliers scaling total daily expenditure from 1.2x to 1.9x
Conversational Intelligence

Clinical AI Nutritionist Coach

Goal-oriented clinical sports nutrition assistant injecting real-time metabolic context into every query for highly targeted dietary advice.

Automated context injection with remaining calories, consumed macros, and meal logs
Custom regex markdown sanitizer stripping asterisks for clean native mobile typography
Data Visualization & Tracking

90-Day Compliance & Trajectory

Long-term metabolic adherence engine visualizing adherence trends, caloric trajectories, and multi-week macro distribution splits.

Interactive monthly compliance calendar with color-coded target adherence dots
Dynamic React Native Chart Kit bar charts plotting daily intake against targets
State Management & Security

Reactive State & Cloud Isolation

Zustand 5 reactive store architecture combined with strictly partitioned Firebase Realtime Database isolation.

Synchronous, leak-free state transitions replacing legacy event-bus listeners
User-partitioned Firebase security rules strictly isolating records to authenticated UIDs
Technical Analysis

Key Engineering Bottlenecks & Solutions

Challenge 01

Memory Leaks and Navigation Race Conditions in Legacy Event Emitters

Migrated the entire global event bus (EventRegister) to Zustand v5 reactive stores (useMealDraftStore, useUserStore). State updates became synchronous, predictable, and cleanly bound to React component lifecycles without dangling unmount listeners.

Implemented & Verified
Challenge 02

Filesystem I/O Latency in Mobile Camera Capture

Configured CameraView.takePictureAsync and ImagePicker with direct base64: true in-memory buffers. This eliminated intermediate file system cache reads/writes, avoided deprecated Expo SDK 54 file-system APIs, and cut vision payload dispatch time by over 400ms.

Implemented & Verified
Challenge 03

API Rate Limits and Offline Single-Point-of-Failure

Engineered a dual-layer resilience architecture. If OpenRouter returns HTTP 429 or network timeouts occur, the ingestion pipeline immediately routes to a bundled 180KB verified clinical nutrition dataset, ensuring users can always log meals.

Implemented & Verified
Challenge 04

Unstyled Markdown Syntax Clutter in Native Mobile UI

Built a lightweight regex-based cleanMarkdownText sanitizer in lib/ai.ts that strips markdown asterisks, bold/italic markers, and hash headers while preserving native line breaks and list bullets, delivering clean native mobile typography.

Implemented & Verified
Next Case Study

FinGo Marketplace

Multi-vendor commerce platform with role-based merchant operations.

View Next System