My Food Recommender

Searching for foods with nutrition parameters!

Comment

Inspiration

We are food enthusiasts, so we wanted to make a project related to food. We decided to make a tool that allowed people to search for foods based on desired nutrition parameters. When searching for food, either in person or online, I can't really recall any search options based on nutrients - it's usually either price, brand, or food category. However, I think it would be very helpful if grocery stores and online retailers added search functions for food nutrients, such as a range, a maximum, or a minimum for specific nutrients.

What it does

Our tool is pretty simple to use. While there is an about page to read about the team as well as a home page to read a little bit about different nutrients, the main application is the "Recommendation System". Here, you input values of the nutrients you want. Upon clicking "Submit", the right side is populated with foods from the USDA dataset that have at least the input amount of that specific nutrient. Each result is indexed, and you can change the range of displayed indexes using the fields provided next to the "Filter" button. For each result, the user can click the arrow on the right to expand the details of that food, revealing data for each nutrient as well as a nice doughnut chart.

How we built it

Our first task was to do some ETL of the data. Once we settled on the USDA dataset, we chose to work with the JSON format since it was more structured than the csv format. After exploring the data and deciding which properties to extract, we transformed the data into a single JSON Lines file so it could be compatible for import to the Convex database. All of this was done using Python.

After that, we designed and implemented a layout for the frontend. This was done using React and deployed to Vercel. We made use of chart.js and Bootstrap.

Finally, we built the Convex Query functions and connected them to the frontend. We decided to only take 100 records of an individual query because our total data was 3 GB, which came out to 450,000 different food records in the database.

Challenges we ran into

As with learning any new technologies, the first challenge was learning how to make everything work along the way.

The first challenge was to figure out what the data even was and how it was structured. USDA documentation was usually unhelpful, which was typical of government websites. The data was so large that we had trouble rendering the data at all so we could read it. And then of course, after making everything work, we had to modify it so the output was a JSON Lines file because Convex was giving strange errors for the JSON files.

Building out the frontend came with its usual challenges. Getting specific elements to render properly and in the correct locations, making library imports work, correctly setting up routes, implementing a functioning input form, and learning the new chart.js library.

Convex was particularly challenging, but I blame that mostly on my own inexperience. The documentation was by far not the worst. I appreciated the introductory documentation on indexes, since I hadn't dealt with those yet in databases. While the documentation for the query functions was useful, I would have preferred if all possible combinations were provided. For example, there was never an example using the v.object({}) validator. Mostly it was tiny stuff like that, but they add up and it is a challenge to learn everything on the spot. The biggest Convex challenge, and one that I never ended up figuring out, was how to build a query on multiple indexes. I got errors whenever I tried to use more than one "withIndex", and with how our queries were supposed to work, I didn't think that ordering the indices was a scalable solution to our needs.

Actually, one of the bigger challenges was being able to collaborate on the Convex project with teammates. There was some technical difficulty getting the environment variables and convex url to work properly on everyone's development environment, so we built a node.js API integration with Convex functions so that everyone could work off of the same convex URL. While there was probably an intended, convex way of doing this, it ended up being a fun side project, and there is probably some benefit for building backend APIs with Convex functions and queries.

Accomplishments that we're proud of

I (Joseph) am proud of my first ETL role. It was my first time dealing with this much data (only 3 GB) and having to implement an ETL pipeline to get the data properly formatted and loaded into Convex.

I (Mash) am proud of my frontend work, It was fun to build a chart with chart.js and also use Convex query to look into the branded food sub-dataset with a node.js and postman backend.

I (Bijon) created the node.js convex backend integration template so we can use Convex with REST API in any future project. I also contributed to bug fixing.

I (Sarah) helped Joseph working on the ETL and also helped Mash on the UI & Web design. I also pitched the project idea to work on the USDA Dataset.

What we learned

We learned a little bit about Convex. Some of us improved out React. Others learned ETL. We learned specifically about the chart.js library and learned Convex integration with node.js backend.

What's next for My Food Recommender

There are some interesting features that we have planned for this project. For one, we'd like to incorporate price data, geographic data, user data, and recipe data into our project, as well as expand the parameters available for the search form. Next, we'd like to accompany each item description with an image of the food as well. With user login and authentication, we can incorporate recommendation algorithms into social features as well as the search function itself. We also want to include a feature that enables a user to upload a picture of food to determine if it's within their nutrient constraints.

There are some bugs that still need to be fixed as well haha.

The ultimate vision for this project is to be a tool for users to plan everything related to food while accounting for factors such as health, price, geography, and cooking. In the future, the tool could be useful as a custom food planner, or as a social forum for exploring food options.

Built With

Share this project:

Updates