Live view by clicking the badge (use Ctrl/Cmd + Shift to open a new window):
Objective: The purpose of this test is to assess your skills as a React developer in creating a user interface, implementing data fetching, and adding filtering functionality. Your task is to retrieve data from a given API and create a page that displays a list of beer cards using React components. Additionally, you need to include a search bar component to filter the beer list by name.
Requirements: Data Source: Fetch data from the API provided at punkAPI. For each beer, the required JSON attributes are name, tagline, and image_url.
React Page: Develop a React page that shows a list of beer cards. Each beer card should display the beer's name, tagline, and image. Use the retrieved data to populate the beer cards dynamically.
Search Bar Component: Implement a search bar component on the React page. Allow users to enter a search query and filter the beer list based on the beer's name. Update the beer cards dynamically to reflect the search results.
Guidelines: Utilize appropriate React components and layouts to create an aesthetically pleasing and user-friendly interface. Implement data fetching from the provided API using suitable networking techniques. Ensure proper error handling and graceful handling of network failures or missing data. Write clean and maintainable code following React coding
Conventions and best practices. Feel free to use any additional libraries or tools that you consider necessary to complete the task efficiently.
Provide the source code of your React project, along with any necessary instructions for running and testing the project.
Your submission will be evaluated based on the following criteria:
✅ Correct implementation of data fetching and parsing from the provided API.
✅ Proper display of beer cards, including the beer's name, tagline, and image.
✅ Implementation of the search bar component to filter the beer list by name.
✅ Code quality, including adherence to React coding conventions and best practices.
✅ Error handling and graceful handling of network failures or missing data.