MealMatch

app logo

What it does

MealMatch asks the user to select what fast food item they want to eat, and then suggests alternate healthy recipes for the user to make. It connects with local groceries stores to come up with shopping lists, and can give coupons or discounts for using these lists. The user can add also their own dietary restrictions and location settings.

How we built it

We used Figma to create wireframes and prototype the user interface, and then we had our developers do the front end aspect using react native and node js.

Challenges we ran into

Web scraping Originally, we planned to use Python or JavaScript, specifically libraries like BeautifulSoup, Puppeteer, or Cheerio, to scrape prices, calories, and ideally nutrition information from both grocery store and fast food online menus. However, not all fast food websites provide nutritional data. Our developer encountered a significant challenge when attempting to scrape data using Python due to variations in website loading processes, making a uniform scraping strategy unfeasible across all sites. We switched to react native because we decided it was better as a phone app.This was our developer’s first time using react native and some of the issues we ran into was running Expo Go on our phone and trying to connect through the QR code.

Accomplishments that we're proud of

We are proud of the functionality and that our developers learned a whole new software in just one night when we are all beginners to hackathons and coding. We are also proud of being able to produce our working prototype in Figma after such a short span of time, when we are also beginners in design.

What we learned

The developers learned how to use react native and one of them learned JSX and HTML for front end development. One of the designers also got a better grasp of Figma as this was her first time using it.