NutriBot - AI Nutrition Analyzer Dashboard 🤖

A cutting-edge full-stack nutrition analysis web application featuring AI-powered food recognition, 3D robotics-style interface, and comprehensive health tracking capabilities.

✨ Features

🤖 AI-Powered Analysis

• Smart Food Recognition: Camera-based food identification using AI
• Nutritional Analysis: Detailed breakdown of macros, vitamins, and minerals
• Personalized Recommendations: AI-driven dietary suggestions
• Real-time Health Scoring: Dynamic nutrition quality assessment

🎨 3D Robotics Interface

• Three.js 3D Background: Immersive cyberpunk-style visual effects
• Animated Particles: Dynamic floating elements and energy waves
• Holographic UI Elements: Futuristic glass-morphism design
• Matrix Rain Effects: Digital code rain animations

📊 Dashboard Analytics

• Real-time Charts: Interactive nutrition breakdowns with Chart.js
• Progress Tracking: Weekly and monthly health trends
• Goal Management: Customizable daily nutrition targets
• Activity Timeline: Comprehensive meal and exercise logging

📱 Modern User Experience

• Responsive Design: Mobile-first approach with adaptive layouts
• Dark Theme: Eye-friendly cyberpunk color scheme
• Keyboard Shortcuts: Power-user navigation features
• Progressive Web App: Offline capabilities and app-like experience

🚀 Tech Stack

Frontend

• HTML5: Semantic markup and accessibility
• CSS3: Advanced animations and glass-morphism effects
• JavaScript (ES6+): Modern async/await patterns
• Three.js: 3D graphics and particle systems
• Chart.js: Interactive data visualizations

Backend

• Node.js: Runtime environment
• Express.js: Web application framework
• MongoDB: Document database (optional)
• Mongoose: MongoDB object modeling
• CORS: Cross-origin resource sharing
• dotenv: Environment configuration

Development Tools

• Nodemon: Auto-restart development server
• Concurrently: Run multiple commands simultaneously
• Live Server: Frontend development server

📦 Installation

Prerequisites

• Node.js 16.0.0 or higher
• npm or yarn package manager
• Modern web browser with ES6+ support
• Camera access (optional, for food scanning)

Quick Start

1. Clone the repository

   git clone <repository-url>
   cd nutrition-analyzer-dashboard

2. Install dependencies

   npm install

3. Configure environment (optional)

   cp .env.example .env
   # Edit .env with your configuration

4. Start the application

   npm run dev

5. Open your browser

   http://localhost:5000
   

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# Server Configuration
NODE_ENV=development
PORT=5000

# Database (optional - uses in-memory store if not provided)
MONGODB_URI=mongodb://localhost:27017/nutrition_analyzer

# Security
JWT_SECRET=your_jwt_secret_here
BCRYPT_ROUNDS=12

# API Keys (for future integrations)
OPENAI_API_KEY=your_openai_key_here
NUTRITIONIX_API_KEY=your_nutritionix_key_here

MongoDB Setup (Optional)

The application works without MongoDB using an in-memory data store. For persistent data:

1. Install MongoDB locally or use MongoDB Atlas
2. Set MONGODB_URI in your .env file
3. Restart the application

🎮 Usage

Navigation

• Dashboard: Overview of daily nutrition and progress
• Food Scanner: AI-powered camera food recognition
• Nutrition Analysis: Manual food search and detailed breakdowns
• Meal Planning: Future feature for meal preparation
• Health Trends: Long-term analytics and insights
• AI Recommendations: Personalized dietary advice

Keyboard Shortcuts

• Ctrl+S: Save current data
• Ctrl+K: Focus search input
• Alt+1: Navigate to Dashboard
• Alt+2: Navigate to Food Scanner
• Alt+3: Navigate to Nutrition Analysis
• Ctrl+/: Show shortcuts help

Food Scanning

1. Click "Start Camera" in the Food Scanner section
2. Position food item within the scanning frame
3. Click "Capture" to take a photo
4. Wait for AI analysis results
5. Review nutritional breakdown and recommendations
6. Add to daily log or save for later

🔄 API Endpoints

Health Check

GET /api/health

Nutrition Data

GET /api/user/nutrition-data

Food Search

GET /api/foods/search?query=chicken

Food Details

GET /api/foods/:id

Food Image Analysis

POST /api/analyze/food-image
Content-Type: application/json

{
  "imageData": "data:image/jpeg;base64,..."
}

Log Food

POST /api/nutrition/log-food
Content-Type: application/json

{
  "foodId": 1,
  "servingSize": 150,
  "mealType": "lunch"
}

AI Recommendations

GET /api/ai/recommendations

📁 Project Structure

nutrition-analyzer-dashboard/
├── frontend/                 # Client-side application
│   ├── index.html           # Main HTML file
│   ├── styles/              # CSS stylesheets
│   │   ├── main.css         # Core styles and variables
│   │   ├── 3d-background.css # 3D effects and animations
│   │   └── dashboard.css    # Dashboard-specific styles
│   └── js/                  # JavaScript modules
│       ├── main.js          # Application orchestrator
│       ├── dashboard.js     # Dashboard functionality
│       ├── 3d-background.js # 3D graphics and effects
│       ├── food-scanner.js  # Camera and AI analysis
│       └── nutrition-analyzer.js # Food search and analysis
├── backend/                 # Server-side application
│   └── server.js           # Express.js server
├── .github/                # GitHub configuration
│   └── copilot-instructions.md # AI assistant instructions
├── package.json            # Node.js dependencies and scripts
├── .env.example           # Environment variables template
└── README.md              # Project documentation

🎯 Scripts

• npm start: Start production server
• npm run dev: Start development server with hot reload
• npm run dev-server: Start backend only
• npm run dev-client: Start frontend only
• npm run build: Install dependencies (build step)

🔮 Future Enhancements

Planned Features

• Meal Planning AI: Automated meal plan generation
• Barcode Scanner: Product identification via UPC codes
• Social Features: Share meals and compete with friends
• Wearable Integration: Sync with fitness trackers
• Recipe Generator: AI-powered recipe creation
• Allergen Detection: Food allergy warnings
• Nutritionist Chat: AI nutritionist consultation

Technical Improvements

• PWA Support: Full offline functionality
• Voice Commands: Voice-controlled navigation
• AR Food Overlay: Augmented reality nutrition labels
• Machine Learning: Improved food recognition accuracy
• Multi-language: Internationalization support
• Data Export: CSV/PDF report generation

🐛 Troubleshooting

Common Issues

Camera not working:

• Ensure browser has camera permissions
• Check if camera is in use by another application
• Try using HTTPS (required for camera on some browsers)

3D effects not showing:

• Verify WebGL support in browser
• Update graphics drivers
• Disable hardware acceleration if issues persist

API errors:

• Check if server is running on port 5000
• Verify network connectivity
• Review browser console for error messages

Performance Optimization

For slower devices:

• Disable 3D background in preferences
• Use fewer particles in animations
• Enable reduced motion mode

For better accuracy:

• Use good lighting for food scanning
• Position food clearly in camera frame
• Take multiple photos for verification

🤝 Contributing

We welcome contributions to NutriBot! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch
3. Follow coding standards
4. Add tests for new features
5. Submit a pull request

Development Guidelines

• Use ES6+ JavaScript features
• Follow CSS BEM methodology
• Write descriptive commit messages
• Document new functions and APIs
• Test on multiple browsers

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Three.js community for 3D graphics inspiration
• Chart.js for beautiful data visualizations
• OpenAI for AI integration possibilities
• MongoDB for flexible data storage
• Express.js for robust backend framework

📞 Support

For support, email support@nutribot.com or join our Discord community.

---

Built with ❤️ by the NutriBot Team

Making nutrition analysis accessible, engaging, and intelligent for everyone.