ByteMatch

Sample user upload
Default main page with upload option
Advanced intelligent filtering
Recipe sample page
Favorites page

Inspiration

As college students, many of us will spend our mealtimes at our closest dining hall or Chick-fil-A, never using a kitchen despite having access to the dorm floor kitchen or occasionally even a full apartment setup. While this can be attributed to laziness, we feel that this is due to a lack of cooking ability and no idea where to start. Limited ingredients, limited experience, and limited time prevent us from ever learning to cook as college students, leaving us stranded from using our random mix of ingredients left in the fridge. These issues also keep us from healthier, cheaper, and more diverse meal options to add to our weekly meal plans.

Fixing this was the main inspiration behind our new project, ByteMatch. Our goal was to make cooking accessible to all cooking circumstances and all levels of cooking experience. For students, ByteMatch serves as a more accessible, less intimidating gateway into the world of food creation, allowing us to feel more confident in the kitchen, whether you are a complete beginner or Gordon Ramsay himself.

What it does

At its core, ByteMatch is a smart recipe discovery platform that adapts to you, your skills, your time, and the ingredients you already have.

Key features include:

Intelligent Filtering: Search for recipes based on difficulty level, cuisine type, total cook time, and more. The most powerful filter lets you enter the ingredients you already have, matching you with recipes that make the most of what’s in your kitchen. No more scrolling through dishes that require a grocery trip first.
Personalized Accounts: With a complete login system, users can build a personalized cooking journey. Favorite recipes, browsing history, and recently viewed dishes are all saved in your profile. These can be edited, updated, or removed at any time, giving you full control over your cooking log.
Image Recognition: Not sure what to cook with something you see? Upload an image of a food item or dish, and ByteMatch identifies it, suggesting matching recipes. From there, all the same, filters,ingredients, difficulty, cuisine, and time,can be applied to narrow results as you please.
Comprehensive Recipe Details: Each recipe comes with clear step-by-step instructions, a full ingredient list highlighting what you already have and what’s missing, and nutritional information to help you make informed decisions about your meals.

How we built it

We built ByteMatch primarily through TypeScript, utilizing a wide variety of public APIs and libraries to create the “intelligent” features of our website. For example, we used Pexels’ API for images and videos of food, which we used on the background of our site, as well as for icons and recipe cards as part of the overall style design. For image classification, we opted to use multiple APIs to increase accuracy, these being Hugging Face and Clarifai. We pulled recipes from all over the web using Spoonacular’s API, allowing us to sort through over 300,000 recipes spanning almost every dish imaginable.

For further styling on our website, we used framer motion for effects like the zoom in and out, glass-like recipe cards, and buttons that reacted to mouse hovering. Finally, we implemented the MongoDB API, allowing us to create a secure data storage system, leading the way for account creation and personalization. This helped us create features like favoriting recipes, recipe history, and more. However, in order to maintain the clean, aesthetic look on our front-end, we did implement a wide variety of tools, such as Next.js with the App Router, React, Tailwind CSS, and Shadcn/Radix UI components. Overall, the website is designed to be user-friendly, with each component focused on clean, easy, access and reusability.

Challenges we ran into

The majority of our time spent debugging came from fixing the filtering tool on our site. We faced difficulties at nearly every step of the filtering process, starting with the image classification. The first API we used, Hugging Face, led to issues with food classification, placing images into categories far too broad, or bunching together dishes based on just one or two key ingredients. This led to issues like pizza being in the same category as salads which contained cheese, though we managed to iron these wrinkles out. Other issues with the filtering process included unrealistic difficulties, such as listing all salad recipes as “hard”, and displaying new recipes upon following the user’s applied filters.

However, one of the most unexpected challenges we faced came from a seemingly simple aspect of our website: the background. Since we chose for our background to be a faded rotation of cooking and food related images, this meant that at any one point, the background had a set size and position. Therefore, when we attempted to add features that would expand the size of the web page, such as the option to open more advanced filters, the background would either enter an infinite loop of rendering and crash the site, or zoom in as an attempt at resizing. However, we fixed these problems with some rescaling precautions, accounting for each possible web page size with smooth transitions.

Accomplishments that we're proud of

We are most proud of our resilience and stubbornness when it comes to debugging issues with our site. For example, when our expand filters tab was being cut off, rather than simply adding a scroll wheel to scroll down to each filter, we spent an hour figuring out what went wrong in our code and made a far cleaner and more accessible UI as a result. As this is both of our first times participating in a hackathon, we are extremely proud of our work and effort from coding nearly 20 hours straight, giving us what we feel is a legitimate chance to win this event. Regardless, our collaboration and commitment as a small team of 2 has given us motivation to work on projects in the future, as we now see what we are capable of, far surpassing our initial expectations.

What we learned

Through our building of ByteMatch, we learned a great deal about using the tools available to us, such as public libraries, AI-development, and more. We learned how to incorporate dynamic elements in our site, such as the visuals, login systems, and API integration. We also learned about the use of AI models in project building, specifically machine learning algorithms, such as image classification and processing. And yet, most of all, we learned how to overcome obstacles no matter how insurmountable they seemed, sticking through with the plan we felt was the most effective over hours and hours of struggle.

What's next for ByteMatch

In the near future, we hope to see ByteMatch not just on everyone’s laptop, but on their phones as well, through app development and expansion. This would provide greater accessibility to a wider audience, leading the way into new features that could be implemented in the new future. For example, ByteDance could transition to a more social platform, in which users have the opportunities to share their profiles, their favorite recipes, and catch trending recipes for an overall community-feel. Also, branching from our current nutritional information feature, we could implement a schedule based feature for people focused on fitness goals, supporting ideas like meal planning and calorie tracking.