Ravenous

Table of contents

• Demo
  • Installation
• How to use
• Other Information
• Credits

Ravenous is a Codecademy Project of a React app that allows a user to search for businesses in a general location and sort the result (returned by Yelp API) by best match, highest rated, and most reviewed.

Demo

Note: The Ravenous app relies on data from the Yelp Fusion API. Unfortunately, the API does not support Cross-Origin Resource Sharing (CORS). In order for the Ravenous app to work properly, you will be prompted to navigate to this link and click the button to "request temporary access to the demo server".

Alternatively, you can install extensions to allow CORS on your browser: Chrome, Mozilla, Edge, etc.

Online: https://ravenous-yelp-like-clone.netlify.app/

Installation

• Clone the app.
• Navigate to the app directory.
• Run the command npm start

The command runs the app in the development mode. Open http://localhost:3000 to view it in your favorite browser.

How to use

Once CORS is enabled in your browser, the app should work properly. You, can go ahead and input the name or type of a business in the 'Search Business' input field. Then, input a location to search for these businesses.

Examples of a valid Business include: Hair Salon, Pizza, Mexican, KFC, Mall, etc.

Examples of a valid location include: Cancun, Toronto, Etobicoke, United States, Pembina Hwy etc.

You can also sort the result by best match, highest rated, and most reviewed. Don't forget to click on the "Let's Go" button after selecting the sorting criteria.

Other Information

Due to bayesian inference, sorting by 'highest rated' does not work as a user would expect. This is so that a business with 1 rating of 5 starts does not immediately jump to the top.

Credits

• The project instructions where provided by Codecademy. However, instead of using class components, functional components where used to construct the entire app. Instead of using plain react, typescript was injected to make it easier to debug. Most css file while convert to Sass files. Also, Error messages where included to warn the user about CORS issues or some invalid inputs.

• Most of the data is retrieve from Yelp API