Eat Out

Eat Out Icon
Input Form Page
Results Page

Inspiration

There is no denying the fact that the 2019 coronavirus pandemic has significantly impacted many of our lives. One area that felt a particularly great effect is food establishments and services. In the past year, many businesses have opted in for a strictly takeout/delivery service model. But in the past few months, some businesses have also started to re-open for indoor or outdoor dining. It takes a lot of effort to run a business regularly after being in pandemic mode for a long time, so I wanted to create an app that brings more exposure to them.

What it does

When the app is opened, a form appears where you can define a query to the Yelp restaurant database, which includes parameters such as location, categories, and price level. Upon submission, a fetch request is sent to the Yelp business endpoint API. The results are paginated and can be filtered by the types of transactions they provide. To find restaurants with indoor or outdoor dining options, the transaction filter should have a value of "restaurant_reservation".

How we built it

The front end UI was built with Telerik KendoReact components. The back end utilizes the Yelp Fusion API and the web Fetch API.

Challenges we ran into

One big challenge was getting the data from the Yelp API due to the requirement of the Access-Control-Allow-Origin header in the response when making an HTTP request to an endpoint at a different origin from the request. This was implemented to guard against cross-origin forgery attacks, but made the project slightly more complicated. I had to send the request to a proxy server Cors-Anywhere that injects the header into response.

Accomplishments that we're proud of

I am very proud of the responsiveness of the application as well as its utility. I did multiple test runs with different parameters and the app handled them very well. This was also my first time using KendoReact and the Fetch API, and I am content with the result.

What we learned

I learned how to use KendoReact UI components, the Fetch API, and general web programming skills including Typescript and modular code.

What's next for Eat Out

There were many initially planned features that were not included in the application for various reasons, which was either the lack of time or tech issues that took too long to debug. They include: