🍲 Integrate Food Classification Endpoint into Frontend (Image Upload & Camera Scan) #67
Description
# Issue Overview
We need to integrate the Food Classification endpoint from the backend API into the frontend application.
This will enable users to classify food items either by uploading an image or using the camera scan feature.
The backend logic for food classification is available at /features/food_classification.
Frontend contribution guide: Naija Nutri Hub Frontend – CONTRIBUTING.md
Backend API Documentation: Naija-Nutri-Hub FastAPI Swagger UI Documentation
⚠️ Important: Please include screenshots of your implementation in your pull request showing both successful classifications and handled error states.
🧩 The Project/Repository Maintainers will also check and verify your implementation to ensure correctness.
What's Needed
- Connect the image upload and camera scan components to the backend food classification endpoint.
- Ensure that both image sources (uploaded file and camera capture) send the image payload correctly to the backend.
- Handle success responses (e.g., displaying classified food item details and nutrition info) and errors (invalid image, no food detected, server error) gracefully in the UI.
- Confirm that the integration works smoothly on desktop and mobile devices.
- Maintain proper loading and state management while awaiting backend responses.
- Follow the frontend contribution guidelines linked above.
Endpoint Details
- Endpoint Path:
/features/food_classification - Backend Reference: Naija-Nutri-Hub FastAPI Swagger UI
- Description: Accepts an image (from upload or camera) and returns the predicted food class and nutritional information.