[5.4 Web App] Blazor Client for Meal Logging

[fIyingPhoenix]

Milestone: Milestone 5: Infrastructure & Tools
Category: 5.4 Web App
Task: Implement a Blazor client for meal logging that communicates with the backend API to store, retrieve, and display meals.

---

Description

This task involves implementing a Blazor client for the web app that allows users to log their meals, view their meal history, and sync this data with the backend API. The UI should be intuitive, easy to use, and responsive across devices. The meal logging process should be straightforward and allow users to enter meal details (food items, quantity, time, etc.) efficiently.

---

Subtasks:

• Create a meal logging form UI:
  • Input fields for food items, quantity, and meal time
  • Dropdown or autocomplete for selecting food items (optional: integrate with a food database)
  • Option to add multiple food items to a single meal
  • Display the total calories and macros (carbs, fats, protein) for the entered meal
• Implement functionality to store the logged meals in the backend via the API:
  • POST request to submit meal data to the backend
  • Error handling for failed meal submission
• Implement meal history view:
  • Display a list or table of previously logged meals
  • Include filters to search meals by date or food item
  • Allow users to edit or delete previously logged meals
  • Show details of each meal, including food items, quantity, and macros
• Implement meal logging sync:
  • Ensure that meals logged on the Blazor client are synchronized with the backend (via the Sync API)
  • Handle offline usage and sync data when the app is online again
• Implement user authentication for accessing meal logging:
  • Users should be able to log in and access their meal logging history
  • Option to view meal logs for multiple users if applicable (e.g., coach vs user accounts)
• Ensure the UI is responsive and adapts to different screen sizes
• Add error handling for situations like failed API calls or missing data
• Test meal logging functionality:
  • Verify that meals are successfully logged and synced with the backend
  • Ensure the UI behaves as expected on different devices (desktop, tablet, mobile)
• Document the meal logging feature in the README or user manual
• Implement necessary validation on meal inputs (e.g., non-empty fields, valid food items)

---

Technical Considerations:

• Use Blazor WebAssembly for the front-end client
• Communicate with the Python backend API for meal logging (using HTTP requests)
• Use a responsive CSS framework (e.g., Bootstrap) or custom styles for mobile-friendly UI
• Ensure meal data is formatted correctly for the API (e.g., date/time formatting, quantity validation)
• Use proper form validation to prevent invalid data entry

---

Acceptance Criteria:

• Users can log meals via the Blazor web client
• Logged meals are correctly stored and synced with the backend
• Users can view, edit, and delete their meal history
• The UI is responsive and works on various devices
• Errors are handled gracefully (e.g., no meal is lost if the API fails)
• The feature is tested and documented properly