HealthBites

HealthBites is a full-stack health and nutrition web application that helps users:

• Track meals and daily calories
• Generate AI-based Indian meal plans and recipes
• Analyze food images with Gemini Vision
• Manage diet profile and nutrition goals
• Use an in-app support chatbot

The project is split into:

• Backend: Node.js + Express + MongoDB
• Frontend: React + TypeScript + Vite + Tailwind

Table of Contents

• Overview
• Core Features
• Tech Stack
• Project Structure
• Backend Architecture
• Frontend Architecture
• Environment Variables
• Local Setup
• Available Scripts
• API Reference
• Data Models
• Troubleshooting
• Known Limitations
• Recommended Improvements

Overview

HealthBites combines meal logging, AI-powered recipe generation, and food-image analysis in one app. The frontend uses Auth0 for authentication and calls backend REST APIs for profile, meal, recipe, chat, and image analysis workflows.

Core Features

Authentication and Access

• Auth0-based login
• Protected routes for app pages

Daily Tracking

• Add meal entries with calories
• View total daily calories
• View meal history over recent days

Meal Planning

• Generate 7-day Indian weekly meal plan
• Input ingredients, diet type, and target calories
• Returns breakfast/lunch/dinner plans for Monday-Sunday

Recipe Library

• Generate Indian recipes from ingredients and nutrition constraints
• Supports vegetarian/non-vegetarian filters
• Persists generated recipes in MongoDB

Food Recognition

• Upload food image
• Gemini vision-based dish and calorie analysis
• Add analyzed food directly to daily meal log

Support Bot

• In-app chatbot with Gemini response generation
• Stores recent chat history in MongoDB
• Falls back to offline helper responses when AI is unavailable

Tech Stack

Frontend

• React 18
• TypeScript
• Vite
• Tailwind CSS
• Framer Motion
• Axios
• Auth0 React SDK
• SweetAlert2

Backend

• Node.js
• Express
• MongoDB + Mongoose
• Multer (file upload)
• Moment.js
• Gemini API via @google/generative-ai
• CORS + dotenv

Project Structure

HealthBites/
  Backend/
    db.js
    index.js
    package.json
    model/
      Chat.js
      Exercise.js
      Meal.js
      Profile.js
      Recipe.js
    route/
      analysis.js
      chat.js
      exercise.js
      meal.js
      mealg.js
      userProfile.js
    uploads/
  Frontend/
    package.json
    vite.config.ts
    src/
      App.tsx
      components/
      pages/
      hooks/
      Context/
      utils/

Backend Architecture

Entry point: Backend/index.js

Mounted routes:

• /user -> user profile APIs
• /meal -> meal tracking and AI meal/recipe generation
• /analysis -> image analysis endpoint
• /chat -> support bot endpoints
• /generate-meal-plan -> alias to meal routes

CORS behavior:

• Uses CORS_ORIGIN or FRONTEND_URL if set
• Otherwise defaults to:
  • https://health-bite.netlify.app
  • https://healthbites.netlify.app
  • http://localhost:5173
  • http://127.0.0.1:5173

Frontend Architecture

Entry point: Frontend/src/App.tsx

Main routes:

• / -> Home (redirects authenticated users to /food-recognition)
• /tracking -> Daily tracking and progress
• /meal-planning -> Weekly meal planner and grocery list
• /exercise -> Exercise tracking view + daily progress
• /food-recognition -> Image analysis and quick food logging
• /recipes -> AI recipe library

Auth0Provider is configured directly in App.tsx (domain and clientId currently hardcoded).

Environment Variables

Backend (.env in Backend folder)

Required:

• Mongo_url: MongoDB connection string

Recommended:

• PORT: backend port (default 3000)
• GEMINI_API_KEY: Gemini API key (or GOOGLE_API_KEY)
• CORS_ORIGIN: comma-separated frontend origins
• FRONTEND_URL: optional single frontend URL fallback

Example:

Mongo_url=mongodb+srv://<user>:<pass>@<cluster>/<db>
PORT=3000
GEMINI_API_KEY=your_gemini_api_key
CORS_ORIGIN=http://localhost:5173,https://healthbites.netlify.app
FRONTEND_URL=http://localhost:5173

Frontend (.env in Frontend folder)

Recommended:

• VITE_BACKEND_URL: deployed backend URL
• VITE_BACKEND_URL1: local backend URL for localhost development

Example:

VITE_BACKEND_URL=https://your-backend-domain.com
VITE_BACKEND_URL1=http://localhost:3000

Local Setup

1) Clone and install

# from repository root
cd Backend
npm install

cd ../Frontend
npm install

2) Start backend

cd Backend
npm start

Backend starts with nodemon on port 3000 by default.

3) Start frontend

cd Frontend
npm run dev

Frontend usually runs at http://localhost:5173.

4) Build frontend

cd Frontend
npm run build

Available Scripts

Backend

• npm start: starts server with nodemon

Frontend

• npm run dev: starts Vite dev server
• npm run build: production build
• npm run preview: preview production build
• npm run lint: run ESLint

API Reference

Base URL (local): http://localhost:3000

Health Check

• GET /api/test

User Profile

• POST /user/profile
  • Body: name, email, optional profile fields
  • Behavior: upsert by email
• GET /user/profile/:userid
• PUT /user/updateprofile
  • Body: userid plus profile fields

Meals and Calories

• GET /meal/today-calories/:userid
• POST /meal/add-food
  • Body: userid, foodName, calories, mealTime
• GET /meal/food-history/:userid?days=7

AI Meal and Recipe Generation

• POST /meal/generate-weekly-plan
  • Body: ingredients[], dietType, targetCalories
  • Returns: weeklyMealPlan with 7 days x 3 meals
• POST /meal/generate-meal-plan
  • Body: ingredients[], dietType, numberOfMeals, nutritionRequirements, cuisinePreference
  • Returns: generated recipes
  • Cuisine behavior: enforced to Indian-focused output

Food Image Analysis

• POST /analysis/analyze
  • Multipart form-data with image file field name: image
  • Returns: dish_name, total_calories, raw_analysis

Chatbot

• POST /chat
• POST /chat/chat
  • Body: message, userId
• GET /chat/history/:userId

Data Models

Profile

Stores user details such as:

• name, email
• weight, height, targetCalories
• profession, activityLevel, healthGoals, allergies

Note: schema also contains required age and gender fields, but update/create flows use findOneAndUpdate/findByIdAndUpdate without runValidators.

DailyMealPlan

• user (Profile ObjectId)
• date (YYYY-MM-DD)
• meals[] { foodName, calorieCount, mealTime }
• totalCalories

Recipe

• title, ingredients[], instructions[]
• nutrition { calories, protein, carbs, fat }
• cookingTime, difficulty, dietType

Chat

• userId (string)
• message, response, timestamp

Exercise

• title, duration, calories, time, status, date, user

Troubleshooting

Backend does not start

• Verify Backend/.env exists and has Mongo_url
• Check MongoDB URI and network access

Gemini features fail

• Set GEMINI_API_KEY in Backend/.env
• Restart backend after updating env

CORS blocked

• Add your frontend origin in CORS_ORIGIN
• Ensure frontend is calling correct backend URL

Profile update fails

• Make sure userid is present in localStorage
• Ensure userid is valid Mongo ObjectId
• Check /user/updateprofile response message in devtools

Exercise page shows fetch error

• Confirm backend is running and reachable
• Verify VITE_BACKEND_URL or VITE_BACKEND_URL1 in Frontend/.env
• DailyProgress now handles partial API failures, but meal endpoints still require valid userid data

Known Limitations

• Backend exercise route exists in Backend/route/exercise.js but is not currently mounted in Backend/index.js.
• Some frontend components still use direct VITE_BACKEND_URL instead of the local fallback pattern.
• Auth0 domain/clientId are currently hardcoded in App.tsx rather than environment variables.
• Backend db.js logs Mongo URL to console, which is not ideal for production security.

Recommended Improvements

• Mount /exercise route in Backend/index.js when exercise APIs are ready for production use.
• Move Auth0 configuration to Frontend env variables.
• Standardize backend URL resolution across all frontend components.
• Remove sensitive connection-string logging from Backend/db.js.
• Add backend validation (runValidators) and DTO validation for request payloads.
• Add automated tests for route handlers and frontend critical flows.