https://github.com/anubhavick/healthy-me
Healthy Me is an intelligent nutrition companion that leverages cutting-edge AI technology to help users track their meals, analyze nutritional content, and improve their dietary habits with personalized insights.
https://github.com/anubhavick/healthy-me
firebase-auth firebase-database healthcare nodejs react tensorflow typescript
Last synced: 4 months ago
JSON representation
Healthy Me is an intelligent nutrition companion that leverages cutting-edge AI technology to help users track their meals, analyze nutritional content, and improve their dietary habits with personalized insights.
- Host: GitHub
- URL: https://github.com/anubhavick/healthy-me
- Owner: Anubhavick
- License: mit
- Created: 2025-07-31T13:38:50.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-06T05:27:48.000Z (11 months ago)
- Last Synced: 2025-10-29T18:50:39.962Z (8 months ago)
- Topics: firebase-auth, firebase-database, healthcare, nodejs, react, tensorflow, typescript
- Language: TypeScript
- Homepage: https://healthy-me-psi.vercel.app/
- Size: 1.57 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Healthy Me - AI-Powered Nutrition Assistant
**Your personal AI nutrition companion for smarter food choices**
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://firebase.google.com/)
[](https://ai.google.dev/)
[](https://www.tensorflow.org/js)
[](https://vitejs.dev/)
[](https://healthy-me-demo.web.app)
[](LICENSE)
[](https://github.com/Anubhavick/Healthy-Me/stargazers)
---
## Table of Contents
- [Overview](#overview)
- [Key Features](#key-features)
- [Architecture](#architecture)
- [Technology Stack](#technology-stack)
- [Quick Start](#quick-start)
- [Configuration](#configuration)
- [Project Structure](#project-structure)
- [Development](#development)
- [Deployment](#deployment)
- [Security & Performance](#security--performance)
- [Contributing](#contributing)
- [Support](#support)
- [License](#license)
---
## Overview
**Healthy Me** is a cutting-edge nutrition analysis platform that revolutionizes how you understand your food choices. Powered by advanced AI technologies including Google's Gemini AI and TensorFlow.js, our platform provides instant, comprehensive nutritional insights through simple image uploads.
### Mission
To democratize nutrition knowledge and empower individuals to make informed dietary decisions through accessible, AI-powered food analysis.
### Impact
- **Real-time Analysis**: Get nutritional insights in seconds
- **Personalized Recommendations**: Tailored advice based on your health profile
- **Evidence-based Scoring**: Scientifically-backed health ratings
- **Comprehensive Tracking**: Complete meal history and progress monitoring
---
## Key Features
### AI-Powered Analysis Engine
- **Gemini AI Integration**: Advanced multimodal AI for food identification and nutritional analysis
- **TensorFlow.js Models**: Client-side machine learning using MobileNet for real-time classification
- **Dual Validation System**: Combined AI validation for 99%+ accuracy in food recognition
- **Real-time Processing**: Instant analysis with optimized performance
### Comprehensive Health Assessment
- **Smart Scoring Algorithm**: Proprietary 1-20 scale health rating system
- **Visual Health Indicators**: Color-coded classification (Excellent, Good, Fair, Poor)
- **Personalized Recommendations**: Context-aware suggestions based on user profile
- **Medical Condition Support**: Tailored advice for specific health conditions
### Advanced Data Management
- **Secure Authentication**: Multi-provider system (Google OAuth, Email/Password)
- **Cloud Firestore**: Real-time NoSQL database with auto-sync
- **Complete User Profiles**: Dietary preferences, health data, BMI tracking
- **Historical Analytics**: Comprehensive meal tracking with searchable history
### Modern User Experience
- **Responsive Design**: Optimized for all devices and screen sizes
- **Interactive Dashboard**: Dynamic charts and visualizations
- **Export Capabilities**: PDF and CSV export for health reports
- **Dark/Light Mode**: Customizable theme preferences
- **AI Chat Assistant**: Personalized nutrition guidance chatbot
---
## Architecture
```mermaid
graph TB
subgraph "Frontend Layer"
A[React 19 + TypeScript]
B[Tailwind CSS]
C[Vite Build System]
end
subgraph "AI/ML Layer"
D[Gemini AI API]
E[TensorFlow.js]
F[MobileNet Model]
G[Custom ML Pipeline]
end
subgraph "Backend Services"
H[Firebase Auth]
I[Cloud Firestore]
J[Firebase Storage]
K[Firebase Hosting]
end
subgraph "Data Processing"
L[Image Preprocessing]
M[Nutritional Analysis]
N[Health Score Calculation]
O[Report Generation]
end
A --> D
A --> E
E --> F
D --> M
F --> L
M --> N
N --> O
A --> H
H --> I
I --> J
style A fill:#61dafb,stroke:#333,stroke-width:2px,color:#000
style D fill:#4285f4,stroke:#333,stroke-width:2px,color:#fff
style E fill:#ff6f00,stroke:#333,stroke-width:2px,color:#fff
style I fill:#ffca28,stroke:#333,stroke-width:2px,color:#000
```
---
## Technology Stack
### Frontend Technologies
| Technology | Version | Purpose |
|------------|---------|---------|
|  | 19.1+ | Modern UI framework with hooks and concurrent features |
|  | 5.8+ | Static type checking and enhanced developer experience |
|  | 6.2+ | Next-generation build tool with HMR |
|  | Latest | Utility-first CSS framework |
### AI & Machine Learning
| Technology | Version | Purpose |
|------------|---------|---------|
|  | Latest | Multimodal AI for image analysis and NLP |
|  | 4.22+ | Client-side machine learning framework |
|  | v2 | Lightweight CNN for food classification |
### Backend & Database
| Technology | Version | Purpose |
|------------|---------|---------|
|  | 12.0+ | Authentication, database, and hosting |
|  | Latest | NoSQL database with real-time sync |
### Data Visualization & Export
| Technology | Version | Purpose |
|------------|---------|---------|
|  | 4.5+ | Interactive data visualization |
|  | 3.0+ | Client-side PDF generation |
|  | 1.4+ | HTML to canvas conversion |
---
## Quick Start
### Prerequisites
Before you begin, ensure you have the following installed:
```bash
# Check Node.js version (18.0+ required)
node --version
# Check npm version
npm --version
# Check Git installation
git --version
```
**Required Software:**
- **Node.js** (v18.0+) - [Download](https://nodejs.org/)
- **npm** or **yarn** package manager
- **Git** for version control
- **Google Account** for Firebase and Gemini AI access
### Installation
1. **Clone the Repository**
```bash
git clone https://github.com/Anubhavick/Healthy-Me.git
cd ai-diet-scanner
```
2. **Install Dependencies**
```bash
npm install
# or
yarn install
```
3. **Environment Setup**
Create a `.env.local` file in the project root:
```env
# Firebase Configuration
VITE_FIREBASE_API_KEY=your_firebase_api_key_here
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id_here
VITE_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id_here
VITE_FIREBASE_APP_ID=your_app_id_here
VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id_here
# Gemini AI Configuration
VITE_GEMINI_API_KEY=your_gemini_api_key_here
# Optional: Cloud Vision API
VITE_GOOGLE_CLOUD_VISION_API_KEY=your_cloud_vision_api_key_here
```
4. **Start Development Server**
```bash
npm run dev
```
Open [http://localhost:5173](http://localhost:5173) to view the app!
---
## Configuration
### Firebase Setup
Step-by-step Firebase Configuration
#### 1. Create Firebase Project
- Visit [Firebase Console](https://console.firebase.google.com/)
- Click "Create a project" and follow the setup wizard
- Enable Google Analytics (recommended)
- Copy your project configuration
#### 2. Authentication Setup
```bash
# Enable Authentication providers:
✅ Google OAuth
✅ Email/Password
✅ Anonymous (optional)
```
#### 3. Firestore Database
```javascript
// Security Rules Example
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
match /meals/{mealId} {
allow read, write: if request.auth != null;
}
}
}
```
#### 4. Storage Rules
```javascript
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /user-uploads/{userId}/{allPaths=**} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
}
}
```
### Gemini AI Setup
Gemini AI Configuration
1. **Get API Key**
- Visit [Google AI Studio](https://makersuite.google.com/app/apikey)
- Generate a new API key
- Copy the key to your `.env.local` file
2. **Usage Limits**
- Free tier: 60 requests per minute
- Paid tier: Higher limits available
- Monitor usage in Google AI Studio
### Advanced Configuration
Optional Settings
#### Analytics Configuration
```env
# Google Analytics
VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX
# Firebase Analytics
VITE_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX
```
#### Performance Monitoring
```env
# Firebase Performance
VITE_ENABLE_PERFORMANCE_MONITORING=true
# Error Reporting
VITE_ENABLE_ERROR_REPORTING=true
```
---
## Project Structure
```
ai-diet-scanner/
├── public/ # Static assets
│ ├── *.svg # Vector icons and logos
│ ├── *.png # Raster images
│ └── index.html # HTML entry point
├── components/ # React components
│ ├── AIServicesStatus.tsx # AI service monitoring
│ ├── AnalysisResult.tsx # Nutrition analysis display
│ ├── AnalyticsDashboard.tsx # Data visualization
│ ├── AuthModal.tsx # User authentication
│ ├── BMICalculator.tsx # BMI calculation tool
│ ├── Carousel.tsx # Image carousel component
│ ├── ChatBot.tsx # AI nutrition assistant
│ ├── DarkModeIcon.tsx # Theme toggle component
│ ├── DietSelector.tsx # Diet preference selection
│ ├── FirebaseSync.tsx # Data synchronization
│ ├── GoalsStreaksModal.tsx # Goal tracking interface
│ ├── icons.tsx # Icon component library
│ ├── ImageUploader.tsx # Image upload handler
│ ├── LandingPage.tsx # App landing page
│ ├── LightRays.tsx # Visual effects
│ ├── MealHistory.tsx # Meal tracking history
│ ├── MealHistoryModal.tsx # Detailed meal view
│ ├── MedicalConditionsSelector.tsx # Health conditions
│ ├── ProfileDropdown.tsx # User profile menu
│ ├── SettingsModal.tsx # App settings
│ ├── ShareCardGenerator.tsx # Social sharing
│ ├── ShinyText.tsx # Animated text effects
│ └── StreakGoals.tsx # Achievement tracking
├── services/ # Backend integrations
│ ├── chatService.ts # AI chat functionality
│ ├── exportService.ts # Data export utilities
│ ├── firebase.ts # Firebase configuration
│ ├── firebaseService.ts # Firebase operations
│ ├── foodSearchService.ts # Food database API
│ ├── geminiService.ts # Gemini AI integration
│ └── tensorflowService.ts # TensorFlow.js models
├── App.tsx # Main app component
├── constants.ts # App constants
├── index.css # Global styles
├── index.tsx # React entry point
├── metadata.json # App metadata
├── package.json # Dependencies & scripts
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json # TypeScript config
├── types.ts # Type definitions
├── vite.config.ts # Vite build config
└── README.md # Project documentation
```
### Component Organization
| Category | Components | Purpose |
|----------|------------|---------|
| **AI/ML** | `AIServicesStatus`, `ChatBot`, `AnalysisResult` | AI integration and analysis |
| **Analytics** | `AnalyticsDashboard`, `MealHistory`, `StreakGoals` | Data visualization and tracking |
| **Auth** | `AuthModal`, `ProfileDropdown`, `SettingsModal` | User management |
| **UI/UX** | `LandingPage`, `Carousel`, `DarkModeIcon` | User interface components |
| **Utils** | `ImageUploader`, `FirebaseSync`, `ShareCardGenerator` | Utility components |
---
## Development
### Available Scripts
```bash
# Start development server with hot reload
npm run dev
# Build for production
npm run build
# Preview production build locally
npm run preview
# Type checking without compilation
npx tsc --noEmit
# Security audit
npm audit
# Update dependencies
npm update
```
### Development Workflow
Feature Development Process
1. **Create Feature Branch**
```bash
git checkout -b feature/your-feature-name
```
2. **Development**
```bash
npm run dev # Start development server
# Make your changes
npm run build # Test production build
```
3. **Testing**
```bash
# Manual testing checklist:
Image upload functionality
AI analysis accuracy
Authentication flow
Data persistence
Responsive design
Dark/light mode
```
4. **Commit & Push**
```bash
git add .
git commit -m "feat: add your feature description"
git push origin feature/your-feature-name
```
### Debugging Tips
Common Issues & Solutions
#### Environment Variables Not Loading
```bash
# Solution 1: Check file location
ls -la .env.local # Should be in project root
# Solution 2: Restart dev server
npm run dev
# Solution 3: Check variable names start with VITE_
echo $VITE_FIREBASE_API_KEY
```
#### Firebase Connection Issues
```javascript
// Check Firebase config in browser console
console.log(import.meta.env.VITE_FIREBASE_API_KEY);
// Verify Firebase project settings
// Ensure authentication providers are enabled
```
#### TensorFlow.js Model Loading
```javascript
// Check browser network tab for model loading
// Clear browser cache if models fail to load
// Verify HTTPS in production (required for camera access)
```
---
## Deployment
### Firebase Hosting (Recommended)
Step-by-step Firebase Deployment
1. **Install Firebase CLI**
```bash
npm install -g firebase-tools
firebase login
```
2. **Initialize Project**
```bash
firebase init hosting
# Select existing Firebase project
# Set build directory to 'dist'
# Configure as single-page application: Yes
```
3. **Build & Deploy**
```bash
npm run build
firebase deploy
```
---
## Security & Performance
### Security Features
| Security Layer | Implementation | Status |
|----------------|----------------|---------|
| Authentication | Firebase Auth + JWT | Implemented |
| Data Protection | Firestore Security Rules | Implemented |
| HTTPS Enforcement | Firebase Hosting SSL | Implemented |
| API Key Security | Environment Variables | Implemented |
| CORS Protection | Firebase Configuration | Implemented |
| Input Validation | Client & Server Side | Implemented |
### Performance Optimizations
| Optimization | Implementation | Impact |
|--------------|----------------|---------|
| Code Splitting | Dynamic imports | -60% initial bundle |
| Image Optimization | Compression + WebP | -70% image size |
| Model Caching | localStorage + CDN | -80% load time |
| Lazy Loading | React.lazy + Suspense | Improved LCP |
| Service Worker | Workbox | Offline support |
| Bundle Analysis | Vite analyzer | Optimized builds |
---
## Contributing
### Developer
**Anubhav Mishra**
*Full-stack Developer & Project Lead*
[](https://github.com/Anubhavick)
[](https://linkedin.com/in/anubhavick)
---
## Ready to Get Started?
**Transform your nutrition journey with AI-powered insights**
[](https://healthy-me-demo.web.app)
[](https://github.com/Anubhavick/Healthy-Me)
**Built with ❤️ by [Anubhav Mishra](https://github.com/Anubhavick)**
---
Last updated: 3 August 2025 | Version: 1.0.0