✨ Inspiration ✨
As students living away from home, grocery shopping is a lot different compared to when we lived with our families. With 4 or more people in a household, it’s not very difficult to finish a loaf of bread in a week. However, in order for one person to finish a loaf of bread, you'd have to have bread almost every day—and if you didn’t have culinary skills, that might mean the same meal every day.
Googling a keyword like “bread” or “beef” is not helpful because the recipes often contain ingredients not readily available at home. Inspired by our own struggles coming up with new, exciting recipes from humble ingredients, we created Nom.
⚙ What it does ⚙
First, users enter the ingredients they currently possess. Then, Nom searches through hundreds of thousands of recipes and finds recipes that closely match the ingredients entered. Users will be exposed to new recipes and cuisines styles, all while ensuring they will be able to use the food they have before it expires!
🛠 How we built it 🛠
Using ReactJS and NextJS, we were able to build a modular codebase that took advantage of server-side rendering to combine both the front-end and back-end of our app. The Chakra UI component library provided us with many stylized components to choose from, which allowed us to quickly build the website. The Spoonacular API provided a robust filtering system that displayed top-rated recipes based on user ingredients.
⛰️ Challenges we ran into ⛰️
Not all members on our team had the same experience with web development. So, over the course of the hackathon, there was a lot of learning involved figuring out the nuances of NextJS and React. In addition, it was difficult to find a recipe API that was both free while offering a high level of detail and diversity (thanks Spoonacular).
😤 Accomplishments that we're proud of 😤
We’re proud of successfully creating a minimalistic, well-designed web app. We learned a lot about React, server-side rendering with Next, and deployment with Vercel. Overall, we had a great experience working together to create Nom.
🧠What we learned 🧠
Throughout the design process, we had many ideas for personalized plans and other features, but we realized that it was more important to focus on the key features that made up the product.
👀 What's next for Nom 👀
In the future, we hope to add more filters to the recipes presented by Nom, allowing users to filter by dietary restrictions, nutritional values, or types of cuisines, as well as allow users to save recipes for future use.