Beer Chooser Coding Exercise

In this exercise, the goal is to create a simple user interface using a modern framework (e.g. Angular, React, Vue) that can search and filter a list of beers to help the user select a beer to drink based on his/her criteria.

Data

There is a beers.json file and a breweries.json file attached to this exercise. You may create a mock backend that returns these two data sets as needed.

User Requirements

As a user using this interface, I want to be able to do the following:

• List all beers if no search criteria are entered.
• Search or filter the beer list by any/all of the following:
  • Search by name of the beer, including partial matches, i.e. searching for "stout" will match "Oatmeal Stout", "Chocolate Stout", "Imperial Stout", etc.
  • Filter by Alcohol by Volume (the "abv" property of each beer) by allowing the user to specify a range of acceptable ABV values
  • Filter by the style_name property of the beers, either using a text field or by providing the user with possible options
• Display a list of results either dynamically or with a Search button, with at least the following information about each beer: its name, alcohol by volume, its style name, it's description, and the name of the brewery where it is brewed.

Other Instructions

You may submit the project using any reasonable medium as long as it can be run in a modern web browser easily. Try to make your code as close to what you would consider production quality as possible, and submit any automated tests you use along with the rest of your code.

UI design and styling decisions are left up to you. We encourage a clean and functional UI, but you do not need to spend excessive time on styling. Using frameworks for look and feel like Bootstrap or Angular Material is completely acceptable.

You do not need to worry about browser compatibility. Submit any instructions to run your application, the browser you used during development, any assumptions you made, and anything else you would like us to know along with your final exercise.

Feel free to ask any questions you have while completing this exercise. Finally, try to have some fun with this and use it to show us your programming style!