calm-nutrition
You are a senior full-stack software engineer and system architect. Your task is to build a COMPLETE FULL-STACK WEB APPLICATION called: "AI Nutrition Label Scanner" ⚠️ IMPORTANT REQUIREMENTS: - The project must be fully working with NO ERRORS. - All frontend and backend must be CONNECTED properly. - Only deployment and external API key setup can be left incomplete. - Follow CLEAN CODE practices and proper folder structure. - Generate code STEP-BY-STEP in logical phases. ------------------------------------------------------------ 🌐 PROJECT OVERVIEW: Build a nutrition label scanner web app where users: 1. Register and login 2. Create a medical profile (health conditions) 3. Upload or capture an image of a food nutrition label 4. System analyzes the label using AI (OCR + NLP) 5. Output personalized health recommendation: - Can the user eat it or not? - Nutritional breakdown (sugar, protein, energy, etc.) - Visual charts (graphs) - Warnings based on medical conditions - Suggested alternatives ------------------------------------------------------------ 🧠 TECH STACK: FRONTEND: - HTML - CSS - JavaScript - React.js (with functional components and hooks) BACKEND: - Python (Flask or FastAPI preferred) - OpenCV (image preprocessing) - OCR (Tesseract) - NLP (spaCy or NLTK) DATABASE & AUTH: - Firebase Firestore - Firebase Authentication IMAGE STORAGE: - Cloudinary (store uploaded images and return URL) ------------------------------------------------------------ 👤 USER ROLES: 1. USER PANEL 2. ADMIN PANEL Use Firestore field: - userType = 1 → normal user - userType = 2 → admin After login: - Redirect users based on userType ------------------------------------------------------------ 🔐 AUTHENTICATION FLOW: - Register user with: - Name - Age - Email - Password - Medical conditions: - Diabetes - High BP / Low BP - Heart Disease - Kidney Disease - Allergies (text input) - Store in Firestore - Login: - Fetch email & password from Firestore - Identify userType - Redirect: - User → User Panel - Admin → Admin Dashboard ------------------------------------------------------------ 📱 USER PANEL PAGES: 1. Home Page 2. About Page 3. Profile Page - Show/edit medical data 4. Scan Page ⚠️ IMPORTANT: - Lock "Scan Page" until profile is completed ------------------------------------------------------------ 📸 IMAGE SCANNING FLOW: 1. User uploads or captures image 2. Image is uploaded to Cloudinary 3. Cloudinary returns image URL 4. Store URL in Firestore 5. Send URL to Python backend API ------------------------------------------------------------ 🧪 BACKEND PROCESSING: Python should: 1. Fetch image from URL 2. Preprocess image using OpenCV 3. Extract text using OCR (Tesseract) 4. Use NLP to identify: - Sugar - Protein - Calories - Fat - Sodium - Ingredients 5. Match extracted data with user's medical profile ------------------------------------------------------------ 📊 OUTPUT TO USER: Display: 1. Decision: - "Safe to Eat" / "Avoid" 2. Nutritional Breakdown: - Sugar - Protein - Energy - Fat - Sodium 3. Charts: - Use Chart.js or Recharts - Bar charts or pie charts 4. Warnings: Example: - "High sugar - Not recommended for diabetes" - "High sodium - Risk for BP patients" 5. Recommendations: - Suggest healthier alternatives ------------------------------------------------------------ 🛠️ ADMIN PANEL: Admin Dashboard should include: 1. Total Users 2. New Users (daily) 3. Health trends (basic stats) 4. Manage Users: - View users - Block / Unblock users ------------------------------------------------------------ 📁 PROJECT STRUCTURE: Generate proper folder structure: Frontend (React): - components/ - pages/ - services/ - firebaseConfig.js Backend (Python): - app.py / main.py - routes/ - services/ - OCR module - NLP module ------------------------------------------------------------ 🔗 API INTEGRATION: Create REST APIs: - /analyze-label (POST) - /get-user-data - /admin/stats - /block-user ------------------------------------------------------------ 🎯 DEVELOPMENT STEPS: Follow this EXACT ORDER: STEP 1: Setup project structure STEP 2: Firebase setup (Auth + Firestore) STEP 3: React frontend UI (all pages) STEP 4: Authentication system STEP 5: Profile creation & validation STEP 6: Cloudinary image upload integration STEP 7: Python backend setup STEP 8: OCR + NLP pipeline STEP 9: API integration (frontend ↔ backend) STEP 10: Data visualization (charts) STEP 11: Admin dashboard STEP 12: Final integration testing ------------------------------------------------------------ 🎨 UI/UX REQUIREMENTS: - Clean modern UI - Responsive design - Use cards, dashboards, and charts - Show loading states - Show error handling ------------------------------------------------------------ ⚠️ FINAL OUTPUT FORMAT: - Provide FULL CODE for: - Frontend - Backend - Ensure everything connects properly - Include comments in code - No missing dependencies ------------------------------------------------------------ IMPORTANT: Do NOT skip steps. Do NOT give partial code. Ensure everything works logically end-to-end.
Comments (0)
Sign in to leave a comment
Project Tasks18
Align Color and Theme
As a user, I want all pages to have a consistent color scheme and theme aligned with the SRD design guidelines. Apply the global color palette (Background #F5F9F6, Surface #FFFFFF, Text #2C3E50, Accent #27AE60, Muted #BDC3C7) across all existing scaffold pages (home, login, signup, welcome, dashboard/overview, dashboard/ai-assistant, dashboard/settings). Set up global CSS variables or a theme provider in React so all components inherit the correct styles. Ensure typography, spacing, and component styles are consistent. Remove scaffold pages not needed by the application.
Implement User Registration API
As a user, I want to be able to use the backend API to register my account. Implement the user registration endpoint that accepts name, age, email, password, and medical conditions, stores the user in Firebase Firestore with userType=1, and handles validation and error responses.
Implement Profile Management API
As a user, I want to be able to use the backend API to create and update my medical profile. Implement endpoints to fetch and update medical profile data (health conditions) in Firestore for the authenticated user.
Implement Cloudinary Image Upload
As a user, I want to be able to use the backend service to upload nutrition label images to Cloudinary. Implement the image upload integration that accepts an image file or URL, uploads it to Cloudinary, stores the returned URL in Firestore, and returns the URL to the frontend for further processing.
Implement Admin Stats API
As an admin, I want to be able to use the backend API to retrieve dashboard statistics. Implement the /admin/stats endpoint that returns total users, new users (daily), and aggregated health trend data from Firestore. Restricted to admin users (userType=2).
Implement Block/Unblock User API
As an admin, I want to be able to use the backend API to block or unblock users. Implement the /block-user endpoint that updates the user's status in Firestore, preventing blocked users from accessing the application. Restricted to admin users (userType=2).
Implement Landing Page Design
As a user, I want to see a visually captivating landing page based on the existing JSX design (Landing v2) that features the interactive 3D nutrition label scanner with hover animations, click interactions, AI scan beam visualization, and smooth transitions. This is the entry point of the user flow where users can view a demo, navigate to Register or Login. Remove any scaffold pages not needed by the application. Implement the color palette: Background #F5F9F6, Surface #FFFFFF, Text #2C3E50, Accent #27AE60, Muted #BDC3C7.
Implement OCR and NLP Pipeline
As a user, I want the backend to extract nutritional information from my uploaded label image. Implement the OCR and NLP pipeline: fetch the image from the Cloudinary URL, preprocess using OpenCV, extract text with Tesseract OCR, parse nutritional fields (sugar, protein, calories, fat, sodium, ingredients) using spaCy NLP, and return structured nutritional data.
Build Register Page
As a user, I want to be able to register an account by providing my name, age, email, password, and medical conditions (diabetes, high/low BP, heart disease, kidney disease, allergies). The page should validate inputs, show error messages, and redirect to Login on success. In the user flow this page is reached from the Landing page and leads to the Login page.
Build Login Page
As a user, I want to be able to sign in with my email and password. The login page should authenticate via Firebase, identify the userType field (1 = regular user, 2 = admin), and redirect accordingly: regular users go to the Profile/Dashboard, admins go to the Admin Dashboard. This page is reached from Landing or Register in the user flow.
Implement Analyze Label API
As a user, I want to be able to use the /analyze-label backend API to receive personalized health recommendations. Implement the POST /analyze-label endpoint that accepts the image URL and user ID, runs the OCR/NLP pipeline, matches extracted nutritional data against the user's medical profile, and returns: Safe/Avoid decision, nutritional breakdown, warnings, and alternative suggestions. Must process within 5 seconds.
Build Profile Page
As a user, I want to be able to view and edit my medical profile including health conditions (diabetes, high/low BP, heart disease, kidney disease, allergies). The profile page should display current medical data and allow updates saved to Firestore. In the user flow, after login the user is directed here to set medical data, and from the Results page users can return here. The Scan page must be locked until the profile is completed.
Build Admin Dashboard Page
As an admin, I want to view a dashboard showing key stats: total users, new users (daily), and health trends/statistics. This page is the landing page for admin users after login in the user flow and links to the Trends and User Management pages.
Build Scan Page
As a user, I want to be able to upload or capture an image of a food nutrition label. The page should allow image selection or camera capture, upload to Cloudinary, store the returned URL in Firestore, and send the URL to the backend /analyze-label API. The page must be locked/inaccessible until the user has completed their medical profile. In the user flow this page is reached from the Profile page and leads to the Results page.
Build Admin Trends Page
As an admin, I want to view health trend statistics and visualizations showing usage patterns across all users. This page is accessible from the Admin Dashboard and displays aggregated health and nutritional data trends.
Build Admin Users Page
As an admin, I want to view all registered users and be able to block or unblock them. The Users page should display a list of users with their details and status, and provide block/unblock actions that update Firestore. In the user flow this page is reached from the Admin Dashboard and supports Block User and Unblock User actions.
Build Results Page
As a user, I want to view personalized health recommendations after scanning a nutrition label. The Results page should display: a Safe/Avoid decision, nutritional breakdown (sugar, protein, energy, fat, sodium), visual bar/pie charts using Chart.js or Recharts, warnings based on medical conditions (e.g. 'High sugar - Not recommended for diabetes'), and suggested healthy alternatives. In the user flow this page is reached from the Scan page and links back to Profile. Show loading states during analysis.
Integrate Frontend with Backend APIs
As a user, I want all frontend pages to seamlessly communicate with the backend APIs. Connect the Scan page to /analyze-label, the Results page to display API responses, the Profile page to the profile management API, and the Admin pages to /admin/stats and /block-user. Implement loading states, error handling, and proper authentication headers across all API calls.
Smart Nutrition Analysis for Healthier Choices
AI-powered food label scanning tailored to your medical profile
Interactive Nutrition Label Scanner
Hover to explore the 3D label. Click any nutrient hotspot to reveal AI-powered health insights tailored to your medical profile.
Nutrition Facts
Organic Granola Bar - 45g Serving
Serving Size: 1 bar (45g) | Servings Per Container: 6
Calories
Protein
Sugar
Sodium
Select a nutrient to explore
Click any hotspot on the nutrition label to see AI-powered health insights based on your medical profile.
Everything You Need for Smarter Nutrition
From label scanning to personalized health insights, calm-nutrition puts AI-powered dietary intelligence at your fingertips.
OCR Label Recognition
Snap a photo of any nutrition label and our advanced OCR instantly extracts every detail — calories, macros, ingredients, and allergens — with 99.2% accuracy.
Instant AnalysisAI Health Matching
Our AI cross-references extracted nutrition data against your medical profile — diabetes, blood pressure, allergies — to deliver truly personalized safety insights.
PersonalizedReal-time Recommendations
Receive tailored warnings, safer alternatives, and dietary suggestions the moment your label is scanned — empowering smarter choices at the shelf.
Smart InsightsHow It Works
Your Journey to Healthier Eating
Four simple steps to transform the way you understand and choose your food.
Upload Label
Snap a photo or upload an image of any food nutrition label from your camera or gallery.
AI Analysis
Our AI instantly extracts and interprets every nutritional detail using advanced OCR technology.
Get Insights
Receive personalized health insights and warnings tailored to your unique medical profile.
Track Progress
Monitor your dietary habits over time and build healthier eating patterns that stick.
Nutrition insights tailored to your health
calm-nutrition combines advanced AI analysis with your personal medical profile to deliver recommendations that truly matter. No generic advice — just insights designed for you.
- Personalized Health MatchingEvery recommendation is tailored to your unique medical profile, including conditions like diabetes, blood pressure, and allergies.
- AI-Powered Label AnalysisOur OCR and NLP engine extracts and interprets nutritional data in seconds, delivering instant insights you can trust.
- Actionable Warnings & AlternativesGet real-time alerts about harmful ingredients and discover healthier alternatives that align with your dietary needs.
Trusted by Health-Conscious Users
See how calm-nutrition is helping people make smarter dietary choices tailored to their medical needs.
calm-nutrition has completely changed how I read food labels. The AI instantly flags high-sugar items and suggests safer alternatives tailored to my diabetes management plan.
I used to spend ages checking sodium levels on every product. Now I just scan the label and get instant, personalized warnings. It feels like having a nutritionist in my pocket.
Managing phosphorus and potassium intake is critical for me. calm-nutrition breaks down every label and highlights exactly what I need to watch. The health insights are incredibly accurate.
The real-time nutritional analysis is a game-changer. I can finally shop with confidence knowing that every recommendation is matched to my cardiac health profile.
As someone with multiple food allergies, calm-nutrition gives me peace of mind. The OCR scanning catches ingredients I might miss, and the allergy warnings are lifesaving.
Choose the Plan That Fits Your Health Goals
Start free and upgrade as you grow. Every plan includes AI-powered nutrition label analysis tailored to your medical profile.
Free
Get started with basic nutrition scanning
- 5 label scans per month
- Basic nutritional breakdown
- Single medical profile
- Standard OCR analysis
- AI health matching
- Priority support
Pro
Advanced analysis for health-conscious individuals
- Unlimited label scans
- Detailed nutritional insights
- Up to 3 medical profiles
- AI-powered health matching
- Personalized alternatives
- Email support
Premium
Complete health intelligence for families and teams
- Everything in Pro
- Unlimited medical profiles
- Real-time dietary tracking
- Advanced health trend reports
- Family & team sharing
- Priority 24/7 support
Your Data, Fully Protected
calm-nutrition is built with security and trust at its core. Your health data is handled with the highest standards of protection.
Ready to Transform Your Health?
Join thousands of health-conscious individuals using AI-powered nutrition analysis to make smarter dietary choices tailored to their unique medical profile.
Frequently Asked Questions
Everything you need to know about calm-nutrition and how it helps you make healthier choices.
Still have questions? We're here to help.
Get Started Free→
No comments yet. Be the first!