Sous Chef

Reinvent your meals.

Comment

Inspiration

Lucas: When we all met on Discord and decided to team up, each of us pitched a few ideas. Nomit had this one. I was initially skeptical but Ethan detailed more of what some of functionality might look like and I got more excited about it. Ethan and I live together in a house of eight people; he came up with the name because often two people will cook dinner for the group, one person as 'creative director' and the other as 'sous chef'.

Ethan: If you would like a shorter video experience, feel free to skip the business model planning section!!

What it does

Lucas: Because all of us are eating at home more, we're finding ourselves increasingly bored with cooking the same meals. This is peculiar; we all buy enough ingredients that there are near infinite possibilities for meals to try, but it's difficult to find recipes that are good for us. Firstly, it's often dangerous or inconvenient to go to the grocery store; we're consistently more interested in recipes that only use food we already have in our fridge. Secondly, we have a set of cuisines we prefer, and while we may want to deviate from them, it makes sense to start with corresponding recipes. Thirdly, and perhaps more importantly, it's difficult when cooking for a number of people to decide on which recipe multiple people will like.

When signing up, Sous Chef asks you a variety of questions about your food preferences to give you recommendations. It then uses Google's Computer Vision API to scan receipts and add foods to your "fridge," also allowing you to add other foods you already have. From here, we can display a variety of recipes grabbed from various web sources via scraping as well as the spoonacular api. We have a calendar function that allows users to schedule their meals and ensure variety as well. Users collaborating within one household (generally a family) can vote on which recipes are their favorite to ensure everyone is happy with their meals.

We were planning to implement a community feature that would allow users to share recipes with others and see what their friends were eating as well, but didn't finish implementing it.

How I built it

Lucas: The front-end is in React and React-Bootstrap. I played with a number of different npm packages before settling on react-multi-carousel for the main page. Nomit built our UI in Figma, Ethan implemented the Google Computer Vision API and spoonacular APIs in React and a Python web-scraping program, and Tina implemented Firebase login/authentication and data-handling.

Challenges I ran into

Lucas: It's considerably more difficult to implement carousels with multiple items than I anticipated. I've had luck with regular Bootstrap carousels before but had to use react-multi-carousel which was quite poorly documented; it took me almost a whole day to even get their basic example to show up, but most of the other libraries that supported similar functionality (I considered react-slick) did not have all of the features that we needed (including text, secondary text, etc) as far as I could tell. I also think I overestimated my abilities in React a bit and didn't realize how front-end intensive this project was; perhaps we needed two front-end engineers, especially because this was very much so a learning hackathon for me.

I've also never had so much trouble with version control. Since Ethan and I were both using node packages, we had a lot of merge conflicts and I had to reinstall a lot of packages, totalling probably a few hours of troubleshooting. Branching would've been useful. In addition, I found myself really struggling to continue working after hitting roadblocks, and wished we'd created a more detailed version of our plan or I'd defined what front-end was supposed to look like better so that when I hit roadblocks I could've easily gone to other, unconnected tasks.

Nomit: I couldn't manage time properly and I kept procrastinating. I also was facing issues on how to make sure the whole UI looks not-so-messy by using layout grids. and aligning even the text using the baseline grid

Ethan: I ended up needing to redo a lot of my code from the first couple of days after realizing how complicated it was to link my api python programs the way I would've like to in react. This meant that I had to learn how to utilize Firebase, Cloud Vision, and spoonacular within node.js/react, something I didn't even have installed on my computer at the beginning of the hackathon. I ultimately learned a lot from this experience but my unfamiliarity with the language and front end library made trouble shooting incredibly tedious and confusing and made testing near inaccessible to me.

Tina: I think I should have thought more carefully about how everything fit together before starting to code. The features were ambitious but really cool. However, some of the work I did went unused and there was some work that I wish I could have gotten too instead. I also had issues with merge conflicts in the packages. I think we could have communicated whenever we installed new dependencies and had the other members check to see if anything broke to somewhat ameliorate this. Working with the React app was very frustrating at times because of poor documentation of some packages and issues with styling.

Accomplishments that I'm proud of

Lucas: I'm proud for gritting through some of the challenges, debugging some styling issues in the React console (I spent almost a half hour on a Discord call with a mentor getting the sidebar/graphics to be in order on the page), replicating the sidebar fairly well from Nomit's reproduction, and getting React to display components based on data (the carousel images/titles/summaries are not hard-coded!).

Nomit: Building a UI design that the team is happy with!

Ethan: I'm proud of my ability to stay flexible within a group setting. Technical pivots quickly became expected and welcome, and I was able to find a ton of resources that I will be utilizing for future projects because of all my late-night bug fixing and researching of front end libraries, js, etc.

Tina: I'm proud that I built a somewhat working signup/signin page.

What I learned

Lucas: I got considerably more comfortable with React and learned the basics of React-Bootstrap which I think will make front-end in the future way better. Also used npm for the first time and, in turn, became more acquainted with using outside packages. Also felt, most importantly, like I grew a lot from the first hackathon I did a few weeks ago and I'm more comfortable using hackathon resources; I opened several mentor tickets when I couldn't figure things out and attended Michael Seibel's keynote, which made it more engaging.

One huge mistake was getting hung up on the aforementioned react-multi-carousels—I wish I had simply moved on and considered other functionality. We spent some time at the beginning of the hackathon talking about feature prioritization but I wish we had gone for something even more minimal at first and that I had simply given up on carousel functionality because I could've implemented many more mission-critical features instead.

I communicated to our team at the beginning that I was a bit unsure about my abilities in React but perhaps we should've been more conscious of the tech needs of the project and got another front-end engineer; learning how to divide up work in the future is certainly essentially. Generally, the concept of using as much third party pre-written code and as many APIs as possible is a great takeaway for quick prototyping going into the future.

Nomit: I learnt about layouts in UI design and different types of layout grids. I built components and arranged them in a perfect layout to make sure the app stays responsive for different viewports. I also learnt how to build user stories and manage deadlines

Ethan: I learned a lot about apis, sdks, javascript, react, and firebase. I am now much more familiar with react and its uses as well as what resources are readily available to me as a developer online. While I was already familiar with web development, the need to apply and often manipulate api docs and functions to get my required result really forced me to critically engage with what I thought I understood about these languages and applications, and I feel that I've come out of the experience with a much better understanding of why many web developing conventions are the way that they are.

In terms of time management, I suppose I was too stubborn with the computer vision and should have moved more quickly onto spoonacular. Most of my nights over Ivyhacks I was up until 3:00am trouble shooting the same problems but in different languages out of the constant pivoting that my role seemed to assume. In the future, I think I'll be more considerate of what pivoting a function's wholistic impact actually is vs just the technical differences.

Tina: I was pretty rusty with React coming into the hackathon, but refreshed on it a ton from the past few days. I also learned that there are many more ways than I thought to connect different applications together.

What's next for Sous Chef

Ethan: We think there is a ton of potential for Sous Chef. Initially, we wanted to add an ability to upload recipes and include a community tab, but were never able to implement it. Additionally, we wanted to include a regional tracker that would help to localize food options to avoid western perceptions of what food one should make with their given ingredients. There was a voting tab to implement interfamilial interactions to decide what meal would be made for dinner. Lastly, we want a more involved fridge that can remind you when u need to buy groceries or what ingredients you could consider purchasing in the future to spice your meals up!

Built With

Share this project:

Updates