Khavenue

We are creating an innovative way that makes it easier for people to cook more at home by displaying nearby stores with essential ingredients and recipes on the same platform.

Comment

Inspiration

What it does

It allows users to cook more since it makes recipes more accessible with nutrition information, as well as nearby stores where you can find those ingredients to make your favorite dish! since these two features go hand-in-hand it is important to group them on the same website. Since it will be easier for people to find the essential ingredients to create their dishes and find recipes, they can meal prep, experiment with cooking recipes, and save more money while having the convenience of going to nearby stores instead of spending a lot of money on restaurants.

How we built it

For the backend development, we used the edamam API to search for recipes based on user input and we used Kroger's API search to find which stores had which ingredients we used google cloud for natural language processing to isolate ingredient names from recipes into something that we can search in the product catalog. We also used React and Firebase Hosting to build the web app and Python Flask to connect the backend with the front end. The backend was done in Python. As for the front-end development, we began sketching drafts of the website's sections while referencing trendy design patterns. Beginning the wireframing process, we chose an optimal color palette by referencing color theory and color psychology trends to create an inviting theme that complements the user experience and interface. Additionally, we incorporated principles of Gestalt Psychology and cognition to find the optimal arrangement of website components and elements that make the user experience as simple and efficient as possible while also maintaining optimal functioning. Additionally, We utilized the concept of gradience to help make words more readable like the words on the home page.

Challenges we ran into

For the front-end development, it took a lot of trial and error to find the right layout for some of the designs due to the time restriction. Also, it was difficult to find a good Logo design due to the time restriction as well. On the backend, we struggled with finding suitable APIs for finding nearby groceries (so we had to use Kroger's API for the time being) and finding recipes and parsing ingredients. We also struggled with connecting our Firebase-hosted React frontend with the Flask backend, especially with multiple various functions, such as retrieving closest supermarkets, finding the ingredients of recipes, and parsing ingredients using Google Cloud's Cloud Natural Language Processing API.

Accomplishments that we're proud of

Frontend - We are really happy with the color palette and UI/UX design of the website. The red dominant color according to color psychology elicits feelings of passion which is complemented with a light cream shade of yellow which is associated with feelings of hunger and happiness which are important emotions we want to bring out in our user experiences. We are really proud of the utilization of our chosen color palette since the contrasts blend well together. Backend/overall - We are really proud of our effort to come up with an idea, find relevant data sources, and attempt to build a data-driven application to solve a real-world problem for many in our shoes. Our ability to quickly learn how to work with these APIs and Google Cloud Platform features.

What we learned

We learned to utilize color palettes better with contrasts (found websites that are helpful with selecting the right color palette). We also refreshed our abilities to develop a multifaceted application and how to take data from many sources to solve an interesting problem.

What's next for Khavenue

We weren't fully able to connect all of our pieces together, and this could possibly be integrated with just a few more hours of time on the project. With more time, it would also be great to create a filter button that lets you filter recipes by food preferences and allergies (e.g. vegan, peanut allergy, etc. ). Additionally a better logo can be designed to better complement the call to action. Another idea we had was to promote mental health by allowing friends to share recipes with each other to show each other compassion and care, and promoting physical health by adding more detailed nutritional information from our Flask endpoints and connecting the locations to Google Maps Directions API or Citymapper API to provide walking or biking directions to the nearest grocery store for an ideal recipe. .

Built With

Share this project:

Updates