This project was bootstrapped with Create React App.

Multi Select Email Input

Dependencies

$ npm install json-server -g

Before run

$ npm install

Run

to start the react application one terminal session you can run npm start and in another tab npm run json-server this will ran the mocked server to get the data for the component.

$ npm start

Testing

I have added some end-to-end test cases using cypress simulating the same behavior as the Figma prototype and some other scenarios you can run those by using:

$ npm run cypress

Storybooks

I think that to create truly reusable components, you need to experiment with them and track the design so it's good to use storybooks, so I added some stories for certain components

$ npm run storybook

Changes and improvements

If I had more time I would add or fix:

• It usually starts with a mobile approach first, but since the figma project does not contain the mobile experience I focus on the desktop experience
• In Suggestion List component there is a fade effect made by a div and with smaller lists the component looks strange and may affect the UX
• The application respects the requirements but I think that in the part where you select a suggestion on list you should be able to navigate using the keyboard arrows
• Currently we can add the same email twice, I don't know if this behavior is expected, but I think it should be filtered from the suggestion list
• When hovering over an email already selected, sometimes, when we have several already selected, the animation to show the "X" to delete the element at times looks strange
• I love redux, but I think implementing it for this simple component would have been an overkill, but I think that when applications become more complex the handling of the state is certainly important
• Unit testing using Jest and react-testing-library