HiveAi Frontend Engineer Challenge

Objective

Using React or vanilla (plain) Javascript, build a reusable dropdown menu component. Please do not use a pre-built dropdown from a component library. We expect you to build this from scratch.

Getting Started

Clone the repository:

git clone https://github.com/FlemingVincent/hive-fe-challenge.git

Install dependencies:

yarn install

Run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Requirements

Design and Interface

• A user should be able to open and close the dropdown menu.
• The component must support a single selected option or multiple selected options. Please demonstrate both use cases separately.
• A user should be able to select and deselect all options at once.
• The selected option or options must be visible when the dropdown is closed.

Notes:

• You are encouraged to include any additional features that you believe are semantically or aesthetically crucial to a dropdown component
• Your component does not need to look identical to the designs above.

API (via Component Props)

• The component should support both single select and multi select.
• The component should have a flexible API, making it reusable across different parts of one or more applications. Consider it part of a component library.

Performance

• The component should render large lists efficiently.
• The component should not perform excessive computations.

Readability

• The code should be readable and a fellow developer should be able to dive right into your code.

After You Are Done

• Please email your recruiter with either a zip file of your project folder or a github link to the project directory
• Don’t forget to include instructions on how to run your project
• Please DO NOT include a node_modules directory as part of your submission.