DEV Community

n00bgineer
n00bgineer

Posted on • Originally published at n00bgineer.wordpress.com on

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more