This is a simple create-react-app built to demonstrate development practices using React and Typescript. It has some basic testing examples using Jest and React Testing Library.
- Material UI for speedy formatting of the search text input, and other features, such as the more info dialogue.
- FuseJS for the fuzzy search/filtering
- msw for mocking server calls during testing
-
Implement a simple/slim front-end that integrates with API from provided link below: § https://punkapi.com/documentation/v2
-
Has a list/page of beer items.
-
Should be limited to 15 items per page.
-
List component should support pagination so we can navigate through list pages.
-
Each item in a list should have such information: name, abv, volume and up to 3 ingredient list names
-
Extra / Bonus Points
- Implement search component to search through all beers by their name
- Elements could be clickable. In the detailed view, more information should be shown (image, name, abv, volume, description, ingredients, food pairing and brewers tips)
Note
- Must demonstrate good development practices. You are free to use coding frameworks to speed up development and ease styling process.
- API for consumption: https://punkapi.com/documentation/v2
- The above task should be clear and manageable to be completed within ~2 hours timeframe for the experienced developer. If you have any questions feel free to ask as soon as possible as this is a time-critical task.
- We aren't providing a skeleton project for this - feel free to use a code generator for your preferred platform (e.g. create-react-app). We will be evaluating this as evidence of your ability to develop quality code, so please keep that in mind and consider test coverage and good principles. Better to do a smaller deliverable of excellent quality than to provide more features but in a slap-dash fashion.