After seeing the "Making the Mundane Fun" prompt from RBC, we knew, as students stuck in quarantine, that we had to produce the ultimate solution to the most common student problem: absolute mediocrity and utter boredom. After prepping, visiting booths, and attending the opening ceremony, our team had decided to take a quick dinner break and order food. Choices and options were tossed around with minutes fleeting and our stomachs growling. At this very moment, we realized that we were faced with the ultimate problem: we couldn't decide where to eat!
What it does
In response to the very problem we were experiencing on the first night of hacking, we decided to build Race for a Taste, a web application that takes data from the Yelp Fusion API to help the user make the routine of deciding where to eat more enjoyable. Using criteria calculated based on values pertaining to number of reviews, user location, operating hours, and price range, the restaurant options chosen allow the user to determine the best restaurant choice.
How we built it
After ideation, we designed the branding and laid out each screen for the application on Figma. Using the Prototype tools, we mapped out each interactive feature from button hovers to user input. For the web app itself, we used React on the front end, and node.js (express) on the backend. Since our team is composed of junior developers, it was important for us to choose frameworks with a vast amount of documentation and libraries for easier development. Especially with npm, whenever we needed to fulfill a component, it was simple for our team to choose a package and install the dependencies. Notable libraries that we used were axios, yelp-fusion, nodemon, and node-sass. Lastly, we used git as our version control system, and vscode liveshare for collaboration.
Challenges we ran into
One challenge we faced was figuring out how to use the Yelp API. We needed to learn how to do API calls to retrieve information and then find a way to extract information needed to complete our project. In addition, some react components were not designed to fully utilize the Yelp API capabilities. Early in development, our group aimed to create a search bar to list out all possible restaurants, but the component was unable to separate a “term” search parameter and a “location” search parameter. Due to time constraints we decided to make some changes to our flow and features. Another challenge we faced was figuring out how to display an equal amount of cars on the screen to the amount of restaurants selected. Following this, we also encountered the challenge of setting the speed for the respective cars depending on the rankings.
Accomplishments that we're proud of
We were really proud of adding cool elements to our web app like the infinitely animated road in the header. We are also really proud of the other fluid animations in the web components as well as the animated cars in the race. One thing that we thought was really cool was figuring out how to “ping” our current latitude and longitude and sending that as a request to the YelpAPI. We found out that html5 has its own function that we can call to get the user’s current position.
What we learned
We were able to familiarize ourselves with development patterns with react hooks, as most of the team had only used classes in the past. Understanding how to use react given hooks such as useState, and useEffect were crucial when making this project. Additionally, we relied heavily on git version control to track our progress; learning the git workflow of branching, pushing and merging was necessary when working in a team of four. The last notable item would be the many hours spent on troubleshooting and getting to know our most important friend, Stackoverflow. Overall, although tiring, we’re super proud of the project that we produced in so little time.
What's next for Race for a Taste!
Moving forward with the development of this application, we’d like to explore implementing more features/calls to action on the end screen, including action items for the top chosen restaurant (phone number for takeout, link to ubereats order page, map directions to restaurant). To personalize the experience, we may consider creating a user profile to keep track of previous choices and potential new choices (track user preferences, dietary restrictions, new things they want to try, budget, etc). In terms of features that we may want to add, we’d like to take advantage of Google’s extensive open-source library--potentially using the voice API to allow better accessibility and reach a wider range of user demographics.