Many of us like to eat food with slight variations to the "mainstream" recipe. However, making such recipes requires having the knowledge to modify the dish according to your tastes. So, we thought, what if an app existed that could find recipes the way you like them?

What it does

We look up recipes based on a wide variety of conditions, ranging from dietary restrictions to ethnic cuisine. We then let users save the recipes and generate meal plans based on the user's profile's data.

How we built it

We built a website. We used react.js as the framework for the website and used CSS styling for various parts of the website application. We also used the Spoonacular API to get the recipes and based on their JSON elements, we filtered out the recipes based on the user's needs. Firebase was another important component as it was our database for storing the user's profile, history, meal-plan and favorite recipes. We chose Firebase because it is easy to use, it updates data asynchronously, and it gives us an easy framework to authenticate with Google.

Challenges we ran into

A challenge we ran into was managing the intricacies of various components' states. React syntax in general was a bit tricky to get the hang of, but as we coded more we got better and put the website together.

Accomplishments that we're proud of

Key accomplishments of our project include setting up Google authentication, making the website secure and scalable, a clean, simple UI, and implementing support for suggested recipes and meal plan generation.

What we learned

We learned how to use React and the more advanced side of Firebase's seemingly limitless services. We also learned how to use CSS modules and how to write neat, extensible code that can be read by others without asking.

What's next for FoodByte

In the future, we hope to expand the meal plan feature to include a calendar and social media integration.

Built With

Share this project: