Building a privacy-first health app - update #5

Introduction

Previously, I’d implemented the FoodItemsSearchPage & FoodItemsSearch components. But to make this page fully functional, I completed the services to enable food search from the FDC API, through an API service.

Update

1. Firstly, I started implementing the the GraphQL definitions for the endpoint in foodItemSearch.sdl.js and a service returning returning dummy data from foodItemSearch.js.
2. After this, I worked on integrating the foodItemSearch service with the FDC API, but I finally realized why developers love TypeScript, because the FDC API endpoint returned different values for servingSizeUnit (e.g. GRM/grm instead of g, MLT/mlt instead of ml).
3. I also created the “Load more” button to fetch additional food items through pagination.

Next steps

1. My implementation for the food item search feature turned out to be extremely buggy, so this is the first thing I need to fix before I move to anything else.
2. Adding serving size selector to the FoodCard component & adding implementation of mutation to store the items the user has consumed.

Screenshots

Implementing the search feature