Our inspiration for this website was those moments where we could not figure out what to eat. So, we built a website that could help us with these moments. We also wanted to develop some sort of application or tool based on web development.

What it does

This website is aimed at solving the everyday question of, "What are you going to eat?" Rather than having to sit there and ponder about all the different food options one has available, tastey shortens that process by showing the user a picture of food. Should they not prefer that option, the skip button randomly selects another picture from our database. With this, the user can browse through different options until they find one that satisfies their cravings. Once one has found the food they prefer, the Find a location near me button will load up 3 different locations, addresses, and phone numbers of nearby restaurants and display them on a map and in text. Now, it is up to the user to decide which location to travel to and enjoy their next meal!

How we built it

At it's core, our website was built with HTML, CSS, and JavaScript. In order to design the layout and interface, we also utilized Figma. This way, it was much simpler to design the visuals of the site. Gathering the necessary information for the nearby restaurants used a combination of Yelp's API as well as different modules from Google's API. Specifically, we used the Maps JavaScript API and the Geocoding API. By mixing these two APIs together, we were able to easily access and display the information of businesses near the user's location.

Challenges we ran into

Some challenges we ran into was trying to correctly utilize both Yelp's and Google's APIs. This area was completely new territory for us, so we had to learn how to work with it quickly. Additionally, we had to find a way to connect the page that presented random images of food to another page that displayed the map and accurate restaurant information. Perhaps one of the biggest challenges was trying to place down the correct markers on the Google Map itself, as these markers needed to access the latitude and longitude of the user's location and each restaurant, so we had to combine both Yelp's and Google's APIs in order to effectively display the markers.

Accomplishments that we're proud of

Our website boasts a very pleasing color palette, one that makes the design simple, yet effective. We are also proud of how we incorporated the different API systems into our website for a very clean and informative experience. Specifically, correctly using and displaying a Google Map centered around the user's location that properly shows 3 nearby restaurants was a very fine accomplishment. We have not used these tools before, but seeing them work in action is very pleasing. Finishing this project in a limited of time as a group also makes us proud.

What we learned

We learned that there are a variety of ways to display data on an HTML page and that planning out wireframes for a website is very useful. We also learned how to implement functions to catch user action so we would know their desired food. Additionally, we discovered how to work with the Yelp API and use it to fetch and return restaurants based on certain criteria, and Google's API revolving around map usage in order to properly showcase a map and populate it with relevant information. Learning how to acquire a user's location was relatively new to us as well that we managed to figure out quickly.

What's next for tastey

In the future, we plan to make tastey a mobile app that allows the user to swipe on the search page rather than click the buttons. At the same time, there will be more restaurants in the result page in the future update. Additionally, adding an option to display recipe ideas rather than a restaurant is also a plausible idea.

Share this project: