Nutri-Social (The ultimate Social-Bytes)

Inspiration

We noticed a disconnect between social media and healthy living. People share food photos all day, but rarely get actionable nutrition insights from them. Meanwhile, meal planning apps feel clinical and isolating.

We asked: What if your social feed actually helped you eat better?

That spark led to Nutri-Social — a platform where community interaction and AI-driven wellness come together. We wanted to build something that doesn't just count calories, but understands your food, talks to you about it, and plans your week around your goals.

What It Does

How We Built It

Frontend (React/Vite)
    |
    |---> Express API (Node.js) ---> MongoDB Atlas
    |
    |---> Gemini 2.5 Flash    (AI vision + recipe generation)
    |---> FastAPI Backend      (chat engine + food scanning)
    |---> ElevenLabs API       (text-to-speech narration)

• Frontend: React 18 + Vite + Recharts for data visualization, styled with a custom dark-green design system
• Backend: Node.js/Express handles CRUD for recipes, food logs, and user ratings via MongoDB
• AI Layer: A Python FastAPI service wraps Gemini API for structured recipe generation and image-based food scanning
• Auth: Google OAuth 2.0 with client-side JWT decoding — lightweight and secure
• TTS: ElevenLabs Turbo v2.5 for natural-sounding recipe narration

Challenges We Ran Into

• Rate Limiting — Gemini's free tier aggressively rate-limits. We built a request queue that serializes API calls and retries with exponential backoff to stay within bounds.

• Food Recognition Accuracy — Early scans misidentified dishes constantly. We iterated on prompt engineering and switched to a dedicated /scan endpoint on our Python backend for more reliable structured output.

• Meal Plan Variety — Initial auto-generated plans repeated the same 3 recipes. We implemented a rolling exclusion window (60% of recipe pool or last 10 used) to force diversity.

• Multi-Backend Coordination — Syncing state across React, Express, FastAPI, and Gemini required careful error handling. Any link in the chain could fail, so we added graceful fallbacks at every layer.

• Responsive Dark UI — Building a data-heavy dashboard (charts, nutrition grids, meal calendars) that looks good on both desktop and mobile in a dark theme took significant iteration.

Accomplishments That We're Proud Of

• End-to-end AI pipeline — from snapping a photo to identifying food to logging nutrients to generating a weekly plan, all in one app
• Real-time deficiency alerts with actionable food suggestions (not just "eat more iron" but "try spinach, red meat, or lentils")
• Drag-and-drop meal planner that respects weekly macro budgets
• Voice-narrated recipes — a genuine accessibility win for hands-free cooking
• Zero-password auth — Google OAuth makes onboarding instant
• Community recipe sharing with ratings, comments, and AI-generated content living side by side

What We Learned

• Prompt engineering is half the product — the difference between a usable AI response and garbage is often just 2-3 sentences of context in the prompt
• Queue your API calls — never trust a free-tier API to handle concurrent requests gracefully
• Dark themes are harder than they look — contrast, readability, and visual hierarchy all need extra attention
• Nutrition data is messy — estimated macros from AI are useful but imperfect; transparency with users matters
• Full-stack AI apps need clear boundaries — separating the AI layer (FastAPI) from the data layer (Express) kept things maintainable

What's Next for Nutri-Social

Built With

• elevenlabs
• express.js
• fastapi
• geminiapi
• google-antigravity
• javascript
• mongodb
• oauth
• python
• react.js
• recharts
• tailwind
• vercel
• vite