Building a privacy-first health app - update #4
Tags: food, nutrition, opensource, redwoodjs
Published: 2023-09-14 18:43:18

---
title: Building a privacy-first health app - update #4
published: true
date: 2023-09-03 19:27:32 UTC
tags: food, nutrition, opensource, redwoodjs
canonical_url: https://n00bgineer.wordpress.com/2023/09/04/openhealth-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**

![](https://n00bgineer.files.wordpress.com/2023/09/onboarding_collage.png?w=1024)
_OnboardingModal component in large desktop, small desktop & mobile modes_

![](https://n00bgineer.files.wordpress.com/2023/09/localhost_8910_search-1.png?w=1024)
_TopNavigation component in the desktop mode_

![](https://n00bgineer.files.wordpress.com/2023/09/img_20230903_203703.jpg?w=768)
_A collage of different state components for FoodItemsCell_

![](https://n00bgineer.files.wordpress.com/2023/09/img_20230903_232550.jpg?w=768)
_A collage of FoodItemsSearchPage component_