Blendr

Landing Page
Welcome Page
Survey Page
Recommendation Page

Inspiration

As two members in the group of four are international students studying in the US, we encounter the problem that lots of American foods do not suit our appetite, which have a significant impact on our our homesickness and well-being. In addition to that, college students have limited time to buy grocery and cook, it is crucial to provide a platform where they can find recipes that best fits their taste and their ingredients availability. Our team's project is inspired by this particular long-standing problem of international students in the US. Coming together as individuals who love cooking and taking inspiration from this year theme of CTRL+ALT+CREATE, we decided to build on the idea of Tinder and created Blendr, a Tinder for cooking lovers!

What it does

Our web application implements a recommender algorithm that allows the user to see a curated list of recommended recipes for them where they can "swipe" left or right depending on their interest in the recipe. We hope give users ideas on what to eat in a familiar and entertaining way. Our website allows the user to sign up and log in to enter information about their food preferences and restrictions as well as food materials in hand through a survey, and based on the result of the survey, we recommend a curated list of recipes for them where they can choose between "like" and "skip" depending on their approval of the recipe. This website will not only save users' time on deciding what to cook and how to cook, but also offer them their own personalized meal plan.

How we built it

On the client-side, we utilized Figma to design the UI/UX for our web application. We implemented HTML, CSS, and Javascript, with Bootstrap for responsiveness. We architected our back-end using the Django-Python framework. We used the results from the survey to create a list of key words that will be ran through our Python functions to make a list of recommended recipes in our on meal() class. Ultimately, we scraped through 2 million recipes in the Edemam Recipe API to output recommendations for users.

Challenges we ran into

Originally, we wanted to build a web application that matches people using a food-based recommender system and thereby building a community for people to develop friendship through cooking together. However, due to time constraint and the fact that the majority of our team are first-time hackers , we decided to create a less ambitious but still fully functional version of our intended product, laying the foundation for its future development.

For the front end, we were stuck in making a top navigation bar for hours with the logo on the left and other icons on the right, as there are lots of differences among tutorials about navigation bars and the html codes were too confusing to us as beginners. We also had difficulties creating animations to change pages once users click on some buttons, but we finally figured out an easiest way by assigning links to buttons.

The Edamam API also presented some problems to us. We wanted to provide the step-by-step instructions for each recipe, but the links that are attributed to the recipes by the API were all broken. Therefore, we could not provide the instructions to make the meals that the user approves. Additionally, the API itself had a tons of consistency in its design that require us to think of efficient algorithm to run our recommendation system through it.

Accomplishments that we're proud of

We are proud of building nice-looking front-end components that are so responsive! In addition to that, our authentication and authorization for users are also successfully implemented. We also built algorithms that can scrape through 2 millions recipes very quickly, and through that we also managed to output relevant recommendations based on users' preference for recipes.

What we learned

HackHarvard was an enriching learning experience for all of us since we got to engage in the product development process from the beginning to deployment. We got our hands-on front-end and back-end development for the first time, learned how to build responsive website, and practiced building servers and adding our scripts into the servers. Additionally, we were able to setup authorization and authentication on our website, in addition to learning new advanced technology like recommender systems.

What's next for Blendr

We plan to use machine learning for our recommender systems to output more accurate recommendations. In addition to that, we also plan to further improve our UI/UX and add new features such as community hub for people with similar interests in cooking and users can also look back at their recipes in their account. Overall, we are excited to improve Blendr beyond HackHarvard