Karin's Beer - React Assessment
Welcome! Thank you for taking the time to do this coding assessment. Please read the guidelines before getting
Assessment starter can be found here: Karin's Beer Assessment Github
Fork the repo
Once you've cloned the repo locally, run
yarn to install required packages.
yarn start to launch the project on
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.
/api/all_beers - Returns the first 50 Beers from the BreweryDB API
/api/beer/:name - Returns info about the Beer if found by name
/api/beer/random - Returns info about a random Beer
/api/all_breweries - Returns the first 50 Breweries from the BreweryDB API
/api/brewery/:name - Returns info about the Brewery if found by name
/api/search_all?query='' - Returns all info from the BreweryDB API matching search query
/api/search_beers?query='' - Returns all info about Beers from the BreweryDB API matching
/api/search_breweries?query='' - Returns all info about Breweries from the BreweryDB API
matching search query
/api/all_glassware - Returns all Glassware in the BreweryDB API
/api/all_locations - Returns the first 50 Locations from the BreweryDB API
/api/locations/:city - Returns the first 50 Locations in the matched city from the BreweryDB API
- The purpose of this assessment is to help us evaluate your client side application development coding skills.
- You are allowed to use any non-human resource. Ex:
- Allowed: StackOverflow, Google, Old Code, Etc...
- Not Allowed: Speaking with anyone that has coding knowledge or is in the Technology field.
- Check out the API index below.
- Don't be overwhelmed. We intentionally included more steps than you are likely to complete in your given
time frame. Try to do them in order, but you can skip steps if you get stuck. If you skip a feature, put in the
notes as to why you skipped it.
- Please try to commit often and add messages to your commits so we can more easily review your work.
We added more steps than we expect you to finish. Don't be overwhelmed and get as far as you can in the
time you have. We will take into account the time amount of time you took, the amount of experience you have in
React, the difficulty of the UI library you use etc.
IMPORTANT: You will need to obtain an API key to access the API. Please reach out to Andrew for this key.
- HINT: Postman is an awesome tool to start making API Requests with to see what data comes back and how
you'll want to manage that data in your React Components.
To test your ability to use modern frontend tools, you'll be required to use the following in your application.
- Modern UI Library - One of the following, or something similar:
- State Management Tool - One of the following:
- Http Request Library - one of the following:
- Put the time that you start and end on the first line of notes.md. Also, add any grading advice, disclaimers,
brags, feedback, or anomalies you encounter along your way.
PART I - Basic Data Retrieval
- Fork this repo so you have a clone of the project in your own github
- Create a new Beers Component -
- Add a new client side route -
/beers that renders our new Beers Component. Our routes are defined
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.
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.
- Make sure to use enough attributes to make the site interesting. Most Beers and Breweries have an image or
PART II - Controlled Data
Fetching (This is an important step, please don't skip it)
- 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
- HINT: you can pass pagination details in the query string. If you pass the
per_page query string parameters the server will paginate results for you. EXAMPLE:
- Have the ability to go to other pages via pagination links or Infinite Scroll
PART III - Search - Looking Up Specific Beers / Breweries
- 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.
- Use any / all of the other API Endpoints to demonstrate your knowledge of React / Redux
- Implement live search on all of your components that show lists of items like Beers, Breweries, Etc
- Make your entire site responsive so it looks good on: a large screen, a tablet, and a phone
- Port to a React Native App