🥗 NutriLens - AI-Powered Nutrition Tracker

NutriLens is a modern web application that leverages the power of Artificial Intelligence to analyze food images and provide detailed nutritional information. Simply upload a photo of your meal, and let AI break down the calories, protein, carbs, and fats for you.

✨ Features

• 📸 Image Analysis: Upload images from your gallery or capture them directly using the camera.
• 🤖 AI-Powered: Uses Google's Gemini Flash AI model to accurately identify food items and estimate portion sizes.
• 📊 Detailed Insights: Get a comprehensive breakdown of macronutrients (Calories, Protein, Carbs, Fat).
• 📝 History Tracking: Automatically saves your scan history to keep track of your dietary intake over time.
• 🌓 Dark/Light Mode: Fully responsive UI with a sleek dark mode and high-contrast light mode.
• ⚡ Fast & Responsive: Built with Vite and React for a lightning-fast user experience.

📱 Screenshots

Home Page

Analysis Result

History

🏗️ Architecture

graph TB
    A[User] --> B[Frontend<br/>React/Vite]
    B --> C[Backend<br/>Express.js]
    C --> D[MongoDB<br/>Database]
    C --> E[Google Gemini API<br/>AI Service]
    E --> C
    D --> C

Loading

The application follows a client-server architecture:

• Frontend: Built with React and Vite, handles user interactions, image uploads, and displays analysis results.
• Backend: Express.js server that processes API requests, manages user authentication, stores analysis history, and integrates with AI services.
• Database: MongoDB for storing user data, authentication details, and nutritional analysis history.
• AI Service: Google Gemini API for analyzing food images and extracting nutritional information.

🛠️ Tech Stack

Frontend

• Framework: React (via Vite)
• Styling: Tailwind CSS v4
• Animations: Framer Motion
• Routing: React Router
• Icons: Lucide React
• Charts: Recharts

Backend

• Runtime: Node.js
• Framework: Express.js
• Database: MongoDB (with Mongoose ODM)
• AI Model: Google Gemini API
• File Handling: Multer

Tools & DevOps

• Code Quality: ESLint, Prettier
• Language: TypeScript (Frontend), JavaScript (Backend)

---

🚀 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v18 or higher recommended)
• MongoDB installed locally or a MongoDB Atlas connection string
• A Google Cloud Project with the Gemini API enabled and an API Key

Installation

1. Clone the repository

   git clone https://github.com/Pranjal6955/NutriLens.git
   cd NutriLens

2. Setup Backend

   cd backend
   npm install

   Create a .env file in the backend directory with the following variables:

   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/nutrilens # Or your Atlas URI
   GOOGLE_API_KEY=your_gemini_api_key_here
   CORS_ALLOWED_ORIGINS=http://localhost:5173

3. Setup Frontend

   cd ../frontend
   npm install

Running the Application

1. Start the Backend Server

   cd backend
   npm start

   The server typically runs on http://localhost:5000.

2. Start the Frontend Development Server Open a new terminal window:

   cd frontend
   npm run dev

   The application will be available at http://localhost:5173.

---

📁 Project Structure

NutriLens/
├── backend/                # Node.js/Express Backend
│   ├── config/             # Database configuration
│   ├── models/             # Mongoose models (History, etc.)
│   ├── routes/             # API routes
│   ├── uploads/            # Temporary storage for uploaded images
│   └── server.js           # Entry point
│
├── frontend/               # React Frontend
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── pages/          # Page components (Home, History, etc.)
│   │   └── App.tsx         # Main application component
│   └── ...config files     # Vite, Tailwind, ESLint configs
│
└── Readme.md               # Project Documentation

🧪 Code Quality

This project processes code quality checks using ESLint and Prettier.

• Linting: npm run lint (in respective directories)
• Formatting: npm run format

This project is licensed under the ISC License.