Karin's Beer - React Assessment

Welcome! Thank you for taking the time to do this coding assessment. Please read the guidelines before getting started.

Assessment starter can be found here: Karin's Beer Assessment Github

Get Started

Fork the repo

Once you've cloned the repo locally, run yarn to install required packages.

Run yarn start to launch the project on http://localhost:3000

API:

Authentication

All endpoints require an API_KEY to access. Talk to Andrew to get this key. Once you have the key, you will need to include using key as a query parameter bypass the authentication.

Example http://www.karinsbeer.com/api/[END_POINT]/?key=[API_KEY]

Beers

  1. /api/all_beers - Returns the first 50 Beers from the BreweryDB API
  2. /api/beer/:name - Returns info about the Beer if found by name
  3. /api/beer/random - Returns info about a random Beer

Breweries

  1. /api/all_breweries - Returns the first 50 Breweries from the BreweryDB API
  2. /api/brewery/:name - Returns info about the Brewery if found by name
  1. /api/search_all?query='' - Returns all info from the BreweryDB API matching search query
  2. /api/search_beers?query='' - Returns all info about Beers from the BreweryDB API matching search query
  3. /api/search_breweries?query='' - Returns all info about Breweries from the BreweryDB API matching search query

Glassware

  1. /api/all_glassware - Returns all Glassware in the BreweryDB API

Locations

  1. /api/all_locations - Returns the first 50 Locations from the BreweryDB API
  2. /api/locations/:city - Returns the first 50 Locations in the matched city from the BreweryDB API

Assessment Guidelines:

Required Technology:

To test your ability to use modern frontend tools, you'll be required to use the following in your application.

Assessment Steps:

PART I - Basic Data Retrieval

  1. Fork this repo so you have a clone of the project in your own github
  2. Create a new Beers Component - src/components
  3. Add a new client side route - /beers that renders our new Beers Component. Our routes are defined in App.js.
  4. Use axios, fetch or any other HTTP Request library to GET the first 50 Beers from /api/all_beers. The way you choose to display / style this is up to you.
  5. Use axios, fetch or any other HTTP Request library to GET the first 50 Breweries from /api/all_breweries. The way you choose to display / style this is up to you. You can create a new route and have it on a different page or you could use your Beers Component and a Grid system to show all beers and breweries side by side.
  6. Make sure to use enough attributes to make the site interesting. Most Beers and Breweries have an image or multiple images.

PART II - Controlled Data Fetching (This is an important step, please don't skip it)

  1. Paginate the list of Beers and Breweries, loading no more than 10 at a time. Server-side pagination is already setup on the server all you have to do is make sure your client side API requests are passing the correct query strings for the rails server to do the pagination
  2. Have the ability to go to other pages via pagination links or Infinite Scroll

PART III - Search - Looking Up Specific Beers / Breweries

  1. Have the ability to click on a Beer / Brewery and show all the information about it. You will use an API Endpoint for this. The way you choose to display / style this is up to you.

BONUS

  1. Use any / all of the other API Endpoints to demonstrate your knowledge of React / Redux
  2. Implement live search on all of your components that show lists of items like Beers, Breweries, Etc
  3. Make your entire site responsive so it looks good on: a large screen, a tablet, and a phone
  4. Port to a React Native App