Picking a restaurant has always been a struggle for people who have certain restrictions due to the fear that there will not be any menu items available that adhere to their restrictions. Personally, as a person who is (trying) to follow a ketogenic diet (low-carb), it is always a pain to try and figure out what restaurants I can go to, and what dishes are appropriate for my diet. It's time-consuming to look through several menus of various nearby locations, and having to look up the nutritional information of each menu item. We wished to develop an application that would let the restaurants find us, rather than us scouring the webs, sifting through menus, to see if everyone can eat there.

What it does

We set down to tackle the problem proposed above. By doing so, we decided to focus on a web application that is publicly available for any user looking for a menu-friendly restaurant. The user is able to select what time of dietary plan they have, as well as any additional restrictions such as gluten-free, low carb, etcetera. When the user opens the webpage, it will request permission to access their specific location. In doing so, when the user inputs the total distance they are willing to travel for their meal, the application will look for appropriate nearby restaurants within that radius. Once the values are submitted, they will be presented with a list of menu items, the corresponding restaurant, as well as their relative tags. The user can now enjoy their meal with an ease of mind.

How we built it

For the front-end, we used React. All the different components of the website such as the header, the form, and the results were broken up and pieced together in the end.

For the back-end, we created our API using stdlib.

Challenges we ran into

For the front-end, it was my (Tas) first-time using ReactJS, or any Javascript framework for that matter. I was fairly new to JavaScript as well, therefore, there was a really big learning curve whenn trying to implement was web browser using ReactJS. Initially, I did not understand any of the code within the folders, but slowly, through tutorials, trial and error, Googling, asking questions, and brute force, I was able to comprehend enough to piece together a visually appealing landing page.

For the back-end, we needed a source of information for our nutritional data. At first, we thought we'd be able to scrap for this data, but scrapping is extremely unreliable and not very flexible. So instead, we went with an API called Nutritionix.

There were two main problems with Nutritionix: one, it only supported restaurants located in the USA; and two, on the free plan, it only allowed for a minimal amount of API calls per day.

In order to overcome the first problem, we assumed that a lot of American restaurants also resided in Canada. We also assumed that menus were fairly similar between each counterpart. So we found restaurants near a geographic location and then used the American data to populate it in our Canadian restaurants.

The second problem was dealt with by limiting the range of our search, as well as storing menu items in stdlib's storage system. This limited the number of API calls required.

Accomplishments that we're proud of

For front-end, personally, I was proud to be able to have a web page functioning in the end. I was able to search up the new terminology, as well as implement my previous knowledge of HTML and CSS to deploy a clear, concise landing page that is user-friendly. I was glad to do it all within the course of this weekend.

For back-end, we were able to make an API using stdlib and successfully query for nutritional information near a geographic location.

What we learned

For front-end, I learned a lot about the ReactJS framework. I learned that it is the main js file, in which smaller components are pieces together to make the main page. I also learned what package.json's purpose was, how any user can install our app and run it, as well as how important it is to write '--save' when using npm.

For the backend, we learned that it was easy to make APIs using stdlib and we were also exposed to other APIs like Google Maps, Nutritionix, Zomato and various other health related APIs.

What's next for ServesUp

We hope that in the future, we are able to accommodate a larger variety of dietary plans and restrictions, as well as provide more information outputted in the menu items. Such information would include the price, address, restaurant rating and more. It would be incredibly convenient to implement a different sorting functionality later on, such as sorting the results by the distance of the restaurants.

Built With

Share this project: