Description

• This project combines both the Yelp and Google APIs to find the best restaurants in a given area.
• It has autocomplete, and query adjustments.
• It crops photos to maintain quality.
• Built in 32-ish hours.

Getting Started

• Pull down package
• Gather required environment variables for .env file
  • REACT_APP_PROXY_DOMAIN
  • REACT_APP_YELP_API
  • REACT_APP_GOOGLE_API
  • REACT_APP_DEFAULT_RADIUS_METERS
• Run npm run start on root directory

Preview

For this exercise, you will be creating a mini React web application to display search results from Yelp’s Business Search API and Google’s Places API to provide a side-by-side comparison of local businesses.

Design Document for Styling/ UI Interaction

Images

• To fit the wire frame's uniform image size, I was faced with cropping photos or stretching them to size

Pros:

• Cropping retains image quality
• Maintains the essence of all landscape photos

Cons

• Portrait photos have the highest misses for the essence of the photos

Other options

• Iterate through the photos to find landscape photos

Pros:

• Less likely to have those vertical misses

Cons:

• Longer stiching process for APIs and rendering. Poor User experience?

---

Design Document for API calls

• The search bar will autocomplete a city or address, using the Google places API
• We will then make a query for Yelp
• On 10/7, after getting feedback on limited results, it is realized that Option #2 is more important.

Option 1: Query Google Places for search results for that cuisine + location

Pros:

• 2 API calls
• Stitch together the data and showcase that onto the page

Cons:

• Missing data point from Google === limited results
• Creates situation where no results will
• Using a hard coded radius map

Yelp API needs: city and term Google API

Option 2: Query each yelp result to Google places to find the reviews, google rating and google image

Pros:

• Accurate

Cons:

• Possibly slow
• Iterate through n number of Yelp results
• n number of API calls

---

Requirements

1. Using text inputs, the user should be able to query Yelp and/or Google using a search term and location.

2. After the user submits the query, show the search term and location above the search results, i.e. "Showing near "

3. For each of the top 15 search results returned from the API(s), display the following:

   • The name and address of the business
   • The rating on Yelp (X of 5 stars) and review total
   • The rating on Google (X of 5 stars) and rating total
   • An image of the business from Yelp
   • A photo of the business from Google
   • A url of the business’ website as a hyperlink

Points of emphasis

• Put yourselves in the shoes of the end user when making decisions about the UI & UX. Be ready to provide reasoning behind your decisions and consider the pros/cons of different approaches.
• Try to create the best system design possible. Think about how and where you would manage API calls & data, state, business logic, and component hierarchy
• Think about the optimal way to match businesses between Yelp and Google. There is no right answer - but there are tradeoffs for the different decisions. Be ready to talk about those.

Wireframe

Use the following wireframe as a general guideline when developing.

We encourage you to style as you see fit and will be reviewing how you structure your components and styling.

TypeScript

We encourage you to use TypeScript, as we use it extensively at Intellimize.

TypeScript is not enabled by default. It is understood that some engineers may have little or no experience with TypeScript, and it is not a hard requirement.

However, if you feel more comfortable using TypeScript, or would like to demonstrate your knowledge using it, you can convert the project by running:

npm run convert-to-typescript

Once you convert the project to TypeScript, there is no automated script to convert the project back.

After the script completes, be sure to stop and restart the development server for the changes to take effect.

APIs

Below you can find links to documentation as well as the authorization keys needed to use the APIs necessary to complete the simulation.

Yelp

The API Key will grant access to the Yelp Fusion Business Search API

API Key

IMPORTANT: In order for the APIs to work from the browser, all requests must go through the local node proxy (to circumvent CORS). To do so, replace the Yelp API host with http://localhost:3000/api/yelp.

For example, instead of using:

https://api.yelp.com/*

Use:

http://localhost:3000/api/yelp/*

Google

The API Key will grant access to the Google Places API and Google Geolocation API

API Key

IMPORTANT: In order for the APIs to work from the browser, all requests must go through the local node proxy (to circumvent CORS). To do so, replace the Google API host with http://localhost:3000/api/google.

For example, instead of using:

https://maps.googleapis.com/*

Use:

http://localhost:3000/api/google/*

Developing the application

The section below contains information on how to install and run the application.

Prerequisites

• node >= 8.10
• npm >= 5.6

NodeJS Website

First time setup

Once you have the project downloaded locally, install dependencies from the project directory by running:

npm install

Available scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder. It correctly bundles the application in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

npm run convert-to-typescript

See the section in this README on TypeScript for more information about why this script exists.