Welcome to the first installment of the development blog for Simple Nutrition: Macro Tracker. In this series, I will take you through the process of creating this mobile application, detailing the design and functionality of its key features. In this post, we'll explore three primary views: the Home View, Today's Foods List, and History View, and discuss the flow between them using the MVVM (Model-View-ViewModel) architecture. This is the first step in designing the views in Figma.

Home View

The Home View is the main dashboard of the app, providing a comprehensive overview of the user's daily macro intake. Here's a breakdown of its components:

MVVM Flow

1. Model: The data model for macros and calories is fetched from the backend or local storage. This model includes the user’s daily goals, current intake, and food entries.
2. ViewModel: The ViewModel processes this data, calculating the percentages for each macro and the total calorie intake. It updates the LiveData objects that the Home View observes.
3. View: The Home View observes the LiveData from the ViewModel. When the data changes (e.g., a new food is added), the View updates the macro rings and calorie bar accordingly.

Today's Foods List

The Today's Foods List View gives users a detailed breakdown of what they've eaten so far. Each entry in the list includes the food name and its macro breakdown (protein, carbs, fats) along with the calorie count. This feature ensures that users can easily keep track of their dietary intake and make adjustments as needed.

MVVM Flow

1. Model: The food entries for the day are stored in a list within the model.
2. ViewModel: The ViewModel filters and sorts this list based on user actions (e.g., adding or removing food items). It keeps track of changes and updates the LiveData accordingly.
3. View: The Today's Foods List View observes these changes. When the user adds a new food, the ViewModel updates the list, and the View reflects these changes in real-time.

History View

The History View provides a calendar-based overview of the user's dietary habits. This view helps users track their progress over time and identify patterns or areas for improvement.

MVVM Flow

1. Model: Historical data is stored and retrieved from the backend or local database, including daily macro and calorie intake for each date.
2. ViewModel: The ViewModel fetches this data based on the selected date. It processes and formats the data into a readable format and updates the LiveData.
3. View: The History View observes the LiveData for changes. When a user selects a date, the ViewModel updates the data, and the View displays the macros and calories for that day.

Flow Between Views

The flow between these views is seamless, ensuring a smooth user experience. Here’s how it works:

1. From Home View to Today's Foods List: When the user taps the 'edit today' or 'add food' buttons, they are navigated to the Today's Foods List View. The ViewModel passes the current list of food entries to this view.
2. From Today's Foods List to Home View: After adding or editing a food item, the user can return to the Home View. The ViewModel updates the macro and calorie data, and the Home View reflects these changes instantly.
3. From Home View to History View: When the user taps on the 'History' button, they are navigated to the History View. The ViewModel loads the historical data, and the History View displays it.
4. From History View to Home View: Users can return to the Home View from the History View, where the current day’s data is reloaded and displayed.

Technologies Used

This app will be built using several key technologies:



For more insights on using SwiftUI and MVVM, you can refer to my blog post on best practices here. Additionally, if you're a beginner looking to learn about essential Apple frameworks, don't miss my comprehensive guide here.

Conclusion

This first part of the development blog covers the essential views that make up the Simple Nutrition: Macro Tracker app. The Home View, Today's Foods List, and History View each play a crucial role in helping users manage and track their nutritional intake effectively. The MVVM architecture ensures a clean separation of concerns, making the app more maintainable and scalable.