
Ravenous
React JS Development, CSS, HTML
Ravenous is a front-end React application that helps users find restaurants in their area. With Ravenous, you can find a restaurant that is a best match, highest rated, or most reviewed.
Ravenous is a front-end React application that helps users find restaurants in their area.
Under the Hood
Ravenous connects with the Yelp API to return dynamic data from restaurant search queries. There are four major React components that make up the Ravenous application. The Business component creates individual instances of restaurants returned by the Yelp API. It includes the business name, location, review count, category, rating, and business image.
The BusinessList component maps through data returned by the Yelp API and renders a list of Business components based on the search query. Each Business component receives a business object from Yelp and renders specific key-value pairs, like the business location, for the user interface.
The SearchBar component handles the search functionality for the Ravenous application. In it are several methods that help pass data entered by the user to the Yelp API. For example, the renderSortByOptions() method maps through three sorting options—best match, highest rated, and most reviewed—to return tailored search queries. Finally, the App component renders the SearchBar and BusinessList components, and imports a Yelp module with the business logic for the Yelp API.
A Note on Development
The concept and framework for Ravenous were first created by Codecademy. Completing this project is part of their Web Development career path.