Shopping List Compiler

layout of our website

Inspiration (what problem are we solving)

Our inspiration for our web application stems from the lack of convenience when compiling a shopping list for the week.

Consumers have access to a wide range of recipes across the internet, and many of these recipes share similar ingredients.

What it does

Our web app takes in inputs of various recipes (this can be done in any format: website url, screenshot, text, etc), uses our web-scraping and machine learning model to identify the ingredients and their quantities that are listed in the data, and compiles them into a single shopping list.

Our model combines multiple ingredients from different recipes by adding the quantities, resulting in a customisable shopping list with no duplicates.

How we built it

We used multiple technologies including:

Recipe web scraper built in Python Frontend
Figma UI/UX planning and designs
React.js web app functionality

Challenges we ran into

Most of our team were fairly new to the technologies we were using. For 3 out of 4 people working on front-end, it was their first front-end project. For the backend team, it was their first time developing a machine learning model.

A few challenges that our backend team ran into includes;

Entity extraction challenges of separating quantity and ingredients from recipe-website ingredient lists
Natural language processing
Tedious machine learning labelling to train our model
Integration of team members’ code in github

Accomplishments that we're proud of

Since the majority of our team were beginners, a lot of our accomplishments come from our contributions to front-end web design, as well as developing a working model. Our frontend team gained a lot more confidence with programming in JS, CSS and React.

What we learned

We were able to gain new skills in front-end development and training machine learning models. We also learned a lot about teamwork in terms of coding, using github and git commands, and integrating our code together.