Assignment overview + Sample solution

[nknkcho]

Task 1: Debugging

Directions

We've created a product dashboard template with a graph displaying products' popularity levels and a simple text search. However, some features were left out or built with bugs to test your debugging skills. Your task is to restore the app's functionalities as portrayed in the example solution above.

When coming up with solutions, assume the backend layer was built by another developer and is not open to changes. The design and feature requirements, however, are open to changes and you may feel free to make any tasteful design adjustments.

Overall requests

It is not a requirement of this interview for you to create the perfect component, or to fix all the allocated bugs; the task is designed to reveal the way you approach tasks and Please ensure to think out loud throughout the tasks to reveal your thought process to us. The use of AI and web searches is permitted as long as you can explain why you've accepted the AI responses.

Task 2: Creating a component

Directions

Your task is to create a reusable EmptyState component that resembles the image above (credit: MongoDB). The EmptyState is typically used on error pages, empty search results, and/or other empty list / table states or error states.

Your component should apply best practices and reference existing components in terms of patterns and code styles. To get started, install all dependencies and run yarn storybook, or the equivalent using another package manager. Build the component and create a Storybook file that best showcases the component you've created. We have created a component directory for you in src/components/EmptyState.

The task is opinionated around our stack on purpose. We would like to gauge how quickly you can adapt to the usage of our component library. If the patterns used are very unfamiliar, you may simply use <div>s and other raw HTML elements. Our component library is a wrapper around ChakraUI's v2 and other component-specific libraries.