Introduction

The plant-based diet is rising. According to GreenQueen:

Within the last four years alone, the number of vegans in Europe (people who eliminate all animal products and byproducts in their diet and lifestyle) has doubled from 1.3 million to the current estimated figure of 2.6 million, representing 3.2% of the population.

This means that brands are highly aware of how the market needs vegan options available. Across Europe, it's becoming very usual for brands to use V-Label to immediately showcase in a package if a product is vegan, vegetarian or none. If you spend some time travelling and shopping across Europe, you'll see that V-Label usage is frequent and helpful.

V-Label is an internationally recognised, registered seal for labelling vegan and vegetarian products and services established in Switzerland in 1996.

In Portugal, the same has happened; in the last years, it started to become more usual for some stores to have this information immediately available. Nevertheless, some brands still haven't applied this, which makes shopping a cumbersome experience in some chains. Even though most people start to get used to the idea of reading labels very fast, I still wanted to create a product that would help me and others quickly identify if a product is vegan or not, especially if a product has many ingredients.

Embracing veganism with VeggieBot

Trying to make the best out of my experience as a frontend engineer and combining my particular need as a user, I tried my best to come up with a solution that would allow users to just simply paste their ingredients and immediately have information about a product.

One of my main concerns was to have always up-to-date information available on thousands of ingredients, which would be troublesome to maintain in the long run and require heavy-database work.

And, just like that, VeggieBot was born. This AI-powered app takes the guesswork out of vegan shopping, giving you the confidence to align your purchases with ethical values.

The only thing that the user needs is to copy and paste the ingredients into the app and the AI does the rest. The result is a clear view of the product's status (vegan/not vegan) and the description of each ingredient.

In case the user inputs a language other than English, the AI has instructions to also provide some kind of translation of the product to aid the user.

Regarding more technical details about VeggieBot, it was built with Next.js, React, and Typescript. My choice in terms of UI library was Chakra UI, a modular and accessible component library.

Regarding accessibility, and given the importance of this subject for my career and personal interest, I made sure to provide some solutions to allow users with some kind of disability to also use the application. Some of the best practices are labelling the form, following a good pattern of semantic HTML in headings, facilitating the page navigation for users of assistive technologies and also ARIA labels when required, and providing enhanced semantics and accessibility for the web content of the application, like buttons, icons, etc.

In terms of the API I used for this project, I decided to use the OpenAI API, model gpt-3.5-turbo with a defined temperature of 0.2 to produce more focused, conservative, and consistent responses, which I required in this project, giving me more control over how to create a small algorithm to parse the data provided by the API.

Our results page fetches data from the OpenAI API and generates the comprehensive ingredient analysis you see on the page using React Query, a data fetching and caching library for React. This allows us to request data from the OpenAI API when you input a list of ingredients on VeggieBot, and the AI analyzes each ingredient.

As I mentioned before, my main concern was to avoid using a fixed set of ingredients in a database and be worried that many of them would not be considered because they didn't exist in the dataset. Using an API that provides access to a multitude of information, allows one to only worry about the user experience, avoiding overhead costs of maintaining a backend and a database.

Closing remarks

This topic hits very close to home for me. Not only its something that I'm deeply interested in and invested in but also something that I enjoy having long conversations about and to think how I can improve the world around me.

For the future, I have some ideas for the backlog of this project, mainly related to the diversification of how the users can input the ingredients. For now, I'm considering allowing uploading directly a file and also allowing the user to upload a picture or through the camera directly. And for those transitioning into a plant-based diet, a vegetarian mode is on the horizon, providing clarity on both vegetarian and vegan products.

If this project has helped you in some way or if you're grateful for seeing veganism projects rising, feel free to buy me a tea, or star the repo on GitHub. 🌿