Rateatat

Inspiration

Grubhub is an essential food ordering service at Cal Poly and in the San Luis Obispo community. Every dining facility on Cal Poly’s campus requires you to use Grubhub to place online orders. As students, we often use Grubhub and have come across a persistent annoyance. There is no rating system for individual menu items. We wish we could know what others thought about the item before ordering it. This would save people time and money because they wouldn’t buy food items that have low ratings which they wouldn’t enjoy.

What it does

When you click on the chrome extension while on a Grubhub restaurant website, you get a list of the different menu items on the screen. For each item, you will then be able to see the percentage of people who gave it a thumbs up. You have the option to thumbs up or thumbs down any food item. This can inform you about restaurant menu item choices. This is unique because there aren't ratings on a per menu item basis. There's an overall, out of 5 stars, rating for each restaurant on Grubhub but there isn't a rating for each individual item to inform the buyer. With online retail, there's a rating for each item right on the item. It is usually in the format of 5 stars. This doesn't exist for food delivery. In the case of food delivery, the item and the rating are separated. There's an Instagram account called Cal Poly Food Reviews that reviews food items at Cal Poly and gives each a rating out of ten. The place someone purchases a food item at Cal Poly, Grubhub, is disconnected from the place one can see ratings for each food item, Instagram. We bring these two together with our Chrome extension. Also, while the ratings on Instagram of Cal Poly food are just from individual people, our Chrome extension crowd-sources ratings from anyone using the extension, giving the users a more accurate rating.

How we built it

We decided to use Google Sheets as a database to store the cumulative user input from anyone using the Chrome extension. To connect the chrome extension to a Google Sheet, we followed link, a tutorial for using Google API in Chrome extensions. We used HTML, JavaScript, CSS, Chrome Dev Tools, Google API, and Google Sheets.

Challenges we ran into

We hit multiple roadblocks while following the google sheets API documentation. We ran into an OAuth permission error, preventing the transferring of information between the extension and sheets. This was overcome by learning more about the Google Cloud Platform interface to allow certain users to make get and post calls using the API.

Accomplishments that we're proud of

Connecting the Chrome extension to the Google Sheet. We were able to have it so that when you click a button inserted into the HTML by the Chrome extension, the name of the current website, the url, and the time we clicked it are added to a Google Sheet.

What we learned

We learned how to create a Google Chrome extension, connect a Chrome extension to a Google Sheet using Google API, and use HTML for a front-end web devlopment. We learned that looking up errors on Google is useful and should be the first step in the process of fixing a foreign error.

What's next for Rateatat

Next, we will add the HTML code we have written for the front-end of our Chrome extension to the code directory. We will make it so that when you click on the extension, you get a menu of the food items on the current page to like or dislike and see ratings. Currently, the Chrome extension just appends web page information to a Google Sheet when you click a button inserted into the page HTML by our extension. This is basically what the tutorial we followed explained how to do. We will write our own javascript methods to make get, post, and put calls for the likes and dislikes. We will work on the project until it works as explained in the "What it does'' section.

Built With

• css
• google
• google-sheets
• html5
• javascript