Ingredients-to-Recipe App

Inspiration

Limited time and ingredients can make meal prepping challenging, especially for college students. Our app solves this problem by helping users search for recipes based on the ingredients they already have at home.

What it does

Our app simplifies the recipe search process. Users can easily input their available ingredients, and the app suggests recipes using the Spoonacular API's "What's in My Fridge" endpoint. With just a few taps, users can view suggested recipes, complete with titles, images, preparation time, servings, and instructions. The app intelligently selects recipes with the fewest missing ingredients. Plus, the scroll function ensures that users can comfortably read lengthy instructions. On the home page, users can access a history of their previous dishes, and in the future, we plan to make each title a clickable button for quick access to full recipe information.

How we built it

Our app was built using React Native for the frontend and Node.js for the backend. We leveraged the power of the Spoonacular API and tested our API calls using Postman. Although our team consisted of beginners, we quickly learned JavaScript, React Native, and API integration. We also honed our collaboration skills using GitHub for version control, branches, pull requests, and merging. Overcoming challenges and resolving conflicts along the way, we successfully developed a reliable and efficient app.

Challenges we ran into

During the development process, we faced challenges such as learning the complexities of mobile app development and exploring different frameworks like Flutter. Ultimately, we opted for React Native due to its faster setup process. Additionally, integrating custom fonts into the app presented some initial difficulties, but we overcame them successfully.

Accomplishments that we're proud of

We take pride in our app's exceptional functionality and the significant improvements we made to the user interface (UI) for an enhanced user experience (UX). Our core features, including ingredient input, recipe search, and recipe detail display, work seamlessly. We also successfully incorporated a history button on the home page, allowing users to track their previous dishes. Our future plans to make each dish title clickable will provide users with easy access to full recipe information.

What we learned

Throughout this project, our team acquired valuable skills and knowledge in mobile app development, JavaScript, React Native, and API integration. We also gained hands-on experience in collaborative work using GitHub, learning more about version control and conflict resolution.

What's next for KOKE Ingredients to Recipe App

Our next steps include suggesting multiple recipes instead of just one, providing nutrition information through the Spoonacular API's "Nutrition by ID" query, and allowing users to filter recipes based on dietary restrictions. To accommodate a larger user base, we will upgrade our plan to handle increased API requests as well as integrate a database such as MongoDB to store previous user data. Additionally, we will implement the ability to view full recipe information directly from the history page, enabling users to easily recreate their favorite dishes.

Relevant MLH Prize Categories

Beginner, Mobile, Student

Built With

Submitted to

SB HACKS IX

Created by

I created the history page in our app and helped out with designing the user interface on the homescreen. For the history page each time a recipe was searched, the title of the recipe needed to be stored so that it could later be displayed on the history page. In order to access the history page I linked it to the home screen using a button.

Kai Maeda
I designed the homepage with a text input field with a button that adds to a list of ingredients that is actively displayed. I also created a "search recipes" button that opens a new page where the recipe that the API finds based on the list of ingredients is displayed, along with an image, prep time, servings, and instructions.

Evan Asakawa
As the idea originator, I led the conceptualization of the app and drafted our team plan, ensuring an organized workflow. I also established the backend connection to the Spoonacular API, integrating its get queries and conducting thorough testing with Postman for accurate data retrieval. Furthermore, I enhanced the app's UI/UX by incorporating visually appealing Playfair Display fonts, implementing smooth scrolling for easy navigation through recipe instructions, and revitalizing the color scheme with an orange palette that complements the food theme.

Throughout the process, I honed my skills in collaboration, time management, and technical implementation. Despite the time crunch, I thoroughly enjoyed working with my teammates and fostering a collaborative, productive environment. I take great pride in my contributions to the project, am grateful for the invaluable learning experiences, and deeply appreciate the positive experience with my team.

Olivia Jonokuchi
Kate Larrick