calm-nutrition

byABCDE

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.

Landing
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 6

System Requirements Document (SRD)

Project Name: calm-nutrition

1. Introduction

The calm-nutrition project is a full-stack web application designed to provide users with personalized health recommendations by analyzing food nutrition labels using AI. The system leverages OCR (Optical Character Recognition) and NLP (Natural Language Processing) technologies to extract and interpret nutritional data, matching it against the user's medical profile. This document outlines the system requirements for the development of the calm-nutrition application, ensuring a seamless and efficient user experience.

The application is tailored for users in Armenia (AM), considering locale-specific defaults such as time zones, dietary preferences, and health trends.

Page 2 of 6

2. System Overview

The calm-nutrition system is a web-based platform that allows users to:

  1. Register and log in to their accounts.
  2. Create and manage a medical profile, including health conditions such as diabetes, high/low blood pressure, heart disease, kidney disease, and allergies.
  3. Upload or capture images of food nutrition labels.
  4. Analyze the uploaded labels using AI to extract nutritional information.
  5. Receive personalized health recommendations, including warnings and suggested alternatives.

The system also includes an admin panel for managing users and monitoring health trends.

Additionally, the system will support selective re-run capability, allowing users to trigger specific sections of the SRD to regenerate based on updated requirements or changes in functionality.

3. Functional Requirements

User Stories:

  • As a User, I should be able to register and log in using my email and password.
  • As a User, I should be able to create and update my medical profile.
  • As a User, I should be able to upload or capture an image of a food nutrition label.
  • As a User, I should be able to view personalized health recommendations based on my medical profile.
  • As a User, I should be able to view visual charts of the nutritional breakdown.
  • As an Admin, I should be able to view and manage all registered users.
  • As an Admin, I should be able to block or unblock users.
  • As an Admin, I should be able to view health trends and statistics.
  • As a User, I should be able to trigger selective re-runs of specific SRD sections to reflect updated requirements.
Page 3 of 6

4. User Personas

1. Regular User

  • Description: Individuals seeking personalized health recommendations based on their dietary needs and medical conditions.
  • Key Actions: Register, log in, create a medical profile, upload nutrition labels, view recommendations.

2. Admin

  • Description: System administrators responsible for managing users and monitoring application usage.
  • Key Actions: View user data, block/unblock users, analyze health trends.

5. Visuals Colors and Theme

Color Palette:

The calm-nutrition project adopts a calming and health-focused theme with the following unique color palette:

  • Background: #F5F9F6 (Soft Mint Green)
  • Surface: #FFFFFF (Pure White)
  • Text: #2C3E50 (Deep Navy Blue)
  • Accent: #27AE60 (Vibrant Green)
  • Muted Tones: #BDC3C7 (Light Gray)

This palette is designed to evoke trust, health, and clarity while maintaining a modern and clean aesthetic.

6. Signature Design Concept

Page 4 of 6

Interactive Nutrition Label Scanner

The homepage will feature an interactive 3D nutrition label scanner. Users will see a floating 3D-rendered food label that rotates as they hover over it. The label will have hotspots that users can click to reveal detailed nutritional information (e.g., sugar, protein, calories).

Key Features:

  • Hover Animation: The label rotates and highlights sections dynamically.
  • Click Interaction: Clicking on a section (e.g., "Sugar") opens a modal with detailed insights and warnings based on the user's medical profile.
  • AI Visualization: A glowing AI "scan beam" animates across the label when the user uploads an image, visually representing the analysis process.
  • Transitions: Smooth fade-ins and slide animations for content transitions.

This design ensures the homepage is both visually captivating and functionally intuitive, leaving a lasting impression on users.

7. Non-Functional Requirements

  • Performance: The system should process and analyze nutrition labels within 5 seconds.
  • Scalability: The backend must support up to 10,000 concurrent users.
  • Security: User data must be encrypted both in transit and at rest.
  • Availability: The system should maintain 99.9% uptime.
  • Localization: Support for Armenian language and dietary preferences.
  • Selective Re-run Capability: The system must allow users to regenerate specific SRD sections based on updated requirements or changes in functionality.

8. Tech Stack

Frontend:

  • React.js (functional components and hooks)
Page 5 of 6

Backend:

  • Python (Flask or FastAPI)
  • OpenCV (image preprocessing)
  • Tesseract (OCR)
  • spaCy (NLP)

Database:

  • Firebase Firestore (NoSQL)

Image Storage:

  • Cloudinary

9. Assumptions and Constraints

  • Users must have a stable internet connection to use the application.
  • The system assumes that uploaded images are clear and legible for OCR processing.
  • Deployment and external API key setup are outside the scope of this document.
  • Selective re-run capability assumes that the SRD structure remains consistent and modular.
Page 6 of 6

10. Glossary

  • OCR: Optical Character Recognition, a technology used to extract text from images.
  • NLP: Natural Language Processing, a field of AI focused on understanding and processing human language.
  • Firestore: A NoSQL database provided by Firebase.
  • Cloudinary: A cloud-based service for image storage and manipulation.
  • FastAPI: A modern web framework for building APIs with Python.
  • Selective Re-run Capability: A feature allowing users to regenerate specific sections of the SRD based on updated requirements or changes in functionality.
Landing design preview
Login: Sign In
Dashboard: View Stats
Dashboard: View Trends
Users: View All Users
Users: Block User
Users: Unblock User