Welcome to the React Developer interview. This coding exercise should take you no more than 4 hours, but you have 24 hours to complete from the moment you fork.
You'll be building a functional feature that gives users the ability to add fruits to their shopping cart. Your feature should fulfill the following requirements while ensuring production-ready code quality:
- Match the mocks in the Figma url
- Fetch the list of fruits from the API url provided below
- The input should be a typeahead that renders fruit names. When typing into the typeahead, the search results are filtered
- Upon clicking on a fruit, the fruit should be added to the cart
- Fruit quantity should increment and decrement on button clicks
- When quantity decrements to 0, fruit in shopping cart should be removed
The above requirements are the bare minimum. Below are some extra bonus points to consider, and elements I'll be looking out for as I review your code:
- Make intuitive UI considerations, add comments if necessary to explain your decision thought process.
- Make sure to implement performant code. In a real world scenario, consider how your implementation could be optimized.
- Accessibility
- General best practices around component structuring
https://fruityvice.com/api/fruit/all
- FORK this codesandbox, you may need to create an account on codesandbox.io.
- You have 24 hours to complete the exercise and send your new codesandbox url back to me. Submissions past the 24 hour period will not be considered.