Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/chrisbobbe/yelp-naperville

A take-home project: React and Meteor app using the Yelp API.
https://github.com/chrisbobbe/yelp-naperville

Last synced: 10 months ago
JSON representation

A take-home project: React and Meteor app using the Yelp API.

Awesome Lists containing this project

README 

          
| # | Challenge | Description | My Solution |

| --- | --- | --- | --- |

| 1 | The Yelp API doesn't implement CORS, [and has decided it never will](https://github.com/Yelp/yelp-fusion/issues/44). | Modern browsers can't make cross-origin requests under some circumstances, unless the CORS protocol is handled correctly by both the requester and the server on the other domain. Yelp doesn't do this. The available [workarounds](https://github.com/builderLabs/Yelp-Fusion-JavaScript/blob/master/yelpFusionJS.md) to enable the client to send requests directly seemed hacky, and only made it difficult, but not impossible, for someone to sniff the API key. | 👍 Send all requests to the API via the server, and send JSON back to the client for caching (in a local Meteor collection) and processing. This may not scale well, as it increases server traffic. But it works, and hides the API key completely. |

| 2 | API key accidently exposed | I hard-coded my API key into the GitHub repository and pushed it. While the only risk this time is that someone uses my daily request quota, this is a practice to avoid. | 👍 Store the API key in a separate settings file that only loads on the server, and add it to .gitignore. Also, refresh the API key so the old one can't be used. |

| 3 | API responds with unexpected data structuring | When using the Business endpoint, the Hours property is usually set to an array of objects describing opening hours. When a business is missing its hours, the API should set Hours to an empty array. Instead, it omits the Hours property altogether, causing errors in my code. (Try searching for Wallace Farms.)| 🔮 None finished. I need to make some kind of template to fall back on for any missing properties, instead of doing hacky tweaks here and there. As Sandy Metz [says](https://www.youtube.com/watch?v=OMPfEXIlTVE), "use those active nothings." This could also prevent the errors appearing in Challenge 4. |

| 4 | It's possible to visit /detail when no business is selected. | A Route component (react router 4) is set up to show the BusinessDetail component when the location is /detail. This component's state holds the currently selected business, but when this state is empty, it causes errors. | 🔮 None finished. An empty business object with the proper structure would at least prevent the errors, but a better solution is to prevent access to /detail when no business is selected. I've included a Redirect component but it needs debugging. |

| 5 | Yelp has [display requirements](https://www.yelp.com/developers/display_requirements) for using its API. | There is a long list of helpful ways to avoid getting sued by Yelp. Eek! | 👍 Use the Yelp-branded stars. A partial solution, but this can be easily finished. |

| 6 | Searches and business lookups take several seconds to load. | The user has to spend precious time staring at an unmoving screen while requests are sent to the server, to Yelp, back to the server, and back to the client. No information is available in a bad connection. | 👍 Add local caching with a [Meteor local collection](https://guide.meteor.com/collections.html#local-collections). Cached information can be viewed immediately (even offline), and an asynchronous update will change the view if necessary. (TODO: handle cache size limits.) This is only a piece of what Meteor collections offer, but the publication and subscription model is kind of one-size-fits-all, and we want individualized caching for searches. Also, having search history (even for Yelp) stored on the server might be a privacy concern for some. Also added a loading circle for uncached requests. |

| 7 | BusinessDetail component getting pretty large. | Several of the items appearing in BusinessDetail could easily be split off into separate components. | 👍 Not yet finished, but this will be easy. |

| 8 | Repeated code in the Search component | The fetchBusinesses and fetchDetail methods in the Search component share a lot of code, which can probably be refactored. | 🔮 No solution yet. The behavior is similar, but different enough that I'm tempted to leave it as is. I'm also not entirely sure how to separate ES6 class methods from the class itself, which I would have to do if putting the shared code into a separate module. |

| 9 | Modifications to the styles/theme need more consistency. | I added the higher-order component withStyles to BusinessDetail so I could tap into [Material-UI's](https://material-ui-next.com/) styling and make the Chip components have some spacing in between. Wouldn't it be better to add withStyles to the entire app? | 🔮 Not yet finished. Find out exactly how withStyles works; whether it passes styling props down the whole component hierarchy, or just to the one component, like withRouter from React Router 4 does. Use this knowledge to standardize how styling modifications are done across the app, and improve the responsive design. |

| 10 | Minimum Requirements | Create a two-page application using the Yelp Fusion API. (1) On the first page, you should be able to search for businesses in Naperville. (2) When you select a result, it should take you to a second page where you can see details about the business. | 👍👍 Yes, and yes! While there are clearly improvements to be made, I feel like I've done a good job of fulfilling the main requirements. I even added local caching, a loading bar, and some sleek styling courtesy of Material UI from Google. |