FotoKalorie was developed to solve the biggest pain point in nutrition tracking: the tedious, manual logging of meals. I engineered a production-grade React Native application that leverages OpenAI's GPT-4o vision to turn a simple photo of food into detailed nutritional data instantly. The project involved building a full-stack serverless architecture with Supabase, integrating a sophisticated subscription model with RevenueCat and Superwall, and designing a polished, intuitive user interface. The result is a seamless and almost magical user experience that demonstrates expertise in building complex, AI-driven mobile products from concept to launch.
01 The Challenge: Reinventing Calorie Tracking
Calorie counting is notoriously tedious, inconsistent, and a major reason why users abandon nutrition goals. The primary challenge was to create an experience that feels effortless and motivating, removing the manual entry barrier entirely.
FotoKalorie addresses this by creating a "scan-and-go" workflow. The project goal was to architect a robust mobile app that could reliably perform a complex pipeline: capture an image, securely send it for AI analysis, receive structured nutritional data, and present it to the user in a clear, actionable format. This required a deep integration of cutting-edge AI, a scalable serverless backend, and a user-centric design philosophy.
Industry: Health & Fitness, AI Technology
Scope: Full-Stack Mobile Development, AI Vision Integration, UI/UX Design, Monetization Strategy
Platform: iOS & Android (Expo React Native)
Core Tech: React Native, OpenAI GPT-4o, Supabase, RevenueCat & Superwall
Designs from left: Main app view to log everyday meals; detailed view of scanned food; progress tab;
02 Core Features & Product Decisions
AI Vision Pipeline: From Photo to Nutrition in Seconds
The app's centerpiece is its AI scanning pipeline. A user can take a photo or choose one from their gallery. The image is locally normalized to JPEG, uploaded securely to Supabase Storage, and sent to OpenAI's GPT-4o vision model. We engineered a robust parsing and validation layer to convert the AI's response into structured JSON, ensuring data reliability before displaying it in beautifully designed nutrition cards.
Smart Nutrition & Goal Tracking
Getting the data is only half the battle. FotoKalorie makes it meaningful by calculating personalized daily macro targets using established formulas like the Mifflin-St Jeor BMR. The UI features a nutrition-carousel for at-a-glance progress, detailed daily and weekly charts for macro analysis, and streaks to build positive user habits.
Seamless Monetization & Premium Gating
To support a freemium model, we implemented a sophisticated subscription engine. Superwall is used for its powerful placement and campaign management, allowing for dynamic, native paywalls to be presented at key moments. RevenueCat handles the complexities of purchases and entitlement management across iOS and Android. A custom purchase controller and debounced data sync between the two services ensure a smooth and reliable premium user experience.
Designs from left: Photo scan modal; calories progress tracker; one of many components of setting nutrition goals
03 Technical & Product Hurdles
Building a production-grade AI app involves solving unique challenges. This case study highlights key problems and their solutions:
Challenge | Solution |
|---|---|
The AI's JSON output for nutrition was often unstable or malformed. | I developed a multi-strategy JSON extraction function, implemented stricter system prompts for the AI, and added retry logic to ensure a high success rate in data parsing. |
Keeping subscription status from RevenueCat and paywall logic from Superwall perfectly in sync could lead to race conditions. | I created a debounced synchronization hook that intelligently updates Superwall with the latest entitlement data from RevenueCat, with a fallback system to ensure users always have correct access. |
Apple devices often produce HEIC images, which are not universally compatible with APIs. | An image processing step was added directly in the app to force JPEG conversion before any image is uploaded, guaranteeing compatibility across the entire pipeline. |
04 A Modern Design System & Scalable Architecture
Design System & UI
The UI was built with NativeWind (Tailwind CSS) on top of a shadcn-inspired component system. This approach allows for rapid development while maintaining a cohesive, scalable, and easily themeable design system. By using class-variance-authority for component variants and a simple cn helper, we ensured that the UI is both beautiful and maintainable.
Technical Architecture
Frontend: Expo (React Native 0.79) with TypeScript, Expo Router 5 for file-based navigation (using route groups for public, protected, and premium areas), and NativeWind for styling.
Backend: A completely serverless stack using Supabase for PostgreSQL, Authentication (with Apple/Google Sign-In), and Storage. Row-Level Security (RLS) is enforced to ensure all user data is private and secure.
Services: OpenAI GPT-4o for AI vision, RevenueCat & Superwall for monetization, and EAS for builds and OTA updates.
Few onboarding steps
05 The Result: A Production-Ready AI Application
FotoKalorie is a comprehensive case study in modern mobile application development, demonstrating the ability to take a complex idea and execute it with precision. It successfully integrates a cutting-edge AI feature into a user-friendly and commercially viable product.
The project showcases deep expertise across the entire product lifecycle: strategic backend architecture with Supabase, polished UI/UX with a modern design system, complex AI pipeline engineering, and a robust, market-ready monetization strategy. It stands as a powerful example of how to build applications that are not only technologically advanced but also thoughtfully designed to solve real user problems.
