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.