Upload or take photos of your food to receive calories, protein, and more!
Chat with our AI Chef Assistant to generate healthy recipes
View, track, and rate indiviual recipes made by the AI or other users
Browse through the database of the most popular or most recently generated recipes!
Keep track of your daily caloric intake as well as other essential vitamins
This project was made with the use of Google Antigravity

SocialBytes 🥗

Health for Social Good — An AI-powered nutrition and recipe platform that makes healthy eating accessible, social, and fun.

Inspiration

We noticed that tracking nutrition and discovering healthy recipes often feels like a chore. Existing apps are either too complicated, lack social features, or don't leverage AI in meaningful ways. We wanted to build something that feels less like a calorie counter and more like having a personal chef and nutritionist in your pocket.

The "social" aspect was key — we believe food brings people together. Whether it's sharing a family recipe, getting feedback from the community, or discovering what others are cooking, we wanted to create a platform where healthy eating becomes a shared journey rather than a solo struggle.

What It Does

🔍 AI Food Scanner — Snap a photo of any meal and instantly get detailed nutrition estimates (calories, protein, carbs, fat, vitamins, and more) powered by Gemini's vision AI.

👨‍🍳 Chef AI Assistant — Chat with an AI chef that can generate custom recipes, answer cooking questions, suggest substitutions, and help with meal planning. It even speaks responses aloud using ElevenLabs voice synthesis.

📖 Community Recipes — Browse, share, and rate recipes from the community. Post your own creations with ingredients, instructions, and calorie info. Ask the AI chef questions about any recipe.

📊 Nutrition Tracking — Log meals, track daily intake across 12+ nutrients, view weekly trends with interactive charts, and get alerts when you're low on essential vitamins.

📅 Meal Planning — Plan your week with a drag-and-drop meal planner. Add recipes to specific days and meal types, and see daily macro totals at a glance.

How We Built It

Frontend: React + Vite for a fast, responsive single-page app. We used Recharts for nutrition visualizations and kept styling minimal with inline CSS for quick iteration.

Backend (Node.js): Express.js handles the REST API for recipes and food logs, with Mongoose connecting to MongoDB Atlas for persistent storage.

Backend (Python): FastAPI powers the AI features — recipe generation, food image scanning, and intelligent chat routing. We used Pydantic for data validation and structured AI outputs.

AI/ML: Google Gemini 2.5 Flash handles all AI tasks including vision-based nutrition analysis, recipe generation, and natural language chat. We implemented smart routing to detect user intent (searching vs. creating recipes, asking questions vs. requesting edits).

Auth: Google OAuth for seamless sign-in with profile pictures and persistent user data.

Voice: ElevenLabs API for text-to-speech, letting the AI chef read responses aloud.

Deployment: Vercel for hosting with a custom domain from Namecheap.

Challenges We Faced

Rate Limiting & API Quotas — Gemini's free tier has strict rate limits. We built a request queue system that retries with exponential backoff, preventing crashes during heavy usage.

Structured AI Outputs — Getting Gemini to return consistent JSON for recipes and nutrition data required careful prompt engineering and using Pydantic schemas as response templates.

Real-time State Sync — Keeping the frontend in sync with MongoDB while maintaining snappy UX was tricky. We optimistically update the UI, then reconcile with the server — but this caused bugs like deleted recipes reappearing (which we fixed during development!).

Markdown in Chat — We initially had markdown formatting (**bold**) showing as raw text in chat bubbles. We solved this by stripping markdown from AI responses and keeping the UI clean with plain text.

Cross-Origin Requests — Running separate Node.js and Python backends required careful CORS configuration to let the React frontend talk to both services.

What We Learned

How to orchestrate multiple backends (Node + Python) behind a single frontend
Prompt engineering techniques for reliable structured outputs from LLMs
Building real-time features with optimistic UI updates
Integrating multiple APIs (Gemini, ElevenLabs, Google OAuth, MongoDB) into a cohesive product
The importance of error handling and graceful degradation when external services fail

Tech Stack

Category	Technologies
Frontend	React, Vite, Recharts
Backend	Express.js, FastAPI, Python
Database	MongoDB Atlas, Mongoose
AI/ML	Google Gemini API
Auth	Google OAuth 2.0
Voice	ElevenLabs TTS
Deployment	Vercel, Namecheap

What's Next

Barcode scanning for packaged foods with instant nutrition lookup
Social features like following users, recipe collections, and activity feeds
Dietary goals with personalized recommendations and progress tracking
Grocery lists auto-generated from meal plans
Mobile app with React Native for a native experience

Built with 💚 by the SocialBytes team