Yelp business filter

Find business by location and open time, with yelp GraphQL API.

Getting Started

First we need an API Key for requesting yelp API: https://www.yelp.com/developers/v3/manage_app

git clone git@github.com:KendraTang/yelp-business-filter.git
cd yelp-business-filter
yarn
export API_KEY=<INSERT_YOUR_API_KEY_HERE>
yarn start  # Runs both frontend and backend server

And then visit http://localhost:3000, Voila!

How did you decide the technologies you decided to use in your submission?

create-react-app To create a react app without configure things by my own so I can start my work easily. Comes with useful config and packages such as webpack and jest.
Apollo Relay and Apollo are the most popular libraries to use GraphQL with React currently. I did a little search of relay and react-apollo and tried them both. I chose react-apollo because its documentation is more clear, and easier to get start with.
CORS Anywhere Since https://api.yelp.com/v3/graphql doesn't support Access-Control-Allow-Origin header, we need a backend server to send API requests for us. CORS Anywhere is very simple to setup.
react-app-rewired Used to override create-react-app webpack configs without ejecting which may cause the project to be too messy.
semantic-ui-react For quick and simple UI layout.
Moment.js We need to compare open hours with selected datetime. Moment.js is good at datetime parsing and manipulation.
Concurrently Runs both frontend and backend servers at once.

How did you decide the requests to Yelp API?

First I decide what to show on BusinessCards, and then request for what I need. I wanted to show reviews of the businesses but the API would respond with error sometimes. For example, search with term: "ramen", location: "台北" is ok but term: "拉麵", location: "台北" will respond with error.

Are there any improvements you could make?

Find a better way to make the sticky footer
Redesign cards to be smaller (especially on mobile view)
Better datetime picker
Show half star in rating
Filter by other dimensions
Click to show more businesses

What would you do differently if you were allocated more time?

Try enzyme
Integrate google map to show businesses on map
Don't use Semantic UI, write my own CSS instead.