In this question, you need to build a screen that contains a list of users' avatars based on the first letter of their name.
- Each user avatar would contain the first letter of their name.
- You need to assign a random background color to the avatar. Be mindful of assigning light text color on darker backgrounds.
- There should be a circular button at the end of the list to add new avatars. On clicking of that button, a dialog box should open to gather user's name.
- User should be able to enter the name. Dialog box should contain two CTAs: One for submission and other one for cancellation. Dialog box should be dismissible. Please see the below design for interactions.
- On success, a new user avatar should be added.
- On clicking the removal button on avatar, a dialog should appear for removal confirmation.
- On success, selected avatar should be removed.
Once you have completed the above mentioned specs, feel free to add more interactions, functionalities, and improve the UI/UX.
Start the timer and try to finish as soon as possible. You can record your solving process or take a screenshot of your final code and share it on Twitter/LinkedIn and tag @devtoolstech