Grocery Guru

• 

  The Grocery Guru Website

we have a spinning sandwich :)

Inspiration

We were inspired by the "education" category, specifically dealing with finance. As college students, we have personally dealt with tight budgets, and not knowing how much we are going to spend when going grocery shopping can be quite intimidating. That's why we wanted to create Grocery Guru, a simple website that does these calculations for you so you know if the good old wallet can handle the hit for any interesting recipe.

What it does

This website accesses a large database of hundreds of various food items found in Walmart and takes into account their average estimated price. The interface is clear and simple: a search bar with a auto-filling drop down menu to choose what you're looking for. On the bottom is a table that shows the ingredients you've added to your list as well as their respective prices. Then, the bottom of the table will display the total estimated cost. Alongside these amazing features, the website is user-friendly and fun to make the thought of finances more fun! The spinning sandwich cursor will definitely ease your worries.

How we built it

First, we brainstormed for an idea. Once we decided, we went ahead and used Figma to create a visual draft of what the website could look like. We wanted to try and learn something new for this Hackathon, so we decided to try out React. With React, we first created the front end interface with the title, description, and basic filler boxes. We split up the work between the search bar, the table, reading the data, and the actual functionality of the website.

Challenges we ran into

It was very difficult to implement the full functionality of the table, as we had to figure out how to transfer the data typed and selected from the search bar to the actual table. Due to our unfamiliarity with React especially, this challenge was particularly difficult. However, with teamwork and Stack Overflow, we were able to overcome this challenge and complete the website.

Accomplishments that we're proud of

None of us have ever touched React before and only one of us really had any experience with web development at all. To our surprise, we got much farther than we initially had thought. While we were not able to implement the full functionality we envisioned, we were able to create a website with a pleasing UI and some functionality of the search bar using actual data. Also the spinning sandwich cursor.

What we learned

Learning new technologies and frameworks can be quite challenging yet fun. Also, as this was our first time attending a hackathon, we learned how to work in a group and collaborate to create a project within a time frame.

What's next for Grocery Guru

We had many other features planned for the website but did not have enough time to implement them. Perhaps we'll come back and implement those features.

Built With

• css
• html
• javascript
• kaggle
• python
• react