Transform the way you eat with intelligent food analysis, personalized meal planning, and gamified health tracking.
PlateX is a comprehensive, AI-powered nutrition platform that combines cutting-edge vision AI with personalized diet tracking to help users achieve their health goals.
- Smart Image Analysis: Upload a photo of your meal and get instant nutritional breakdown using Google Gemini Vision AI
- Ingredient Detection: Automatically identifies ingredients with portion estimates
- Barcode Scanner: Quick food logging by scanning product barcodes (OpenFoodFacts integration)
- Blood Sugar Impact: Visual chart showing predicted glycemic response
- Macro Tracking: Real-time tracking of calories, protein, carbs, and fat with visual progress rings
- Health Score: Each meal receives an AI-generated health score (1-10)
- Historical Logs: View past meals with full nutritional details
- Weekly Reports: Generate downloadable PDF/image reports of your nutrition stats
- AI Diet Planner: Generate personalized meal plans based on your profile and goals
- Weekly Meal Prep: Get a full week of meal suggestions with automated shopping list generation
- Chef AI ("Clean the Fridge"): Input ingredients you have, and AI suggests recipes to use them up
- Recipe Generation: Get detailed recipes with prep time, ingredients, and step-by-step instructions
- Hydration Tracker: Track daily water intake with animated progress visualization
- Streak Counter: Maintain logging streaks with motivational tracking
- Food Mood Tracker: Log how foods make you feel for personalized insights
- Body Progress Photos: Secure gallery for weekly progress photos with comparison view
- Trophy Room: Unlock achievement badges for healthy habits
- π Early Bird - Log breakfast before 9 AM
- π§ Hydration Hero - Maintain water logging streak
- π₯ Streak Master - Maintain consecutive day logging streak
- Level System: Progress through levels as you maintain healthy habits
- Streak Bonuses: Earn bonus points for maintaining streaks
- Challenges & Quests: Daily and weekly health challenges
- Floating Chat Widget: 24/7 AI nutrition assistant powered by Groq
- Diet Advice: Get personalized answers to nutrition questions
- Meal Suggestions: Ask for meal ideas based on dietary restrictions
- Health Profile: Set age, weight, height, activity level, and goals
- Allergy Management: Track food allergies and sensitivities
- Medical Conditions: Account for conditions like diabetes, PCOS, thyroid issues
- Custom Macro Targets: Auto-calculated or manually set daily goals
- Water Goals: Personalized daily hydration targets
- Nutritionist Directory: Browse and connect with certified nutritionists
- Consultation Booking: Schedule video consultations (Premium feature)
- Expert Ratings & Reviews: See nutritionist ratings and specialties
- Unlimited meal analysis
- Advanced AI meal planning
- Priority nutritionist access
- Detailed analytics and insights
- Ad-free experience
| Category | Technologies |
|---|---|
| Frontend | Next.js 16 (App Router), React 19, TypeScript |
| Styling | TailwindCSS v4, Framer Motion, Glassmorphism UI |
| 3D Graphics | Three.js, React Three Fiber, React Three Drei |
| Backend | Next.js API Routes, Server Components |
| Database | Supabase (PostgreSQL), Row Level Security |
| File Storage | Supabase Storage |
| AI/ML | Google Gemini Vision (gemini-1.5-flash), Groq (LLaMA) |
| Charts | Recharts |
| Barcode | html5-qrcode, OpenFoodFacts API |
| Utilities | html2canvas (screenshots), lucide-react (icons) |
PlateX/
βββ src/
β βββ app/ # Next.js App Router pages
β β βββ api/ # API routes
β β β βββ analyze/ # Food image analysis (Gemini)
β β β βββ barcode/ # Barcode lookup (OpenFoodFacts)
β β β βββ chat/ # AI chat assistant (Groq)
β β β βββ planner/ # Diet plan generation
β β β βββ suggest-recipe/ # Recipe suggestions
β β β βββ weekly-meal-plan/ # Weekly meal prep generation
β β β βββ weekly-report/ # Report generation
β β β βββ save-recipe/ # Save recipes to DB
β β β βββ log-voice/ # Voice logging (future)
β β βββ fridge/ # Chef AI - ingredient-based recipes
β β βββ login/ # Authentication
β β βββ signup/ # User registration
β β βββ meal-prep/ # Weekly meal preparation
β β βββ nutritionist/ # Nutritionist directory
β β βββ planner/ # Diet planner
β β βββ premium/ # Premium subscription
β β βββ profile/ # User profile & settings
β β βββ progress/ # Progress photos & tracking
β β βββ report/ # Weekly reports
β β βββ settings/ # App settings
β β βββ shopping-list/ # Shopping list management
β β βββ layout.tsx # Root layout
β β βββ page.tsx # Dashboard/Home
β β
β βββ components/ # React components
β β βββ AIChatAssistant.tsx # Floating AI chat widget
β β βββ AnalyticsChart.tsx # Analytics visualizations
β β βββ AuthProvider.tsx # Authentication context
β β βββ BarcodeScanner.tsx # Barcode scanning modal
β β βββ BloodSugarChart.tsx # Glycemic response chart
β β βββ CalendarView.tsx # Meal calendar
β β βββ ChallengesQuests.tsx # Gamification challenges
β β βββ ChatAssistant.tsx # Alternative chat UI
β β βββ ComparisonView.tsx # Progress photo comparison
β β βββ FoodMoodTracker.tsx # Food-mood correlation
β β βββ HistoryList.tsx # Food log history
β β βββ HydrationTracker.tsx # Water intake tracker
β β βββ LevelSystem.tsx # User leveling system
β β βββ LoginBackground.tsx # Animated login background
β β βββ MacroDonut.tsx # Donut chart for macros
β β βββ MacroProgressRings.tsx # Circular progress rings
β β βββ ResultsCard.tsx # Food analysis results
β β βββ Sidebar.tsx # Navigation sidebar
β β βββ StreakBonus.tsx # Streak bonus display
β β βββ StreakCounter.tsx # Streak tracking UI
β β βββ ThemeToggle.tsx # Dark/light mode toggle
β β βββ ThreeBackground.tsx # 3D animated background
β β βββ TrophyRoom.tsx # Achievement badges
β β βββ UploadCard.tsx # Image upload component
β β βββ WeeklyReportCard.tsx # Weekly report summary
β β
β βββ lib/
β β βββ supabaseClient.ts # Supabase client config
β β
β βββ types/
β β βββ index.ts # TypeScript types
β β
β βββ middleware.ts # Auth middleware
β
βββ public/ # Static assets
βββ supabase_schema.sql # Main database schema
βββ supabase_progress.sql # Progress photos schema
βββ supabase_saved_recipes.sql # Saved recipes schema
βββ supabase_shopping_list.sql # Shopping list schema
βββ supabase_water.sql # Water logs schema
βββ ...
- Node.js 18+
- npm or yarn
- Supabase account
- Google AI API key (Gemini)
- Groq API key
-
Clone the repository
git clone https://github.com/yourusername/PlateX.git cd PlateX -
Install dependencies
npm install
-
Configure environment variables
Copy
.env.exampleto.env.local:cp .env.example .env.local
Fill in your credentials:
# Supabase NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key # AI APIs GEMINI_API_KEY=your_google_gemini_api_key GROQ_API_KEY=your_groq_api_key
-
Set up Supabase database
Run these SQL scripts in your Supabase SQL Editor (in order):
supabase_schema.sql- Main schema (profiles, food_logs)supabase_water.sql- Water trackingsupabase_progress.sql- Progress photossupabase_saved_recipes.sql- Saved recipessupabase_shopping_list.sql- Shopping list
-
Set up Supabase Storage
Create the following storage buckets:
scans- For food photos (enable public access)progress- For progress photos (private)
-
Run the development server
npm run dev
-
Open in browser
Navigate to http://localhost:3000
| Endpoint | Method | Description |
|---|---|---|
/api/analyze |
POST | Analyze food image with Gemini AI |
/api/barcode |
GET | Lookup product by barcode |
/api/chat |
POST | AI chat assistant (Groq) |
/api/planner |
POST | Generate personalized diet plan |
/api/suggest-recipe |
POST | Get recipe suggestions |
/api/weekly-meal-plan |
POST | Generate weekly meal plan |
/api/weekly-report |
POST | Generate weekly nutrition report |
/api/save-recipe |
POST | Save recipe to database |
- profiles - User profiles with health data, goals, allergies
- food_logs - All food entries with nutritional data
- water_logs - Hydration tracking entries
- progress_photos - Body progress photo metadata
- saved_recipes - User's saved recipes
- shopping_list - Shopping list items
- Dark Mode First: Premium dark theme with glassmorphism effects
- 3D Animated Background: WebGL-powered particle animations
- Responsive Design: Fully mobile-responsive with slide-out navigation
- Micro-animations: Smooth transitions powered by Framer Motion
- Skeleton Loading: Elegant loading states throughout
- Toast Notifications: Non-intrusive feedback for user actions
- Row Level Security (RLS): All Supabase tables protected with RLS policies
- Authenticated Routes: Protected pages require authentication
- Secure File Uploads: Signed URLs for file access
- API Rate Limiting: Built-in protection against abuse
| Dashboard | Food Analysis | Meal Prep |
|---|---|---|
| Main dashboard with macro tracking | AI-powered food analysis results | Weekly meal planning |
| Profile | Progress | Trophy Room |
|---|---|---|
| Health profile settings | Progress photo tracking | Achievement badges |
- Voice-based food logging
- Apple Health / Google Fit integration
- Social features (share meals, challenges)
- Restaurant menu scanning
- AI-powered grocery recommendations
- Mobile app (React Native)
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Google Gemini for vision AI
- Groq for fast LLM inference
- Supabase for backend infrastructure
- Next.js for the React framework
- TailwindCSS for styling
- OpenFoodFacts for barcode data
Made with β€οΈ by PlateX Team