Building a privacy-first health app - update #6

Introduction

In the previous update, I was able to implement the foodItemSearch service, which allowed me to search for food items, but it was buggy at best, since pagination didn’t work as expected. By this update, I was able to fix the basic fetching issues, but I also discovered another issue.

Update

1. I discovered a pretty weird issue in the FDC API, that is the 0th page of /v1/foods/search endpoint returns the same output as the 1st page. To fix this, I’d to replace the default page count as 1, instead of 0.
2. There were also some other minor updates that I made to fix the issue with pagination, as only the first page was getting re-fetched every time.
3. I updated the foodItemSearch service, to also return the servingCount value for both foundational and branded food, with it’s default value being 0.25 & 1 respectively. Why 0.25 as the default servingCount for foundational foods? That’s because the default servingSize for foundation foods is 100g, but it needs to be broken down so that users can select smaller portions.
4. I also added the NutritionModal , which shows the nutritional information of a food. It is shown upon clicking the “Nutrition” button at the bottom of the FoodCard component.

Next steps

1. Now I can finally implement the feature to implement food item mutation, which is linked with both food and account screens. To make the food item mutation work, I’ll have to build a modal in which the users can view, add and remove food items from their list. Think of it like a cart for food, i.e. A food cart.

Screenshots

Viewing nutritional information (desktop)

Nutritional info modal in mobile (light mode)

Nutritional info modal in mobile (dark mode)