https://github.com/paramsinghvc/nutrilens
A web app to take real time pictures and get nutrition analysis and health suggestions through OpenAI
https://github.com/paramsinghvc/nutrilens
Last synced: 2 months ago
JSON representation
A web app to take real time pictures and get nutrition analysis and health suggestions through OpenAI
- Host: GitHub
- URL: https://github.com/paramsinghvc/nutrilens
- Owner: paramsinghvc
- License: mit
- Created: 2025-12-02T13:49:33.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-08T15:47:10.000Z (8 months ago)
- Last Synced: 2025-12-28T22:11:22.469Z (7 months ago)
- Language: TypeScript
- Homepage: https://nutrilens-jet.vercel.app
- Size: 188 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🥗 NutriLens — AI-Powered Nutrition Analysis App
NutriLens is an intelligent nutrition analysis platform that uses **OpenAI Vision** to analyze food images and provide instant, structured insights about **macros, micronutrients, health notes, and practical suggestions** — all with a friendly mobile-native interface.
Built with **Next.js 15**, **Express.js**, and **OpenAI GPT-4.1 Vision**, NutriLens brings **AI nutrition analysis** directly to your browser.
---
## ✨ Features
- 🧠 **AI-powered Food Recognition** — Upload a meal photo and let OpenAI identify each ingredient.
- ⚖️ **Instant Macro Breakdown** — Get estimated calories, protein, carbs, fats, and fiber.
- 🧬 **Micronutrient Insights** — Vitamins & minerals classified as *Low / Moderate / High*, color-coded for clarity.
- 💡 **Personalized Health Notes** — Friendly, emoji-led insights about your meal.
- 🌱 **Smarter Meal Suggestions** — AI-generated quick tips for balance and healthier eating.
- 📱 **Mobile-first UI** — A clean, interactive, draggable bottom sheet that feels native.
- ⚙️ **Docker-ready** — Easily run both frontend and backend in isolated containers.
---
## 📸 Preview
| Live Food scanning | AI Nutrient Insights | Health Tips |
|----------------------|-------------------------|--------------|
| 
| 
| 
|
---
## 🧩 Project Structure
```
nutrilens/
├── app/ # Next.js 16.0.7 frontend (React 19)
│ ├── components/ # UI components (Donut charts, BottomSheet, etc.)
│ ├── public/
│ └── ...
├── server/ # Express.js backend
│ ├── src/
│ ├── package.json
│ └── .env.example
├── docker-compose.yml # Combined app/server config
└── README.md
```
---
## ⚙️ Getting Started
### 🧠 1. Setup OpenAI API Key
You’ll need an [OpenAI API key](https://platform.openai.com/api-keys).
Create one and add it to your backend `.env` file.
---
### 🧰 2. Start the Express Server
Set environment variables in `server/.env` (based on `.env.example`):
```
OPENAI_API_KEY=sk-xxxxxx
PORT=8083
```
Then start the server:
```bash
npm run docker:server
# or
cd server && yarn dev
```
Server runs at 👉 [http://localhost:8083](http://localhost:8083)
---
### 💻 3. Start the Next.js Frontend
Set environment variables in `.env` (based on `.env.example`):
```
NEXT_PUBLIC_API_BASE=http://localhost:8083
PORT=3000
```
Then run the dev server:
```bash
npm run dev
# or
yarn dev
```
Visit 👉 [http://localhost:3000](http://localhost:3000)
---
## 🐳 Docker Setup (Optional)
You can run everything in Docker with one command:
```bash
docker compose up --build
```
This will spin up:
- `frontend` → Next.js app (port 8087)
- `backend` → Express + OpenAI API (port 8083)
---
## 🧠 How It Works
1. User uploads a meal photo.
2. The backend sends the image to **OpenAI GPT-5.1 Vision** via the `responses.create()` API.
3. AI analyzes the meal composition, estimates portions, and outputs structured JSON (validated via **Zod**).
4. Frontend visualizes the data as colorful donut charts and categorized nutrient lists.
---
## 🪄 Tech Stack
| Layer | Technology |
|-------|-------------|
| Frontend | Next.js 16.0.7 (React 19) + TypeScript + Tailwind CSS |
| Backend | Express.js + OpenAI API (GPT-4.1 Vision) |
| Validation | Zod Schema + `zodTextFormat()` |
| Charts | Custom SVG Donut & MultiDonut Components |
| Containerization | Docker & Docker Compose |
| Deployment | Vercel + Nginx Reverse Proxy |
---
## 🚀 Deployment
### Deploy the frontend on [Vercel](https://vercel.com)
- Set `NEXT_PUBLIC_API_BASE` to your live API URL.
### Deploy the backend (server)
- On a VPS or platform like DigitalOcean or Render.
- Configure Nginx reverse proxy (e.g. `nutrilens.mollyculelabs.com` → `localhost:8083`).
- Use `pm2` or Docker for process management.
---
## 🔒 Environment Variables
| Variable | Description |
|-----------|--------------|
| `OPENAI_API_KEY` | Your OpenAI API key |
| `PORT` | Express server port |
| `NEXT_PUBLIC_API_BASE` | Base URL for API calls |
| `NODE_ENV` | `development` or `production` |
---
## 🧠 Example AI Output
```json
{
"error": null,
"identifiedFoodItems": ["Paneer Curry", "Rice", "Cucumber Salad"],
"estimatedPortionSize": [
{ "itemName": "Paneer Curry", "itemSize": "200g" },
{ "itemName": "Rice", "itemSize": "150g" }
],
"macros": {
"calories": 520,
"protein": 28,
"carbs": 45,
"fats": 20,
"fiber": 6
},
"micronutrients": {
"Vitamin A": { "category": "Moderate", "note": "Supports vision", "amount": "480µg" },
"Iron": { "category": "Low", "note": "Helps oxygen flow", "amount": "1.2mg" }
},
"health_notes": ["💪 High in protein for muscle recovery."],
"healthier_suggestions": ["🥗 Add more greens for micronutrient balance."]
}
```
---
## 🧑💻 Author
**Param Singh**
Full-stack engineer & digital creator
🌐 [mollyculelabs.com](https://mollyculelabs.com)
🐦 [@paramsinghvc](https://twitter.com/paramsinghvc)
💼 [GitHub](https://github.com/paramsinghvc)
---
## ⭐️ Show Your Support
If you like this project:
- 🌟 Star the repo on [GitHub](https://github.com/paramsinghvc/nutrilens)
- 🧩 Open issues or ideas for new features
- ☕ Buy me a coffee (optional!)