Inspiration
We initially looked at popular UI’s from websites like Youtube and Mcdonalds to merge an easy to use side toggle with viewable foods for users. We later implemented this side toggle with categories that can be seen on Youtube within our project to provide an ingredient list that matches the recipes.
What it does
This allows the user to both find a recipe that matches the ingredients they currently have or find an easy to make recipe that appeals to their selected taste.
How we built it
The Pantry Recipe Website was built in a 24-hour hackathon using a component-based architecture with React, TypeScript, and Vite. Recipe data is fetched from a Google Sheet via the Google API and rendered through reusable components, with state managed using React hooks like useState, useEffect, and useMemo. The UI, built with MUI and FIGMA, features real-time search, ingredient-based filtering, and a bubble notification system that highlights recipe matches when three or more ingredients are selected. State flows from parent to child components, keeping the app responsive and easy to maintain. WE focused on creating a user friendly clean UI for comfortable usage.
Challenges we ran into
We first attempted to make a backend to match the spreadsheet of recipes and ingredients provided with the website. We hoped this would allow us to label each recipe a color assigned that matches the user with the recipe that best fits their resources. We later realized this idea could all be done on the front end eliminating the need for an api which we were struggling to find in the first place. We also found the color description next to each recipe unprofessional and shifted to short statements like “good match” or “perfect match”.
Accomplishments that we're proud of
We are proud to have a working website that allows users to find easy to make recipes. Through the project we learned teamwork, problem-solving, and the dedication to follow through on the project despite our lack of experience both at hackathons and coding in general.
What we learned
We learned the importance of dividing work among a group of people to accomplish the goal at hand. If we hadn’t split among UI design, front end, and back end/troubleshooting we would not have finished the published website. We also learned more about Github shared projects, APIs, and FIGMA throughout the project as we implemented our ideas into code.
What's next for Check & Chef
If we continue the project we plan to add an additional homepage or section dedicated to showcasing The Pantry’s values. We’d like to add more about their mission statement, core values, and images that highlight their goals and accomplishments within the Davis area and beyond.
Log in or sign up for Devpost to join the conversation.