Congratulations! If you're looking at this you probably have an interview with Oodle!
You have 2 hours to complete the challenge. If you run out of time before you complete the task to your own satisfaction, just stay calm and push your code. We are mostly interested in how you approach the problem and what your priorities are during the time.
Here is an endpoint that returns a list of beers: https://api.punkapi.com/v2/beers.
We want you to fetch data asynchronously from that API and display it as per the designs in the designs directory using React and Next.js in Typescript.
Note that the designs are for two separate pages: a beer listing page and a page for a specific beer.
- Good React knowledge
- CSS Competency
- Fetching and Handling Data Asynchronously
- fork this repo, it has some boilerplate to help you get started
- you may use any 3rd-party libraries you wish but you must write at least some custom styles to demonstrate your knowledge of CSS
- don't worry about supporting IE11
- you don't have to deploy your result but can if you wish. Either way we'll pull down the code and run it locally.
- we'll take a look at your work on a variety of screen sizes
Want to show off more front-of-the-front-end magic? Feel free to go beyond the design! ✨
You'd rather show off more back-of-the-front-end skills? Here's the full documentation for the punkapi. Go nuts 🥜.
Some ideas for things you could add include:
- filtering by brewed_before and/or brewed_after dates
- filtering by ABV (alcohol by volume)
- searching by beer_name
- adding a button to search for a random beer
Send us the link to your repo. We'll take a look at it, and if we like what we see we'll invite you to discuss it during a technical interview.