Building a privacy-first health app - update #4

Introduction

Yesterday, I was not able to make enough progress, but fortunately today I was able to spend enough time to complete many required changes.

Updates

Here are some of the changes that I’ve made today:

1. Pushing database migration to the PostgreSQL database, after making some of the schema-level changes previously in User , FoodItem & PaidSubscription models.
2. Since, I’d previously re-generated scaffolding for the User model as well, so I’d to fix things to make authentication work again. This is primarily why I never re-generated scaffold once the basic structure is set. Once I was done with this, I also updated the OnboardingModal component.
3. Once I was done with the above-mentioned tasks, I decided to build the TopNavigation component (as opposed to using the SideNavigation component used in Tracepath). But before that, I also discovered that there’s a separate component for SideNavigationElement , while there is no navigation element component for BottomNavigation , so I decided to place the SideNavigationElement component within the SideNavigation component. I’m not sure how I missed out on such an inconsistency, but nonetheless I fixed this and went on to create the TopNavigation component.
4. After creating the TopNavigation component, I updated the NavigationLayout and PositionScreen components. And then, I updated the FoodItemsCell state components (i.e. Empty , Error & Loading ), though I’ve not updated the FoodItems component which is the return value for the Success component in the cell. Actually, I was supposed to come to the FoodItemsPage later, but decided to update these components anyway & this took away from the final task in this post.
5. Finally, I was onto the FoodItemSearchPage & FoodItemSearch components, for which I’ve only added how these components would look, but I’ve not added any functionality to it, that is integrating the upload/scan feature with Cloudinary widget.

Next steps

1. Making the search form functional, which will include integrating the upload/scan feature with the Cloudinary upload widget. This time, I also want to set specific security settings for the Cloudinary widget.
2. Completing the food item search service (i.e. foodItemSearch.sdl.js & foodItemSearch.js ), which will be used to query paginated results from the USDA’s FDC API.
3. Figuring out google’s image labeling API.
4. Integrating food item search service with the image labeling function.
5. Completing the food item mutation to add food items to the user’s food consumption history.

Screenshots

OnboardingModal component in large desktop, small desktop & mobile modes

TopNavigation component in the desktop mode

A collage of different state components for FoodItemsCell

A collage of FoodItemsSearchPage component