Calorify

AI-powered calorie tracking web app designed for gym enthusiasts. Track nutrition effortlessly with photo recognition, natural language logging, and personalized AI coaching.

Features

🎯 Core Tracking

• Smart Macro Calculator: Auto-computed BMR, TDEE, and macro targets based on your stats and goals
• Daily Overview: Real-time progress bars for calories, protein, fat, and carbs
• Weight Tracking: Log weight with trend visualization and charts

🤖 AI-Powered

• Photo Food Logger: Snap a photo of your meal → instant nutrition estimates (Groq Vision)
• Natural Language Logging: "I had 200g chicken breast with rice" → parsed and logged
• AI Nutrition Coach: Chat interface with personalized advice based on your data
• Goal Intelligence: AI analyzes weight trends, predicts goal dates, suggests adjustments

🎨 Modern UI

• Dark mode by default (light mode supported)
• Tabbed dashboard: Overview, Log Food, Weight, AI Coach, Goals, Profile
• Built with Next.js 15, Tailwind CSS, and shadcn/ui

Tech Stack

• Framework: Next.js 15 (App Router)
• Auth: Supabase Auth (Google OAuth + magic link)
• UI: Tailwind CSS + shadcn/ui (Radix primitives)
• Charts: Recharts
• Backend: FastAPI (Python) at http://localhost:8000

Setup

1. Install dependencies

npm install

2. Configure environment

Create .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here
NEXT_PUBLIC_BASE_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://localhost:8000

Get your Supabase credentials from: Project Settings → API in the Supabase dashboard.

3. Set up Supabase Auth

1. In Supabase dashboard, go to Authentication → URL Configuration
2. Set Site URL: http://localhost:3000
3. Add Redirect URL: http://localhost:3000/auth/callback

For Google OAuth:

• Enable Google provider in Authentication → Providers
• Add your Google OAuth Client ID and Secret from Google Cloud Console
• In Google Cloud, add https://your-project.supabase.co/auth/v1/callback as an authorized redirect URI

4. Run the dev server

npm run dev

Visit http://localhost:3000

Usage

1. Sign in with Google or magic link (email)
2. Complete your profile (age, height, weight, activity level, goals)
3. Log food using:
   • 📸 Photo recognition (snap a pic)
   • 💬 Natural language ("I had 3 eggs and oatmeal")
   • ✍️ Manual entry
4. Track weight daily for trend analysis
5. Chat with AI coach for personalized nutrition advice
6. View insights on the Goals tab (adherence score, predictions)

Project Structure

src/
├── app/
│   ├── page.tsx                    # Landing page
│   ├── auth/                       # Login + OAuth callback
│   └── dashboard/                  # Main dashboard
├── components/
│   ├── dashboard/
│   │   ├── daily-overview.tsx      # Macro progress bars
│   │   ├── food-logger.tsx         # 3-mode food logging
│   │   ├── ai-coach.tsx            # Chat interface
│   │   ├── weight-tracker.tsx      # Weight log + chart
│   │   └── goal-insights.tsx       # AI trend analysis
│   ├── userinfo-form/              # Profile setup form
│   └── ui/                         # shadcn components
├── lib/
│   ├── api.ts                      # Backend API client
│   └── supabase/
│       ├── browser.ts              # Browser Supabase client
│       └── server.ts               # Server Supabase client
└── types/
    └── userinfo.ts                 # Type definitions

Common Issues

"Cannot find module" errors or unstyled page

Clear the Next.js cache:

rm -rf .next
npm run dev

Auth redirect fails

Make sure http://localhost:3000/auth/callback is in your Supabase Redirect URLs list.

Backend connection fails

Ensure the backend is running on port 8000 and NEXT_PUBLIC_API_URL is set correctly.

Building for Production

npm run build
npm start

Update environment variables for your production domain in both Supabase and .env.local.