I Built a Full-Stack AI Calorie Tracker in React Native — Point, Scan, Done 🤖

What if you could point your phone at ANY food and instantly know the calories, protein, carbs, and fat — no manual logging, no barcode scanning, just AI magic? That's exactly what I built — Calorie Cam AI, a full-stack, production-grade AI calorie tracking app powered by Google's Gemini AI. In this video, I'll show you the full app walkthrough, the tech stack behind it, and kick off the series where we build it from scratch — step by step. --- 🔥 WHAT THIS APP DOES: → Snap a photo of any food → Gemini AI identifies every item, estimates portions → Instantly get calories, protein, carbs & fat → Dietary tags: vegetarian, halal, high protein, etc. → Food diary with day-by-day navigation → 7-day insights, streaks, macro charts → Beautiful onboarding + dark mode --- 🛠️ TECH STACK: 📱 Mobile (React Native / Expo): • React Native + Expo • Expo Router (file-based navigation) • HeroUI Native (UI components) • NativeWind / UniWind (Tailwind on mobile) • React Hook Form + Zod ⚙️ Backend: • Hono (TypeScript-first server framework) • Bun (runtime) • Drizzle ORM + PostgreSQL (Supabase) • Better Auth (authentication) • Google Gemini AI via Vercel AI SDK 📦 Monorepo: • Turborepo (apps: native, server | packages: auth, db) --- 📂 SOURCE CODE: 🔗 GitHub: https://github.com/FullStack-Flow/cal... --- ⏱️ CHAPTERS: 0:00 - Intro 9:30 - Project Setup 12:50 - Cloudflare account setup and deploy 25:21 - Onboarding, Sign In/up Screens with Backend API 2:09:23 - Home Screen with Backend API 3:00:34 - Profile Screen 3:02:56 - Dairy Screen 3:15:28 - Image Scan with AI Agent Config 4:00:11 - Scan Image and Fixed Issue 4:07:17 - Meal Details Screen 4:09:22 - Insight Screen --- 🔔 SUBSCRIBE for the full build series — we're going from zero to deployed, step by step. 👍 Hit LIKE if you're hyped to build this! 💬 Drop a comment: What's your biggest challenge with React Native? I might make a video on it! --- 🔗 LINKS: • GitHub: https://github.com/FullStack-Flow/cal... • Better T-Stack: https://better-t-stack.dev • HeroUI Native: https://heroui.com/native • Expo: https://expo.dev • Hono: https://hono.dev • Drizzle ORM: https://orm.drizzle.team • Better Auth: https://better-auth.com • Vercel AI SDK: https://sdk.vercel.ai • Google Gemini API: https://ai.google.dev --- #ReactNative #ExpoRouter #GeminiAI #CalorieTracker #AIApp #MobileDev #FullStack #HonoJS #TypeScript #BunJS #DrizzleORM #BetterAuth #Turborepo #NativeWind #HeroUI #AppDevelopment #BuildWithAI #SideProject #IndieHacker #MobileAppDevelopment