J
John Carlo Lescano

Meal Logging and Calorie Tracker

MudBlazor Meal Tracker provides a compact meal log dashboard with MudChart visualizations and a MudDataGrid for entries. It includes a MudForm entry panel, validation and client-side binding for demos.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Tabbed chart views (Daily, Weekly, Monthly) using MudChart - Meal entry form with MudForm, MudTextField and MudNumericField and validation - Paged list of today's meals using MudDataGrid with PropertyColumn and TemplateColumn - Delete action via MudIconButton and total calories summary - Responsive layout using MudGrid, MudItem and MudPaper ## Key components - MudForm, MudTextField, MudNumericField - MudChart, ChartSeries, ChartOptions - MudTabs, MudTabPanel - MudDataGrid, PropertyColumn, TemplateColumn, MudDataGridPager - MudIconButton, MudContainer, MudPaper, MudGrid, MudItem ## How it works - Fields bind with @bind-Value to _newMeal and MudForm validates before AddMeal - AddMeal appends to in-memory _allMeals, resets the model and calls UpdateData - UpdateData recalculates _todaysMeals, _totalCaloriesToday and rebuilds ChartSeries and XAxis labels - DeleteMeal removes by Id and refreshes the charts and grid ## Styling - Uses MudBlazor components and theme styles; layout is responsive via MudGrid/MudItem - Paper elevation and MudText typography provide spacing and visual hierarchy - ChartOptions configure legend visibility and Y-axis formatting ## Reuse steps 1. Add the MudBlazor NuGet package and include MudBlazor CSS. 2. Register Mud services (builder.Services.AddMudServices()) and import the MudBlazor namespace. 3. Copy MealLogModel and the page file; add the route to the Router. 4. Replace the sample _allMeals with an injected data service or API and register DI. 5. Extend validation, persistence, authentication, and server-side loading as required. ## Limitations & next steps - This is a single-page demo with in-memory data; persistence, backend APIs and authentication are not included. - Chart labels can overlap with many items; aggregate or paginate for long ranges. - Add server-side paging, caching and tests when integrating for production.